.kc-band { background: var(--kc-bg); }
.kc-band--soft   { background: var(--kc-band-soft); }
.kc-band--accent { background: var(--kc-accent-soft);
border-block: 1px solid var(--kc-accent-line); }
.kc-outline__list { display: flex; flex-direction: column; gap: var(--kc-3); margin-top: var(--kc-9); }
.kc-outline__ch { background: var(--kc-bg); border: 1px solid var(--kc-border);
border-radius: var(--kc-r-md); }
.kc-outline__ch summary { display: flex; align-items: center; gap: var(--kc-4);
padding: var(--kc-4) var(--kc-5); cursor: pointer; list-style: none; }
.kc-outline__ch summary::-webkit-details-marker { display: none; }
.kc-outline__ico { flex: none; display: inline-flex; color: var(--kc-accent); }
.kc-outline__ico svg.kc-ico { width: 20px; height: 20px; }
.kc-outline__name { flex: 1; min-width: 0; color: var(--kc-text); font-weight: 700; font-size: 16px; }
.kc-outline__pill { flex: none; }
.kc-outline__ch summary::after { content: ''; flex: none; width: 8px; height: 8px; margin-left: 2px;
border-right: 2px solid var(--kc-text-sub); border-bottom: 2px solid var(--kc-text-sub);
transform: rotate(45deg); transition: transform .15s ease; }
.kc-outline__ch[open] summary::after { transform: rotate(-135deg); }
.kc-outline__lessons { margin: 0; padding: 0 var(--kc-5) var(--kc-4) var(--kc-5);
border-top: 1px solid var(--kc-border);
list-style: none; display: flex; flex-direction: column; }
.kc-outline__lesson { display: flex; align-items: center; gap: var(--kc-4);
padding: var(--kc-3) 0; border-top: 1px solid var(--kc-border); }
.kc-outline__lesson:first-child { border-top: 0; }
.kc-outline__lno { flex: none; color: var(--kc-text-sub); font-weight: 700; width: 3.5ch;
text-align: right; font-variant-numeric: tabular-nums; }
.kc-outline__thumb { flex: none; width: 128px; height: 67px; border-radius: var(--kc-r-md);
object-fit: contain; background: var(--kc-band-soft); }
.kc-outline__thumb--empty { display: flex; align-items: center; justify-content: center; }
.kc-outline__thumb--empty::after { content: '▶'; font-size: 18px; color: var(--kc-text-sub); opacity: .5; }
.kc-outline__lesson-title { flex: 1; min-width: 0; color: var(--kc-text); font-size: 15px; line-height: 1.5; }
.kc-outline__soon { display: inline-block; margin-left: var(--kc-2); padding: 1px 8px;
border-radius: 999px; background: var(--kc-band-soft); color: var(--kc-ink-2); font-size: 12px; }
.kc-outline__lock { flex: none; display: inline-flex; color: var(--kc-text-sub); }
.kc-outline__lock svg.kc-ico { width: 16px; height: 16px; }
.kc-outline__lmin { flex: none; color: var(--kc-text-sub); font-size: 13px; white-space: nowrap; }
@media (max-width: 640px) {
.kc-outline__ch summary { flex-wrap: wrap; }
.kc-outline__pill { margin-left: calc(20px + var(--kc-4)); }
.kc-outline__lesson { flex-wrap: wrap; }
.kc-outline__lesson-title { flex: 1 1 100%; order: 1; margin-top: var(--kc-1); font-size: 14px; }
.kc-outline__lmin { font-size: 12px; }
}
@media (max-width: 900px) {
.kc-outline__thumb { width: 88px; height: 46px; }
}
@media (min-width: 768px) { .kc-proof { --kc-col: 200px; } }
.kc-btn--google { background: #FFFFFF; border-color: var(--kc-border-strong); color: #1F1F1F; }
.kc-btn--google:hover { background: #F7F9FA; border-color: var(--kc-border-strong); color: #1F1F1F; }
.kc-modal[open]:not(:modal) { position: relative; max-height: none; }
summary.kc-btn { list-style: none; }
summary.kc-btn::-webkit-details-marker { display: none; }
ol.kc-hint { margin: 0; padding-left: var(--kc-6); }
section.kc-card--invite {
background: var(--kc-bg-tint);
border-color: var(--kc-accent-line);
}
section.kc-card--invite p.kc-muted,
section.kc-card--invite span.kc-muted { color: var(--kc-ink-2); }
.kc-topbar > a.kc-brand { flex: none; white-space: nowrap; }
@media (max-width: 560px) {
.kc-topbar { flex-wrap: wrap; height: auto; row-gap: var(--kc-2); padding-block: var(--kc-3); }
.kc-studio header.kc-topbar,
.kc-studio-light header.kc-topbar { height: auto; min-height: 56px; padding-block: 0; }
.kc-topbar > span.kc-fill { flex-basis: 0; }
}
.kc-topbar__who {
flex: 0 1 auto; min-width: 0; max-width: 180px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 1023px) {
.kc-topbar__who { display: none; }
}
@media (max-width: 767px) {
.kc-topbar > a.kc-brand > span.kc-brand__name { display: none; }
}
.kc-noti {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--kc-3);
min-height: 44px;
margin-bottom: var(--kc-6);
padding: var(--kc-3) var(--kc-4);
border: 1px solid var(--kc-accent-line);
border-radius: var(--kc-r-md);
background: var(--kc-accent-soft);
color: var(--kc-accent-ink);
font-size: 15px; font-weight: 600; line-height: 1.4;
text-decoration: none;
transition: border-color var(--kc-fast) var(--kc-ease-out);
}
.kc-noti:hover {
background: var(--kc-accent-soft); color: var(--kc-accent-ink);
border-color: var(--kc-accent-ink); text-decoration: none;
}
.kc-noti__ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; }
.kc-noti__count {
flex: none;
min-width: 24px; height: 24px; padding: 0 var(--kc-2);
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--kc-r-pill);
background: var(--kc-accent-ink); color: var(--kc-bg);
font-size: 11px; font-weight: 700; line-height: 1;
}
.kc-noti__what { flex: 1 1 12rem; min-width: 0; }
.kc-noti__go { flex: none; font-size: 14px; text-decoration: underline; }
.kc-card--form { max-width: var(--kc-form-card-w); }
@media (min-width: 1024px) {
.kc-wrap.kc-wrap--admin,
.kc-wrap.kc-wrap--area {
max-width: none;
margin-inline: 0;
grid-template-columns: 236px minmax(0, 1fr);
}
.kc-wrap.kc-wrap--admin > *:not(dialog),
.kc-wrap.kc-wrap--area > *:not(dialog) {
max-width: var(--kc-shell);
margin-inline: auto;
width: 100%;
}
.kc-wrap.kc-wrap--admin > .kc-card--form,
.kc-wrap.kc-wrap--area > .kc-card--form { max-width: var(--kc-form-card-w); margin-inline: 0; }
}
.kc-table th.kc-act { text-align: right; }
.kc-table th.kc-table__pillhead {
padding-left: calc(var(--kc-4) + var(--kc-3) + 6px + var(--kc-2));
}
.kc-formcol.kc-formcol--wide { max-width: none; }
.kc-field__label-row { display: flex; align-items: center; gap: var(--kc-1); }
.kc-field__label-row > .kc-hint-i > .kc-hint-i__btn { margin-block: -12px; }
.kc-hint-i { position: relative; display: inline-flex; flex: none; }
.kc-hint-i__btn svg.kc-ico { width: 16px; height: 16px; }
.kc-hint-i__pop {
position: absolute; top: calc(100% + var(--kc-1)); left: 0; z-index: 10;
width: max-content; max-width: min(280px, calc(100vw - 32px));
padding: var(--kc-3); border-radius: var(--kc-r-md);
background: var(--kc-bg); border: 1px solid var(--kc-border);
box-shadow: var(--kc-shadow-md);
font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--kc-ink-2);
text-align: left; white-space: normal;
}
.kc-tile__photo {
display: block;
aspect-ratio: 1200 / 630;
overflow: hidden;
margin-bottom: var(--kc-5);
border-radius: var(--kc-r-md);
background: var(--kc-bg-muted);
}
.kc-tile__photo > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#kcx-gifts div.kc-sec__grid { --kc-col: 480px; }
.kc-sec__grid--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) {
.kc-sec__grid--quad { grid-template-columns: 1fr; }
}
div.kc-close { padding: var(--kc-9); }
@media (max-width: 640px) {
div.kc-close { padding: var(--kc-6); }
}
.kc-rec__art {
display: block; aspect-ratio: 16 / 10; overflow: hidden;
border-radius: var(--kc-r-md); background: var(--kc-surface-2);
}
.kc-rec__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kc-rec__art--mono { display: grid; place-items: center; background: var(--kc-accent-soft); }
.kc-rec__art--mono span {
font-size: clamp(28px, 7vw, 44px); font-weight: 700; letter-spacing: .02em;
color: var(--kc-accent-ink);
}
.kc-rec__art--book { aspect-ratio: 3 / 4; }
.kc-rec__art--tool { aspect-ratio: 16 / 10; }
.kc-shelf { --kc-col: 170px; }
@media (max-width: 479px) {
.kc-shelf { --kc-col: 150px; }
}
.kc-rec__art--book.kc-rec__art--mono {
background:
linear-gradient(to right, rgba(0, 0, 0, .10) 0 6px, transparent 6px 10px),
var(--kc-accent-soft);
}
.kc-rec__art--book.kc-rec__art--mono span { font-size: clamp(22px, 5vw, 32px); }
@media (min-width: 1024px) {
body:has(.kc-wrap--admin) .kc-topbar,
body:has(.kc-wrap--area) .kc-topbar,
body:has(.kc-wrap--admin) .kc-sitefoot__inner,
body:has(.kc-wrap--area) .kc-sitefoot__inner,
body:has(.kc-wrap--admin) .kc-sitefoot__bar,
body:has(.kc-wrap--area) .kc-sitefoot__bar { padding-inline: var(--kc-7); }
}
@media (min-width: 1280px) {
.kc-studio header.kc-topbar,
.kc-studio-light header.kc-topbar { padding-inline: var(--kc-7); }
}
@media print {
:root, [data-theme="light"], [data-theme="dark"], .kc-studio, .kc-studio-light {
color-scheme: light;
--kc-bg: #FFFFFF; --kc-bg-app: #FFFFFF; --kc-bg-muted: #FFFFFF; --kc-bg-tint: #FFFFFF;
--kc-surface: #FFFFFF; --kc-surface-2: #FFFFFF; --kc-band-soft: #FFFFFF;
--kc-ink: #000000; --kc-ink-2: #222222; --kc-ink-3: #444444; --kc-ink-invert: #000000;
--kc-border: #999999; --kc-border-mid: #777777; --kc-border-strong: #555555;
--kc-border-soft: #BBBBBB; --kc-border-hero: #999999;
--kc-accent: #000000; --kc-accent-ink: #000000; --kc-accent-ink-hover: #000000;
--kc-accent-soft: #FFFFFF; --kc-accent-line: #999999; --kc-on-accent: #000000;
--kc-pro: #000000; --kc-pro-bg: #FFFFFF; --kc-pro-line: #999999;
--kc-shadow-sm: none; --kc-shadow-md: none; --kc-shadow-lg: none;
--kc-cyan: #000000; --kc-cyan-deep: #000000; --kc-cta-hover: #000000;
--kc-text: #000000; --kc-text-sub: #444444; --kc-text-invert: #000000;
--kc-btn-text: #000000; --kc-border-row: #BBBBBB; --kc-thumb-empty: #FFFFFF;
}
html, body { background: #FFFFFF; color: #000000; }
header.kc-topbar, .kc-sidenav, .kc-sitefoot, .kc-noti, .kc-navtoggle,
.kc-stage, .kc-embed, .kc-plate, [data-action], dialog { display: none !important; }
a { color: inherit; text-decoration: none; }
.kc-receipt, .kc-receipt__row, .kc-card { break-inside: avoid; page-break-inside: avoid; }
.kc-card { border: 1px solid #999999; box-shadow: none; }
.kc-wrap, .kc-sec { max-width: none; padding-inline: 0; }
}
.kc-affadd { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto;
gap: var(--kc-3); align-items: center; margin-top: var(--kc-4); }
@media (max-width: 600px) {
.kc-affadd { grid-template-columns: minmax(0, 1fr); }
}
.kc-card--pick { border-color: var(--kc-accent); }