/* AoT 강좌 공용 부품 — reference/aot-ui-guide.md, 프로토타입(reference/prototype-artifact.html).
   값은 전부 aot-tokens.css 의 토큰으로 쓴다. 테두리 없이 밝기로 나누고,
   누르는 것은 알약 · 쓰는 것은 밑줄. 정렬선: 바깥 여백 16 + 안쪽 16 = 32. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* 손가락 화면은 전체를 115% 로 — 크기가 rem 이라 표적도 함께 커진다 */
@media (pointer:coarse){html{font-size:var(--aot-touch-scale)}}

body{margin:0;background:var(--aot-surface-body);color:var(--aot-color-text-primary);font-family:var(--aot-font-family);font-size:var(--aot-fs-page-body);font-weight:var(--aot-fw-body);line-height:1.6;padding-inline:var(--aot-space-4);padding-block:0 var(--aot-space-6)}
:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--aot-color-text-primary);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--aot-color-brand-primary);outline-offset:2px}
[hidden]{display:none}
.wrap{max-width:1240px;margin-inline:auto}

/* 페이지 제목 · 설명 · 단락 제목 — 카드 밖 글자도 정렬선 32 에 선다 */
.page-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--aot-space-3);padding:var(--aot-space-5) var(--aot-space-4) var(--aot-space-3)}
.page-title h3,.t-page-title{font-size:var(--aot-fs-page-title);font-weight:var(--aot-fw-title);line-height:1.35}
.page-desc{padding-inline:var(--aot-space-4);margin-bottom:var(--aot-space-3);font-size:var(--aot-fs-desc);color:var(--aot-color-text-secondary);max-width:72ch;line-height:1.5}
.status{font-size:var(--aot-fs-desc);color:var(--aot-color-text-secondary)}
.sec-title{padding:var(--aot-space-5) var(--aot-space-4) var(--aot-space-3)}
.sec-title,.t-section-title{font-size:var(--aot-fs-section-title);font-weight:var(--aot-fw-title);line-height:1.4}

/* 카드 — 흰 면, 테두리 없음 */
.card{background:var(--aot-surface-card);border-radius:var(--aot-radius-xl);padding:var(--aot-space-4)}
.card + .card{margin-top:var(--aot-space-3)}

/* 행 글자 */
.row-title{font-size:var(--aot-fs-container-title);font-weight:var(--aot-fw-title);line-height:1.4}
.row-desc{font-size:var(--aot-fs-desc);color:var(--aot-color-text-secondary);line-height:1.5}

/* 알약 버튼 — 폭은 최소값만, 커밋 동작이 오른쪽 끝 */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:var(--aot-touch);min-width:var(--aot-btn-fixed-width);padding:0 18px;border:0;border-radius:var(--aot-radius-pill);font-size:var(--aot-fs-control);font-weight:var(--aot-fw-label);white-space:nowrap;color:var(--aot-color-text-tertiary);text-decoration:none;cursor:pointer}
.pill:hover{opacity:.82}
.pill-primary{background:var(--aot-btn-bg-primary)}
.pill-secondary{background:var(--aot-btn-bg-secondary)}
.pill-danger{background:var(--aot-color-danger)}
/* 못 누르는 것은 면을 뺀다 — 이유는 옆(아랫줄)에 적는다 */
.pill:disabled{background:transparent;color:var(--aot-color-text-secondary);cursor:default;opacity:1}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--aot-space-3);justify-content:flex-end}
.actions{display:flex;flex-wrap:wrap;gap:var(--aot-space-3);justify-content:flex-end;margin-top:var(--aot-space-4)}

/* 한 줄 입력 — 밑줄이 글자에 붙는다, 포커스·오류는 색만 바꾼다 */
.input-line{border:0;border-bottom:2px solid var(--aot-btn-border-primary);border-radius:0;background:transparent;padding:12px 2px 1px;line-height:1.15;min-height:36px;font-size:var(--aot-fs-page-body);color:var(--aot-color-text-primary)}
.input-line:focus{border-bottom-color:var(--aot-color-brand-primary)}
.input-line[aria-invalid="true"]{border-bottom-color:var(--aot-color-danger)}
.input-line.wide{width:min(320px,100%)}
.input-line.full{width:100%}

/* 여러 줄 입력 — 옅은 면, 카드 폭을 꽉 채워 글자를 정렬선에 둔다 */
.textarea{display:block;width:calc(100% + 2 * var(--aot-space-4));margin-inline:calc(-1 * var(--aot-space-4));min-height:7.5em;border:0;border-radius:var(--aot-radius-sm);background:var(--aot-surface-body);padding:var(--aot-space-3) var(--aot-space-4);font-size:var(--aot-fs-page-body);line-height:1.6;resize:vertical}

/* 설정 행 — 왼쪽 읽을 것, 오른쪽 할 것. 좁아지면 라벨이 양보한다 */
.opt + .opt{border-top:1px solid var(--aot-border-neutral);margin-top:var(--aot-space-3);padding-top:var(--aot-space-3)}
.opt-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--aot-space-3)}
.opt-label{flex:1 1 auto;min-width:0;font-weight:var(--aot-fw-label)}
.opt-row > .ctrl{flex:0 1 auto;margin-left:auto}
/* 제목 + 설명 두 줄이 라벨 자리에 설 때 — 라벨 굵기를 물려받지 않는다 */
.row-text{flex:1 1 auto;min-width:0}
.opt-stack{display:grid;gap:var(--aot-space-2)}
.opt-sub{margin-top:var(--aot-space-1);font-size:var(--aot-fs-desc);color:var(--aot-color-text-secondary)}
.field-error{color:var(--aot-color-danger)}

/* 탭 — 글자 + 켜진 탭 밑줄, 넘치면 가로로 넘긴다 */
.tabs{display:flex;border-bottom:1px solid var(--aot-border-neutral);overflow-x:auto;scrollbar-width:none;margin-top:var(--aot-space-3)}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;min-height:var(--aot-touch);padding:0 var(--aot-space-4);margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--aot-color-text-secondary);font-size:var(--aot-fs-page-body);font-weight:var(--aot-fw-label);white-space:nowrap;text-decoration:none;cursor:pointer}
.tab[aria-current="page"],.tab[aria-selected="true"]{color:var(--aot-color-text-primary);border-bottom-color:var(--aot-color-brand-primary)}
.tab-body{padding-top:var(--aot-space-3)}

/* 위 띠 — 첫 글자와 끝 버튼이 정렬선 32 에 선다 */
.topbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--aot-space-3);padding:var(--aot-space-3) var(--aot-space-4) 0}
.topbar-brand{font-size:var(--aot-fs-container-title);font-weight:var(--aot-fw-title);text-decoration:none}
.topbar-nav{display:flex;align-items:center;flex-wrap:wrap;gap:var(--aot-space-3);margin-left:auto}
.topbar-nav form{margin:0}
.nav-link{display:inline-flex;align-items:center;min-height:var(--aot-touch);font-weight:var(--aot-fw-label);text-decoration:none}
.nav-link:hover,.topbar-brand:hover{opacity:.82}

/* 안내 상자 — 틴트 면 + 짝지은 글자색. 왼쪽 4px 띠는 종류를 말하는 표식 */
.notice{margin-top:var(--aot-space-3);padding:var(--aot-space-3) var(--aot-space-4);border-radius:var(--aot-radius-xl);line-height:1.5}
.notice + .card{margin-top:var(--aot-space-3)}
.notice-info{background:var(--aot-tint-info-bg);color:var(--aot-tint-info-fg);border-left:4px solid color-mix(in srgb,var(--aot-tint-info-fg) 35%,transparent)}
.notice-success{background:var(--aot-tint-success-bg);color:var(--aot-tint-success-fg);border-left:4px solid color-mix(in srgb,var(--aot-tint-success-fg) 35%,transparent)}
.notice-warning{background:var(--aot-tint-warning-bg);color:var(--aot-tint-warning-fg);border-left:4px solid color-mix(in srgb,var(--aot-tint-warning-fg) 35%,transparent)}
.notice-danger{background:var(--aot-tint-danger-bg);color:var(--aot-tint-danger-fg);border-left:4px solid color-mix(in srgb,var(--aot-tint-danger-fg) 35%,transparent)}

/* 카드 아래 이어지는 링크 한 줄 */
.card-foot{padding:var(--aot-space-3) var(--aot-space-4) 0}

/* 고르는 것은 알약 — 화살표는 새 색 없이 글자색으로 그린다. 열려 있는 동안에도 링을 두른다 */
.select-pill{appearance:none;-webkit-appearance:none;border:0;border-radius:var(--aot-radius-pill);min-height:var(--aot-touch);max-width:100%;padding:0 40px 0 var(--aot-space-4);font-size:var(--aot-fs-page-body);color:var(--aot-color-text-primary);background-color:var(--aot-surface-control);background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.select-pill:focus{outline:2px solid var(--aot-color-brand-primary);outline-offset:2px}

/* 한 번만 보이는 링크 — 길게 눌러 통째로 고른다 */
.link-once{margin-block:var(--aot-space-2);user-select:all;overflow-wrap:anywhere}

.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--aot-space-3);margin-top:var(--aot-space-3)}
.foot-left{margin-right:auto}
.actions form,.btn-row form{margin:0}
.input-line.num{width:96px;text-align:right;font-variant-numeric:tabular-nums}

/* 원고 라이브러리 목록 — 분류 띠는 3단(바닥색)으로 카드 폭을 채운다 */
.lib-cat-name{margin:var(--aot-space-3) calc(-1 * var(--aot-space-4)) 0;padding:var(--aot-space-2) var(--aot-space-4);background:var(--aot-surface-body);font-weight:var(--aot-fw-label)}
.lib{overflow:hidden}
.lib > .lib-cat-name:first-child{margin-top:calc(-1 * var(--aot-space-4))}
.lib-list,.links{list-style:none;margin:0;padding:0}
.lib-item{padding-block:var(--aot-space-2)}
.lib-item + .lib-item{border-top:1px solid var(--aot-border-neutral)}
.row-main{display:grid;gap:2px;min-height:var(--aot-touch);align-content:center;color:var(--aot-color-text-primary);text-decoration:none}
.row-main:hover .row-title{opacity:.82}

/* 원고 본문 */
.manuscript{display:grid;gap:var(--aot-space-3)}
.prose p,.prose li{max-width:68ch}
.prose > * + *{margin-top:var(--aot-space-2)}
.prose ul{margin:0;padding-left:20px;display:grid;gap:var(--aot-space-1)}
.deeper-label{font-size:var(--aot-fs-desc);color:var(--aot-color-text-secondary)}
.links{display:grid;gap:var(--aot-space-2)}
.media{display:grid;gap:var(--aot-space-1);margin:0}
.media-img,.media-video{display:block;max-width:100%;border-radius:var(--aot-radius-sm);background:var(--aot-surface-body)}
.media-img{max-height:420px}
.media-video{width:100%}
.media-card{display:grid;gap:2px;margin-inline:calc(-1 * var(--aot-space-4));padding:var(--aot-space-3) var(--aot-space-4);background:var(--aot-surface-body);color:inherit;text-decoration:none}
.media-card:hover .row-title{opacity:.82}
.media-card .row-title{text-decoration:underline;text-underline-offset:3px}
.yt-frame{display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:0;border-radius:var(--aot-radius-sm)}

/* 원고 편집 블록 — 3단은 바닥색으로 되돌아가고, 안의 컨트롤은 카드색 */
.blk{margin-inline:calc(-1 * var(--aot-space-4));padding:var(--aot-space-3) var(--aot-space-4);background:var(--aot-surface-body);display:grid;gap:var(--aot-space-2)}
.blk + .blk{margin-top:var(--aot-space-3)}
.blk .select-pill{background-color:var(--aot-surface-card)}
.blk .textarea{width:100%;margin-inline:0;background:var(--aot-surface-card)}
.blk-preview{max-height:220px;width:auto}
.add-bar{margin-top:var(--aot-space-3)}
.file-input{max-width:100%;font-size:var(--aot-fs-desc);color:var(--aot-color-text-secondary)}
.file-input::file-selector-button{min-height:var(--aot-touch);margin-right:var(--aot-space-3);padding:0 18px;border:0;border-radius:var(--aot-radius-pill);background:var(--aot-btn-bg-secondary);color:var(--aot-color-text-tertiary);font:inherit;font-size:var(--aot-fs-control);font-weight:var(--aot-fw-label);cursor:pointer}
.plain-list{list-style:none;margin:var(--aot-space-2) 0 0;padding:0;display:grid;gap:var(--aot-space-1)}
.summary{padding:var(--aot-space-3) var(--aot-space-4) 0;font-size:var(--aot-fs-desc);color:var(--aot-color-text-secondary)}
.row-warn{font-size:var(--aot-fs-desc);color:var(--aot-color-danger);line-height:1.5}

/* 구성 보드 — 프로토타입의 구성 화면 */
.plan{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:var(--aot-space-3);align-items:start}
.plan-col{display:grid;gap:var(--aot-space-3);align-content:start}
.plan-col-lib{position:sticky;top:var(--aot-space-3)}
.plan-lib{max-height:calc(100 * var(--aot-dvh) - 88px);overflow:auto;scrollbar-width:thin;display:grid;gap:var(--aot-space-2);align-content:start}
.plan-lib .lib-item{display:flex;align-items:center;gap:var(--aot-space-3)}
.plan-lib .row-main{flex:1 1 auto;min-width:0;border:0;padding:0;background:transparent;text-align:left;font:inherit;cursor:pointer}
.lib-item[draggable="true"],.item[draggable="true"]{cursor:grab}
.plan-sessions{display:grid;gap:var(--aot-space-3)}
.sess-head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--aot-space-3)}
.viz-track{position:relative;height:6px;border-radius:var(--aot-radius-pill);overflow:hidden;margin-top:var(--aot-space-3);background:color-mix(in srgb,var(--aot-color-text-primary) var(--aot-viz-track-mix),transparent)}
.viz-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--aot-band-3)}
.items{list-style:none;margin:var(--aot-space-3) 0 0;padding:0}
.item + .item{border-top:1px solid var(--aot-border-neutral)}
.item-main{display:grid;grid-template-columns:3.5em 1fr auto;gap:var(--aot-space-3);align-items:center;width:100%;min-height:var(--aot-touch);padding:var(--aot-space-2) 0;border:0;background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer}
.item-main:hover .row-title{opacity:.82}
.item-clock,.item-min{color:var(--aot-color-text-secondary);font-variant-numeric:tabular-nums}
.item-min{text-align:right;white-space:nowrap}
.item-text{display:grid;gap:2px;min-width:0}
.item.drop-before{box-shadow:inset 0 2px 0 var(--aot-color-brand-primary)}
.item.drop-after{box-shadow:inset 0 -2px 0 var(--aot-color-brand-primary)}
.items.drop-end{box-shadow:inset 0 -2px 0 var(--aot-color-brand-primary)}
.empty{padding-block:var(--aot-space-3)}
@media (max-width:900px){
  .plan{grid-template-columns:1fr}
  .plan-col-lib{position:static;order:2}
  .plan-lib{max-height:none}
}

/* 창 — 폰에서는 전체 화면 */
dialog{border:0;padding:0;border-radius:var(--aot-radius-xl);background:var(--aot-surface-card);color:var(--aot-color-text-primary);box-shadow:var(--aot-shadow-modal);width:min(720px,calc(100 * var(--aot-vw) - 32px));max-height:calc(100 * var(--aot-dvh) - 48px)}
dialog::backdrop{background:var(--aot-modal-backdrop)}
.dlg{display:flex;flex-direction:column;max-height:calc(100 * var(--aot-dvh) - 48px)}
.dlg-head{padding:var(--aot-space-5) var(--aot-space-4) var(--aot-space-3);display:grid;gap:var(--aot-space-1)}
.dlg-title{margin:0;font-size:var(--aot-fs-page-title);font-weight:var(--aot-fw-title);line-height:1.35}
.dlg-body{overflow:auto;padding:0 var(--aot-space-4) var(--aot-space-4);scrollbar-width:thin}
.dlg-foot{display:flex;flex-wrap:wrap;gap:var(--aot-space-3);justify-content:flex-end;padding:var(--aot-space-3) var(--aot-space-4) var(--aot-space-4)}
@media (max-width:560px){
  dialog{width:calc(100 * var(--aot-vw));max-width:none;height:calc(100 * var(--aot-dvh));max-height:none;margin:0;border-radius:0}
  .dlg{max-height:calc(100 * var(--aot-dvh))}
}

/* 진행 화면 — 버튼은 엄지 자리(화면 아래)에 붙는다 */
.live-now{display:grid;gap:var(--aot-space-1)}
.live-remaining{margin-top:var(--aot-space-2);font-size:var(--aot-fs-page-title);font-weight:var(--aot-fw-title);font-variant-numeric:tabular-nums}
.live-progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:6px;margin-top:var(--aot-space-2);border:0;border-radius:var(--aot-radius-pill);overflow:hidden;background:color-mix(in srgb,var(--aot-color-text-primary) var(--aot-viz-track-mix),transparent);color:var(--aot-band-3)}
.live-progress::-webkit-progress-bar{background:color-mix(in srgb,var(--aot-color-text-primary) var(--aot-viz-track-mix),transparent)}
.live-progress::-webkit-progress-value{background:var(--aot-band-3)}
.live-progress::-moz-progress-bar{background:var(--aot-band-3)}
.live-drawer{margin-top:var(--aot-space-3)}
.live-drawer-summary{display:flex;align-items:center;min-height:var(--aot-touch);font-weight:var(--aot-fw-label);cursor:pointer;list-style:none}
.live-drawer-summary::-webkit-details-marker{display:none}
.live-drawer-label{display:block;margin-top:var(--aot-space-3)}
.live-drawer a[aria-current="true"] .row-title{font-weight:var(--aot-fw-label)}
.live-bar{position:sticky;bottom:0;z-index:1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--aot-space-3);margin:var(--aot-space-3) calc(-1 * var(--aot-space-4)) 0;padding:var(--aot-space-3) var(--aot-space-4);background:var(--aot-surface-body)}
.live-bar form{margin:0}

/* 아래 띠 — 언어 고르기 */
.footer{padding:var(--aot-space-6) var(--aot-space-4) 0}
.footer-langs{display:flex;flex-wrap:wrap;gap:var(--aot-space-3)}
.footer-langs .nav-link{font-weight:var(--aot-fw-body);color:var(--aot-color-text-secondary)}
.footer-langs .nav-link[aria-current="true"]{font-weight:var(--aot-fw-label);color:var(--aot-color-text-primary)}

/* 폰 위 띠 — 메뉴는 한 줄로 두고 가로로 넘긴다 */
@media (max-width:560px){
  .topbar-nav{flex-wrap:nowrap;width:100%;margin-left:0;overflow-x:auto;scrollbar-width:none}
  .topbar-nav::-webkit-scrollbar{display:none}
  .topbar-nav .nav-link,.topbar-nav .pill{flex:0 0 auto;white-space:nowrap}
}

/* 브라우저 인쇄 — 누르는 것과 머리는 빼고 원고만 */
@media print{
  body{background:var(--aot-surface-card)}
  .topbar,.tabs,.actions,.live-bar,.live-drawer,.notice,.pager,.footer{display:none}
  .card{padding-inline:0}
}

/* 화면에는 없고 Enter 로만 눌리는 저장 버튼 */
.default-submit{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;padding:0}