/* Targeted additions to the existing black / gold v26 visual language. */
.intro-language{position:absolute;left:32px;top:26px;z-index:50;display:flex;gap:12px}
.intro-language button{color:#e4dccb!important;font-size:13px!important;min-height:44px;min-width:64px;letter-spacing:0!important}
.intro-language button[aria-pressed=true]{color:#e4c47b!important;border-bottom:1px solid currentColor}
.opening-skip{min-width:108px;min-height:44px;font-size:12px!important;color:#e4dccb!important;letter-spacing:.04em!important;z-index:51}
.opening-enter small{font-size:11px!important;letter-spacing:.04em!important}
.skip-content:focus{position:fixed!important;z-index:10000;left:16px;top:16px;width:auto;height:auto;clip:auto;padding:14px;background:#f1dd9e;color:#171813}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid #e4c47b;outline-offset:4px}
/* 2026-09-13 하단 고정 막대(.scene-controls) 폐지 → 헤더 장면 내비게이터(.scene-nav) + 움직임 버튼(.motion-toggle) + 진행선(.hdr::after) */
.hdr-center{display:flex;align-items:center;gap:clamp(14px,1.5vw,28px);min-width:0}
.scene-nav{display:flex;align-items:center;gap:2px;padding-left:clamp(10px,1.1vw,20px);border-left:1px solid rgba(240,238,232,.16);color:rgba(240,238,232,.72);font-family:"DM Sans","Noto Sans KR",sans-serif;font-variant-numeric:tabular-nums}
.scene-nav-btn{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:none;color:inherit;cursor:pointer;transition:color var(--d1),background var(--d1),transform 160ms var(--ease-out)}
.scene-nav-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.scene-nav-btn:active{transform:scale(.94)}
.scene-nav-btn:disabled{opacity:.28;cursor:default;transform:none;background:none}
.scene-pos{position:relative;display:inline-grid;align-items:center;height:32px;padding:0 18px 0 10px;border-radius:999px;transition:background var(--d1)}
.scene-pos:hover{background:rgba(255,255,255,.08)}
.scene-pos::after{content:"";position:absolute;right:8px;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.55;pointer-events:none}
.scene-pos-num{font-size:12px;letter-spacing:.06em;color:rgba(240,238,232,.9);pointer-events:none;white-space:nowrap}
.scene-pos-num b{font-weight:600;color:#e4c47b}
.scene-pos-num i{font-style:normal;opacity:.45;margin:0 5px}
.scene-pos select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font:inherit}
.scene-pos:focus-within{outline:2px solid #e4c47b;outline-offset:2px}
.motion-toggle{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:none;color:rgba(240,238,232,.7);cursor:pointer;transition:color var(--d1),background var(--d1),transform 160ms var(--ease-out)}
.motion-toggle:hover{color:#fff;background:rgba(255,255,255,.08)}
.motion-toggle:active{transform:scale(.94)}
.motion-toggle[aria-pressed="true"]{color:#e4c47b}
.hdr::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:calc((var(--scene-index,0) + 1) / 12 * 100%);background:#caa44b;transition:width var(--d3) var(--ease);pointer-events:none}
body.intro-open .hdr::after{width:0}
body.mode-flow .scene-nav{display:none}
@media(max-width:1180px){.scene-nav{padding-left:8px}.scene-pos{padding:0 16px 0 8px}.hdr-center{gap:12px}}
/* 오른쪽 장면 점: 현재 점 옆에 장면 이름, 나머지는 hover/focus 때 */
.scene-dots button{position:relative}
.scene-dots button::after{content:attr(aria-label);position:absolute;right:30px;top:50%;translate:0 -50%;white-space:nowrap;font-size:11px;letter-spacing:.04em;color:currentColor;opacity:0;transition:opacity var(--d2) var(--ease);pointer-events:none}
.scene-dots button[aria-current="true"]::after,.scene-dots button:hover::after,.scene-dots button:focus-visible::after{opacity:.85}
/* 포커스 링: 노란 문의 장면에서는 어두운 링, 입력창·목적 카드·인트로 버튼의 outline:none 복구 */
#contact :focus-visible,#contact .pill:focus-visible{outline:2px solid #181817!important;outline-offset:3px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid #e4c47b!important;outline-offset:2px}
.purpose:focus-visible{outline:2px solid #e4c47b!important;outline-offset:2px}
.opening-enter:focus-visible{outline:2px solid #e4c47b!important;outline-offset:3px}
/* 헤더 비활성 언어 버튼 대비(0.42→0.62) */
.lang-switch :is(button,a){opacity:.62}
.lang-switch :is(button,a)[aria-pressed="true"]{opacity:1}
/* 눌림 피드백 */
.pill,.submit,.header-cta,.sound,.purpose,.opening-enter,.text-action,.v27-contact-secondary,.lang-switch :is(button,a),.scene-dots button{transition:transform 160ms var(--ease-out),background .3s ease,color .3s ease,border-color .3s ease,opacity .3s ease}
.pill:active,.submit:active,.header-cta:active,.sound:active,.purpose:active,.opening-enter:active,.text-action:active,.v27-contact-secondary:active,.lang-switch :is(button,a):active,.scene-dots button:active{transform:scale(.97)}
.concept-detail{font-size:16px;line-height:1.75;max-width:660px;margin-top:22px;color:#d5d2c9}
.concept-detail summary{color:#e4c47b;cursor:pointer;font-size:15px;min-height:36px;padding:6px 0;list-style:revert}
.concept-detail p{margin:10px 0 12px;max-width:62ch}
.concept-detail a,.text-action{display:inline-block;color:#e4c47b;border:0;border-bottom:1px solid #9f8550;background:transparent;font:inherit;font-size:14px;line-height:1.6;padding:8px 0;text-decoration:none;cursor:pointer;min-height:40px;justify-self:start}
.research-status{font-size:14px!important;line-height:1.7!important;color:#c8c1ad!important;border-top:1px solid #554c36;padding-top:14px;margin-top:18px;max-width:52ch}
.foot-main p,.foot-main small{color:#b4b6b9!important}
.foot-coming span{color:#c8c8c4!important}
.modal{padding-top:36px;padding-bottom:48px}
.modal h2{font-size:32px;line-height:1.3;margin-top:18px}
.modal .body-copy{font-size:16px;line-height:1.8;color:#cfcec6}
.modal .note,.modal .field>span{color:#c5c5bd}
.modal .field{margin-top:22px}
.modal .field input,.modal .field select,.modal .field textarea{font-size:16px;line-height:1.6}
.modal .v27-contact-draft{font-size:14px!important}
.modal-close{z-index:2;background:#131619;color:#eee;min-width:44px;min-height:44px}
/* 정지 선택은 장면별 !important 효과보다 우선한다. 일반 상태의 연출은 유지한다. */
@layer nomi-motion-stop{
.motion-paused #main *,.motion-paused #main *::before,.motion-paused #main *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
}
.motion-paused #main .rv,.motion-paused #main .rv>*{opacity:1!important;transform:none!important;filter:none!important}
.motion-paused #main #sftdef .sftdef-motion img{opacity:1!important;clip-path:none!important}
@media(min-width:761px) and (min-height:501px){
  #sftdef .gs-copy:has(details[open]){max-height:calc(100dvh - var(--hdr) - 105px);overflow-y:auto;align-content:start!important;justify-content:flex-start;padding-right:12px;scrollbar-width:thin;scrollbar-color:#a58e57 transparent}
  #books .books-stage{display:grid!important;grid-template-rows:auto minmax(0,1fr);align-content:stretch;gap:24px;height:100%!important;padding:22px var(--gutter) 32px!important;overflow-y:auto}
  #books .books-intro{position:relative!important;inset:auto!important;max-width:none!important;width:100%;margin:0!important;gap:12px;grid-column:1;grid-row:1}
  #books .books-intro h2{font-size:clamp(26px,2.6vw,44px)!important;line-height:1.18}
  #books .books-intro h2 br{display:none}
  #books .books-intro .body-copy{font-size:clamp(14px,1.2vw,19px)!important;line-height:1.6;max-width:72ch!important}
  #books .text-action{padding:3px 0;min-height:32px}
  #books .book-set{position:relative!important;inset:auto!important;grid-column:1;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(22px,3vw,56px)!important;padding:0!important;align-self:center;margin:0!important;width:100%;max-width:none!important;justify-content:stretch!important}
  #books .book-card{min-width:0;justify-self:stretch}
  #books .book-cover{height:auto!important;width:clamp(90px,calc((100dvh - 410px)*.666),520px)!important;max-width:100%;aspect-ratio:309/464!important;margin:0 auto 12px;background-size:100% 100%!important}
  #books .book-set--published .book-cover{aspect-ratio:229/338!important}
  #books .book-card h3{font-size:clamp(14px,1.1vw,20px)!important;line-height:1.4}
  #books .book-card p{font-size:clamp(12px,.95vw,16px)!important;line-height:1.5}
  #books .book-card>span{font-size:11px;letter-spacing:.05em}
  #books .published-title{display:none!important}
  #books.books-mode-upcoming .books-intro--pub,#books.books-mode-upcoming .book-set--published,
  #books.books-mode-published .books-intro:not(.books-intro--pub),#books.books-mode-published .book-set--upcoming{display:none!important}
  #books.books-mode-published .books-intro--pub,#books.books-mode-published .book-set--published{opacity:1!important;transform:none!important;pointer-events:auto!important}
}
@media(min-width:761px) and (min-height:501px) and (max-width:1500px){
  #driver .gs-labels{display:none!important}
  html[lang=en] #driver .gs-copy{max-width:47vw!important}
  html[lang=en] #driver .gs-quotes li{font-size:clamp(17px,1.65vw,23px)!important;line-height:1.6!important}
  html[lang=en] #driver h2{font-size:clamp(28px,2.7vw,40px)!important;line-height:1.2!important}
}
@media(min-width:761px) and (min-height:501px) and (max-height:900px){  /* 2026-09-12 반응형 점검: 820→900 (1536×864 노트북에서 면허 마지막 문장·소개 이력 03이 막대에 가림) */
  #research .steward-inner{overflow-y:auto;align-items:start!important;align-content:start!important;padding:24px var(--gutter) 32px!important}
  #research .steward-body{align-self:start;align-content:start;gap:14px}
  #research .steward-body .body-copy{font-size:16px!important;line-height:1.8!important}
  #research .steward-body h2{font-size:30px!important;margin:0 0 8px!important}
  #research .steward-facts{font-size:14px!important;margin-top:20px!important}
  #research .steward-facts li{padding-block:12px!important}
  #license .gs-inner.one-col{padding:calc(var(--hdr) + 20px) var(--gutter) 32px!important;align-content:start!important;overflow-y:auto!important;row-gap:14px!important}
  #license .lic-head .gs-pre,#license .lic-head h2{margin-bottom:14px!important}
  #license .lic-head h2{font-size:34px!important}
  #license .lic-grid,#license .lic-band,#license .lic-foot{margin-top:8px!important}
  #license .lic-grid p{font-size:14px!important;line-height:1.55!important}
  #license .lic-band,#license .lic-foot{font-size:17px!important;line-height:1.5!important}
}
@media(max-width:760px),(max-height:500px){
  .intro-language{left:14px;top:14px;gap:6px}
  .opening-skip{right:14px!important;top:14px!important;min-width:90px}
  body.mode-flow .hdr{padding-inline:12px!important}
  body.mode-flow .hdr-actions{gap:6px}
  body.mode-flow .lang-switch :is(button,a){min-width:32px;min-height:44px;font-size:12px}
  body.mode-flow .header-cta{font-size:11px!important;min-height:40px!important;padding-inline:8px!important}
  body.mode-flow .institute-brand strong{font-size:13px}
  html[lang=en] body.mode-flow .institute-brand strong{font-size:11px;max-width:105px;line-height:1.25;white-space:normal}
  body.mode-flow .gold-scene .gs-inner{min-height:85svh!important;padding:64px 22px clamp(195px,30svh,260px)!important}
  body.mode-flow .story-scene>.scene-pin{min-height:0!important}
  body.mode-flow #era>.scene-pin,body.mode-flow #top>.scene-pin{min-height:88svh!important}
  body.mode-flow .gs-copy h2,body.mode-flow #sftdef h2,body.mode-flow .steward-body h2{font-size:28px!important;line-height:1.35!important;word-break:keep-all;overflow-wrap:anywhere}
  body.mode-flow #prepare .gs-sub:first-child{font-size:28px!important;line-height:1.35!important}
  body.mode-flow .gs-copy p,body.mode-flow .gs-quotes li,body.mode-flow .gs-list li,body.mode-flow .def-qs li{font-size:16px!important;line-height:1.8!important}
  body.mode-flow .gs-inner.one-col{padding-bottom:58px!important}
  body.mode-flow .lic-grid h3{font-size:19px!important}
  body.mode-flow .lic-grid p,body.mode-flow .steward-bio,body.mode-flow .steward-facts{font-size:15px!important;line-height:1.8!important}
  body.mode-flow #research .steward-inner{padding-top:64px!important}
  body.mode-flow .books-stage{padding-top:64px!important}
  body.mode-flow .books-intro h2{font-size:28px!important;line-height:1.35}
  body.mode-flow .books-intro .body-copy{font-size:15px!important;line-height:1.8!important}
  body.mode-flow .book-card h3{font-size:14px!important;line-height:1.45!important}
  body.mode-flow .book-set{align-items:start!important}
  body.mode-flow .book-card p{font-size:12px!important;line-height:1.65!important}
  body.mode-flow .book-card>span{font-size:12px!important;letter-spacing:.02em}  /* 2026-09-12 반응형 점검: 10→12px */
  body.mode-flow .concept-detail{margin-top:24px}
  body.mode-flow .concept-detail p,body.mode-flow .research-status{font-size:15px!important;line-height:1.8!important}
  body.mode-flow .closing-cta{min-height:72svh!important}
  body.mode-flow .cta-sub{font-size:16px!important;line-height:1.8!important}
  body.mode-flow .foot-inner{padding-bottom:100px!important}
  body.mode-flow .foot-main p,body.mode-flow .foot-main small,body.mode-flow .foot-coming span{font-size:12px!important;line-height:1.7!important}
  body.mode-flow .story-scene,body.mode-flow .books-intro{scroll-margin-top:64px}
}

/* 2026-09-11 선생님 검수 반영: 브랜드 로고(황금 우로보로스) + 이름 확대.
   - 이름 글꼴은 기존 헤더 글꼴(Noto Serif KR 600) 그대로.
   - 링이 이름의 첫 단어(노미 / NOMI)를 감싸고, 오른쪽 띠가 첫 단어 뒤 공백을 지나간다.
     링을 글자보다 위 층에 두어 이름이 링 중앙에서 시작해 띠 뒤로 관통하는 모양이 된다.
   - 링 지름 = 첫 단어 폭 + 0.8em (이미지 여백 3% 보정). 띠가 다음 글자를 가리지 않도록 공백을 0.2em 넓힌다.
   - 영어 'NOMI'는 '노미'보다 1.5배 넓어 링이 헤더(68px)를 넘지 않도록 글자를 한 단계 작게 한다.
   - 작은 영문 부제는 링을 가로질러 겹치므로 헤더에서만 숨긴다(푸터에는 그대로). */
.hdr .institute-brand{display:flex!important;align-items:center;gap:0}
.hdr .institute-brand small{display:none!important}
.hdr .institute-brand strong{position:relative;isolation:isolate;font-size:23px!important;line-height:1.1;letter-spacing:-.02em;white-space:nowrap;padding-left:.42em}
.hdr .institute-brand .bn1{position:relative;display:inline-block;margin-right:.2em}
.hdr .institute-brand .bn1::before{content:"";position:absolute;left:50%;top:50%;width:calc((100% + .8em) * 1.03);aspect-ratio:1;transform:translate(-50%,-50%);background:url(assets/brand-ouroboros.webp) center/contain no-repeat;z-index:2;pointer-events:none}
html[lang=en] .hdr .institute-brand strong{font-size:16px!important}
html[lang=en] .hdr .institute-brand .bn1{margin-right:.32em}
html[lang=en] .hdr .institute-brand .bn1::before{width:calc((100% + 1.1em) * 1.03)}
@media(max-width:1180px){
  .hdr .institute-brand strong{font-size:20px!important}
  html[lang=en] .hdr .institute-brand strong{font-size:14px!important}
}
@media(max-width:760px),(max-height:500px){
  body.mode-flow .hdr .institute-brand strong{font-size:16px!important;max-width:none}
  html[lang=en] body.mode-flow .hdr .institute-brand strong{display:flex;align-items:center;font-size:11.5px!important;line-height:1.2;white-space:normal;max-width:150px}
  html[lang=en] body.mode-flow .hdr .institute-brand .bn1{margin-right:.85em}  /* 두 줄 배치에선 공백이 사라지므로 띠 자리를 직접 확보 */
}

/* 2026-09-11 선생님 검수 반영: 영문 화면의 출간 준비 4권을 영문 표지로 교체(한국어 화면은 그대로).
   기출간 4권의 영문 표지는 2026-09-15 제공본으로 아래에서 별도 적용한다. */
html[lang=en] .book-cover--u1{background-image:url(assets/cover-en-u1.webp)!important}
html[lang=en] .book-cover--u2{background-image:url(assets/cover-en-u2-20261002.webp)!important}
html[lang=en] .book-cover--u3{background-image:url(assets/cover-en-u3.webp)!important}
html[lang=en] .book-cover--u4{background-image:url(assets/cover-en-u4.webp)!important}
/* 책 설명 줄 수가 달라도 표지 윗선이 맞도록 카드를 위 기준으로 정렬(기본값은 아래 기준) */
@media(min-width:761px) and (min-height:501px){#books .book-set{align-items:start!important}}

/* 2026-09-12 반응형 점검: 아이패드 세로(768×1024) 등 폭 761~900px 장면 모드에서
   최명희 소개 장면이 화면보다 길어 제목이 헤더 밑에 숨고 이력 03이 잘리던 것.
   높이 820 이하 규칙과 같은 방식으로 위 정렬 + 내부 스크롤 + 글자 축소. */
@media(min-width:761px) and (min-height:501px) and (max-width:900px){
  #research .steward-inner{overflow-y:auto;align-items:start!important;align-content:start!important;padding:24px var(--gutter) 32px!important}
  #research .steward-body{align-self:start;align-content:start;gap:14px}
  #research .steward-body .body-copy{font-size:16px!important;line-height:1.75!important}
  #research .steward-body h2{font-size:28px!important;margin:0 0 8px!important}
  #research .steward-facts{font-size:14px!important;margin-top:16px!important}
  #research .steward-facts li{padding-block:10px!important}
  #research .trust-steward::before,#research.is-phase-2 .trust-steward::before{filter:brightness(.5) saturate(.85)!important}  /* 세로 태블릿: 글 뒤 그림을 어둡게 해 가독성 확보 */
  /* 같은 폭에서 04 마음 운전면허 마지막 문장이 하단 막대에 가려짐 → 위 정렬·내부 스크롤 */
  #license .gs-inner.one-col{padding:calc(var(--hdr) + 20px) var(--gutter) 32px!important;align-content:start!important;overflow-y:auto!important;row-gap:14px!important}
  #license .lic-head .gs-pre,#license .lic-head h2{margin-bottom:14px!important}
  #license .lic-grid,#license .lic-band,#license .lic-foot{margin-top:8px!important}
  #license .lic-head h2{font-size:34px!important}
  #license .lic-grid p{font-size:14px!important;line-height:1.55!important}
  #license .lic-band,#license .lic-foot{font-size:17px!important;line-height:1.5!important}
  #license .gs-visual.sm{height:min(9vh,80px)!important}  /* 세로 태블릿은 머리 그림과 글이 위아래로 쌓여 그림을 줄임 */
  #license .lic-head{row-gap:12px!important}
}

/* 2026-09-13 헤더 내비게이터: 폭 1080 이하(가운데 메뉴가 숨는 구간)와 세로 스크롤 모드의 열 구성 */
@media(max-width:1080px){
  .hdr{grid-template-columns:minmax(0,1fr) auto auto}
  .hdr-center{grid-column:2;justify-self:end;margin-right:clamp(10px,2vw,24px)}
  .hdr-actions{grid-column:3}
}
body.mode-flow .hdr{grid-template-columns:minmax(0,1fr) auto!important}
body.mode-flow .hdr-center{display:none!important}
body.mode-flow .motion-toggle{width:28px;height:28px}
body.mode-flow .hdr-actions{grid-column:2;gap:8px}
/* 2026-09-16 P1: 작은 화면에서는 로고와 조작 영역을 두 행으로 분리한다. */
@media(max-width:560px){
  body.mode-flow{--hdr:96px}
  body.mode-flow .hdr{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:40px 44px;gap:0;padding-block:6px;overflow:clip}
  body.mode-flow .hdr .institute-brand{grid-column:1;grid-row:1}
  body.mode-flow .hdr .hdr-actions{grid-column:1;grid-row:2;justify-self:stretch;justify-content:space-between;gap:4px}
}

/* 2026-09-13 8차: 터치 기기에서는 hover 들뜸 효과가 고착되므로 끔 */
@media(hover:none){
  .book-card:hover .book-cover{transform:none!important;box-shadow:0 18px 54px rgba(0,0,0,.42)!important}
  .book-card:hover .book-cover--u3,.book-card:hover .book-cover--u4{box-shadow:0 0 0 14px #2c313b,0 18px 54px rgba(0,0,0,.42)!important}
}
/* 모션 축소 설정: 문의 창 등장·닫힘도 바로 */
@media(prefers-reduced-motion:reduce){.modal,.modal-box,.modal.is-closing{animation-duration:1ms!important}}

/* 2026-09-13 10차: 푸터 오른쪽 '지금 준비 중' 박스 삭제 → 한 열 */
.foot-inner{grid-template-columns:minmax(0,1fr)!important}

/* 2026-09-14 12차: 09 소개 장면 소개문이 선생님 원문(3문단)으로 길어져, 높이 901px 이상에서도 위 정렬 + 내부 스크롤 + 본문 16px */
@media(min-width:761px) and (min-height:901px){
  #research .steward-inner{overflow-y:auto;align-items:start!important;align-content:start!important;padding:28px var(--gutter) 40px!important}
  #research .steward-body{align-self:start;align-content:start;gap:16px}
  #research .steward-body .body-copy{font-size:clamp(16px,.9vw,18px)!important;line-height:1.8!important}
  #research .steward-body h2{font-size:clamp(30px,1.9vw,36px)!important;margin:0 0 8px!important}
  #research .steward-facts{font-size:14px!important;margin-top:20px!important}
  #research .steward-facts li{padding-block:12px!important}
}

/* 2026-09-14 12차: 10 출간 준비 장면 '책 소개 전문 보기' (선생님 원문, D-119) */
#books .book-detail{margin-top:8px;max-width:72ch}
#books .book-detail p{max-width:none;font-size:15px;line-height:1.75}
#books .book-detail .bk-list{padding-left:2px}
@media(min-width:761px) and (min-height:501px){
  #books .books-intro{gap:8px}
  /* 장면 모드: 펼치면 표지 위에 떠 있는 패널로(높이가 고정된 무대라 아래로 밀 수 없음). 다시 누르면 닫힘 */
  #books .book-detail{position:relative;z-index:20}
  #books .book-detail[open] > div{isolation:isolate}
  #books .book-detail[open] > div{position:absolute;left:0;right:-40px;top:calc(100% + 8px);max-height:min(52dvh,520px);overflow-y:auto;padding:18px 22px;background:rgba(8,11,16,.97);border:1px solid rgba(228,196,123,.35);border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.55);scrollbar-width:thin;scrollbar-color:#a58e57 transparent}
}
body.mode-flow #books .book-detail[open] > div{position:static;max-height:none;padding:0;background:none;border:0;box-shadow:none}

/* 2026-09-15 13차: 문의 창 '프로그램 사전신청' 항목은 보이되 선택 불가 (D-126) */
.purpose.is-disabled,.purpose:disabled{opacity:.48;cursor:not-allowed;background:transparent!important;border-color:rgba(255,255,255,.14)!important;transform:none!important}
.purpose.is-disabled b{font-weight:400}

/* 2026-09-15 13차 보강: D-131 모바일 영어 로고 — 페이지 글꼴 700은 폭이 넓어 2줄이 되므로 살짝 줄임 */
@media(max-width:760px){
  :lang(en) .hdr .institute-brand strong{font-size:11px;letter-spacing:-.02em}
  /* D-129 Korean/English 표기가 KO/EN보다 길어 360px 폭에서 로고와 겹치던 것 */
  body.mode-flow .lang-switch{letter-spacing:.02em;gap:2px}
  body.mode-flow .lang-switch :is(button,a){font-size:11px;min-width:0;padding-inline:3px}
  body.mode-flow .hdr-actions{gap:4px}
}
@media(max-width:400px){
  body.mode-flow .lang-switch :is(button,a){font-size:10px}
  html[lang=en] body.mode-flow .institute-brand strong{font-size:10px;max-width:96px}
}

/* 2026-09-15 15차: 헤더 글자 키움 (사용자 지시, 브런치 헤더 글 2번 항목: 12~13px → 14~15px) */
@media(min-width:761px) and (min-height:501px){
  .hdr .site-nav{font-size:clamp(14px,.9vw,15px)!important;gap:clamp(20px,1.9vw,36px)}
  .hdr .lang-switch{letter-spacing:.05em}
  .hdr .lang-switch :is(button,a){font-size:13px}
  .hdr .header-cta{font-size:clamp(13px,.8vw,14px)!important;min-height:42px!important;padding-inline:22px!important}
  .hdr .scene-pos-num{font-size:13px}
}
@media(max-width:760px),(max-height:500px){
  body.mode-flow .header-cta{font-size:12px!important}
  body.mode-flow .lang-switch :is(button,a){font-size:12px}
}

/* 2026-09-15 16차 (Q-054, 사용자 지시 2판): 내비게이터 강조 효과 없음. 첫 장면 '아래로 넘기기'는 평소 투명, 마우스가 움직일 때만 반투명으로 잠깐 보임 */
.scene-cue{position:absolute;left:50%;bottom:clamp(22px,5svh,44px);z-index:6;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:0;background:none;color:#e4c47b;font:500 13px/1 "Noto Sans KR","DM Sans",sans-serif;letter-spacing:.06em;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .45s ease}
html.nomi-first-scene body:not(.intro-open) .scene-cue.is-awake{opacity:.7;pointer-events:auto}
html.nomi-first-scene body:not(.intro-open) .scene-cue.is-awake:hover{opacity:.9}
.scene-cue i{display:grid;animation:nomiCueBob 1.8s ease-in-out infinite}
@keyframes nomiCueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
body.mode-flow .scene-cue{bottom:18px;font-size:12px}
@media(prefers-reduced-motion:reduce){.scene-cue i{animation:none!important}}

/* 2026-09-15 16차 3판: '아래로 넘기기'를 부제 아래로, 오른쪽 맨 아래 '맨 위로' 버튼 */
#era .era-copy{position:relative}
/* 부제 자리는 그대로 두고(레이아웃에 영향 없음), 그 아래 떨어진 곳에 겹쳐 놓는다 */
#era .era-copy .scene-cue{position:absolute;left:0;right:auto;top:100%;bottom:auto;transform:none;display:inline-flex;margin-top:clamp(64px,13svh,120px);padding:6px 0;letter-spacing:.08em} /* 사용자 지시 09-15: 더 아래로 */
/* 마우스 아이콘 (아크메르동탄.kr 첫 화면 참고): 24x38 둥근 테두리, 5px 점이 위 20%에서 70%로 내려가며 사라지고(1.2초) 0.5초 쉬었다 반복 */
.scene-cue{gap:10px;color:#f0eee8}
.scene-cue .cue-mouse{position:relative;width:24px;height:38px;border:1px solid currentColor;border-radius:2rem;box-sizing:border-box;box-shadow:0 0 4px rgba(0,0,0,.3),inset 0 0 4px rgba(0,0,0,.3);animation:none}
.scene-cue .cue-mouse span{position:absolute;left:0;right:0;top:20%;width:5px;height:5px;margin:auto;border-radius:50%;background:currentColor;box-shadow:0 0 4px rgba(0,0,0,.3);animation:nomiWheel 1.7s linear infinite}
@keyframes nomiWheel{0%{top:20%;opacity:1}70%{top:70%;opacity:0}70.1%{top:20%;opacity:1}100%{top:20%;opacity:1}}
.scene-cue .cue-chev{display:none}
.scene-cue [data-cue-text]{font-size:11px;line-height:1.12;font-weight:300;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 0 4px rgba(0,0,0,.6),0 0 4px rgba(0,0,0,.3)}
body.mode-flow .scene-cue .cue-mouse{display:none}
body.mode-flow .scene-cue .cue-chev{display:grid}
body.mode-flow .scene-cue [data-cue-text]{text-transform:none;letter-spacing:.06em;font-size:12px;font-weight:400}
@media(prefers-reduced-motion:reduce){.scene-cue .cue-mouse span{animation:none!important}}
.to-top{position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,3svh,28px);z-index:55;width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid rgba(228,196,123,.45);border-radius:999px;background:rgba(6,9,13,.55);backdrop-filter:blur(6px);color:#e4c47b;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .35s ease,transform .35s var(--ease-out),background .3s ease}
.to-top.is-visible{opacity:.72;pointer-events:auto;transform:none}
.to-top:hover{opacity:1;background:rgba(202,164,75,.22)}
.to-top:focus-visible{outline:2px solid #e4c47b;outline-offset:2px;opacity:1}
body.mode-flow .to-top{width:40px;height:40px;right:14px;bottom:14px}


/* 2026-09-15 19차: 장면별 등장 움직임 (시안 3 상세설계). 시작은 장면 전환과 겹치지 않게 0.25초 뒤. 기준 상태(17차) 위에 얹는 층.
   원칙: 장면당 제목 하나 + 내용 하나. 0.5~0.9초, 간격 0.08~0.12초. 같은 방식을 연속 장면에 쓰지 않음.
   기존 첫 방문 전용(:not(.is-seen)) 연출은 그대로 두되, 아래 규칙이 나중에 선언되어 매번 장면에 들어올 때 다시 재생된다.
   휴대폰(mode-flow)과 모션 축소 설정, 움직임 멈춤 버튼에서는 적용하지 않는다. */
@keyframes nomi19Up{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes nomi19Down{from{opacity:0;transform:translate3d(0,-14px,0)}to{opacity:1;transform:none}}
@keyframes nomi19Left{from{opacity:0;transform:translate3d(-26px,0,0)}to{opacity:1;transform:none}}
@keyframes nomi19Right{from{opacity:0;transform:translate3d(26px,0,0)}to{opacity:1;transform:none}}
@keyframes nomi19Focus{from{opacity:0;transform:scale(.965);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes nomi19Fade{from{opacity:0}to{opacity:1}}
@keyframes nomi19Glow{0%{opacity:.35}100%{opacity:1}}
@keyframes nomi19Card{from{opacity:0;transform:translate3d(0,22px,0) scale(.985);clip-path:inset(0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@media(prefers-reduced-motion:no-preference){
  /* 02 마음의 운전자: 제목 왼쪽에서, 인용문 4줄 위→아래 순차 */
  body:not(.mode-flow) #main #driver.is-active .gs-copy>h2{animation:nomi19Left .7s .25s var(--nomi-scene-ease,cubic-bezier(.16,1,.3,1)) both!important}
  body:not(.mode-flow) #main #driver.is-active .gs-copy>.gs-quotes{animation:none!important;opacity:1!important}
  body:not(.mode-flow) #main #driver.is-active .gs-quotes>li{animation:nomi19Up .6s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #driver.is-active .gs-quotes>li:nth-child(1){animation-delay:0.60s!important}
  body:not(.mode-flow) #main #driver.is-active .gs-quotes>li:nth-child(2){animation-delay:0.72s!important}
  body:not(.mode-flow) #main #driver.is-active .gs-quotes>li:nth-child(3){animation-delay:0.84s!important}
  body:not(.mode-flow) #main #driver.is-active .gs-quotes>li:nth-child(4){animation-delay:0.96s!important}
  /* 03 마음도 배워야 합니다: 포커스(흐림→또렷) */
  body:not(.mode-flow) #main #top.is-active:not(.intro-open) .hero-copy>h1{animation:nomi19Focus .9s .25s cubic-bezier(.16,1,.3,1) both!important}
  /* 04 제4의식: 큰 제목 먼저, 문단 차례로, 금색 '제4의식'만 늦게 밝아짐 */
  body:not(.mode-flow) #main #prepare.is-active .gs-copy>*{animation:nomi19Up .7s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #prepare.is-active .gs-copy>:nth-child(1){animation-delay:0.25s!important}
  body:not(.mode-flow) #main #prepare.is-active .gs-copy>:nth-child(2){animation-delay:0.43s!important}
  body:not(.mode-flow) #main #prepare.is-active .gs-copy>:nth-child(3){animation-delay:0.53s!important}
  body:not(.mode-flow) #main #prepare.is-active .gs-copy>:nth-child(4){animation-delay:0.65s!important}
  body:not(.mode-flow) #main #prepare.is-active .gs-copy>:nth-child(5){animation-delay:0.77s!important}
  body:not(.mode-flow) #main #prepare.is-active .gs-sub em{display:inline-block;animation:nomi19Glow .8s 0.80s ease-out both}
  /* 05 마음 운전면허: 제목 위에서, 힘 4개 왼쪽부터 가로 순차, 결론은 마지막 */
  body:not(.mode-flow) #main #license.is-active .lic-head>div:first-child>*{animation:nomi19Down .6s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #license.is-active .lic-head>div:first-child>:nth-child(2){animation-delay:0.33s!important}
  body:not(.mode-flow) #main #license.is-active .lic-head>div:first-child>:nth-child(3){animation-delay:0.43s!important}
  body:not(.mode-flow) #main #license.is-active .lic-grid>li{animation:nomi19Up .6s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #license.is-active .lic-grid>li:nth-child(1){animation-delay:0.59s!important}
  body:not(.mode-flow) #main #license.is-active .lic-grid>li:nth-child(2){animation-delay:0.69s!important}
  body:not(.mode-flow) #main #license.is-active .lic-grid>li:nth-child(3){animation-delay:0.79s!important}
  body:not(.mode-flow) #main #license.is-active .lic-grid>li:nth-child(4){animation-delay:0.89s!important}
  body:not(.mode-flow) #main #license.is-active .lic-grid>li::before{animation:none!important;opacity:1!important}
  body:not(.mode-flow) #main #license.is-active .lic-band{animation:nomi19Fade .6s 1.15s ease-out both!important}
  body:not(.mode-flow) #main #license.is-active .lic-band,body:not(.mode-flow) #main #sftdef.is-active .gs-copy>.kicker,body:not(.mode-flow) #main #sftdef.is-active .gs-copy>details{transform:none!important} /* 페이드만 하는 요소: 원본의 숨김 위치 이동을 풀어 겹침 방지 */
  body:not(.mode-flow) #main #license.is-active .lic-foot>*{animation:nomi19Up .7s 1.30s cubic-bezier(.16,1,.3,1) both!important}
  /* 06 SFT 소개: 질문 3개 차례로 → SFT 문장은 아래에서 */
  body:not(.mode-flow) #main #sftdef.is-active .gs-copy>.def-qs{animation:none!important;opacity:1!important}
  body:not(.mode-flow) #main #sftdef.is-active .def-qs>li{animation:nomi19Up .65s .25s cubic-bezier(.16,1,.3,1) both!important;opacity:0}
  body:not(.mode-flow) #main #sftdef.is-active .def-qs>li:nth-child(1){animation-delay:0.30s!important}
  body:not(.mode-flow) #main #sftdef.is-active .def-qs>li:nth-child(2){animation-delay:0.42s!important}
  body:not(.mode-flow) #main #sftdef.is-active .def-qs>li:nth-child(3){animation-delay:0.54s!important}
  body:not(.mode-flow) #main #sftdef.is-active .gs-copy>h2{animation:nomi19Up .8s 0.87s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #sftdef.is-active .gs-copy>.kicker,body:not(.mode-flow) #main #sftdef.is-active .gs-copy>details{animation:nomi19Fade .6s 1.20s ease-out both!important}
  /* 07 부모의 고민: 글이 오른쪽이라 오른쪽에서, 인용 2줄 순차, 결론은 늦게 */
  body:not(.mode-flow) #main #parent.is-active .gs-copy>*{animation:nomi19Right .65s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #parent.is-active .gs-copy>.gs-quotes{animation:nomi19Right .65s 0.47s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #parent.is-active .gs-quotes>li{animation:none!important}
  body:not(.mode-flow) #main #parent.is-active .gs-copy>:nth-child(3){animation-delay:0.73s!important}
  body:not(.mode-flow) #main #parent.is-active .gs-copy>:nth-child(4){animation-delay:0.83s!important}
  body:not(.mode-flow) #main #parent.is-active .gs-copy>:nth-child(5){animation-delay:0.97s!important}
  body:not(.mode-flow) #main #parent.is-active .gs-copy>:nth-child(6){animation-delay:1.09s!important}
  /* 08 게임 SFT: 제목 한 줄, 항목 위→아래 순차, 결론 늦게 */
  body:not(.mode-flow) #main #edu.is-active .gs-copy>*{animation:nomi19Up .65s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #edu.is-active .gs-copy>:nth-child(2){animation-delay:0.39s!important}
  body:not(.mode-flow) #main #edu.is-active .gs-copy>.gs-list{animation:none!important;opacity:1!important}
  body:not(.mode-flow) #main #edu.is-active .gs-list>li{animation:nomi19Up .55s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #edu.is-active .gs-list>li:nth-child(1){animation-delay:0.55s!important}
  body:not(.mode-flow) #main #edu.is-active .gs-list>li:nth-child(2){animation-delay:0.65s!important}
  body:not(.mode-flow) #main #edu.is-active .gs-list>li:nth-child(3){animation-delay:0.75s!important}
  body:not(.mode-flow) #main #edu.is-active .gs-copy>:nth-child(4){animation-delay:0.93s!important}
  body:not(.mode-flow) #main #edu.is-active .gs-copy>:nth-child(5){animation-delay:1.05s!important}
  /* 09 최명희 소개: 인용 제목 포커스, 이름 → 본문 → 경력 항목 차례로 */
  body:not(.mode-flow) #main #research.is-phase-2 .steward-body>*{animation:nomi19Up .7s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #research.is-phase-2 .steward-body>h2{animation:nomi19Focus .9s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #research.is-phase-2 .steward-body>:nth-child(2){animation-delay:0.50s!important}
  body:not(.mode-flow) #main #research.is-phase-2 .steward-body>:nth-child(3){animation-delay:0.65s!important}
  body:not(.mode-flow) #main #research.is-phase-2 .steward-body>.steward-facts{animation:none!important;opacity:1!important}
  body:not(.mode-flow) #main #research.is-phase-2 .steward-facts>li{animation:nomi19Up .6s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #research.is-phase-2 .steward-facts>li:nth-child(1){animation-delay:0.87s!important}
  body:not(.mode-flow) #main #research.is-phase-2 .steward-facts>li:nth-child(2){animation-delay:0.97s!important}
  body:not(.mode-flow) #main #research.is-phase-2 .steward-facts>li:nth-child(3){animation-delay:1.07s!important}
  body:not(.mode-flow) #main #research.is-phase-2 .steward-facts li .n{animation:none!important;opacity:1!important}
  /* 10 출간 준비: 제목·소개 먼저, 표지 4장 왼쪽부터 */
  body:not(.mode-flow) #main #books.is-active .books-intro>*{animation:nomi19Up .65s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #books.is-active .books-intro>:nth-child(2){animation-delay:0.37s!important}
  body:not(.mode-flow) #main #books.is-active .books-intro>:nth-child(3){animation-delay:0.47s!important}
  body:not(.mode-flow) #main #books.is-active .books-intro>:nth-child(4){animation-delay:0.55s!important}
  body:not(.mode-flow) #main #books.is-active:not(.books-mode-published) .book-set--upcoming .book-card{animation:nomi19Card .7s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #books.is-active:not(.books-mode-published) .book-set--upcoming .book-card:nth-of-type(1){animation-delay:0.55s!important}
  body:not(.mode-flow) #main #books.is-active:not(.books-mode-published) .book-set--upcoming .book-card:nth-of-type(2){animation-delay:0.67s!important}
  body:not(.mode-flow) #main #books.is-active:not(.books-mode-published) .book-set--upcoming .book-card:nth-of-type(3){animation-delay:0.79s!important}
  body:not(.mode-flow) #main #books.is-active:not(.books-mode-published) .book-set--upcoming .book-card:nth-of-type(4){animation-delay:0.91s!important}
  /* 11 기출간 도서: 표지 4장 왼쪽부터 (사용자 지시 09-15: 10과 같게) */
  body:not(.mode-flow) #main #books.books-mode-published .book-set--published .book-card{animation:nomi19Card .7s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #books.books-mode-published .book-set--published .book-card:nth-of-type(1){animation-delay:0.55s!important}
  body:not(.mode-flow) #main #books.books-mode-published .book-set--published .book-card:nth-of-type(2){animation-delay:0.67s!important}
  body:not(.mode-flow) #main #books.books-mode-published .book-set--published .book-card:nth-of-type(3){animation-delay:0.79s!important}
  body:not(.mode-flow) #main #books.books-mode-published .book-set--published .book-card:nth-of-type(4){animation-delay:0.91s!important}
  /* 원본은 글과 카드를 clip-path로 가려 두고 첫 방문 애니메이션이 풀어 준다. 19차 애니메이션이 대신 재생되므로 가림을 여기서 푼다 */
  body:not(.mode-flow) #main #books .book-set .book-card,
  body:not(.mode-flow) #main .gold-scene.is-active .gs-copy>*,body:not(.mode-flow) #main .gold-scene.is-active .gs-quotes>li,body:not(.mode-flow) #main .gold-scene.is-active .gs-list>li,
  body:not(.mode-flow) #main #sftdef.is-active .def-qs>li,body:not(.mode-flow) #main #license.is-active .lic-head>div:first-child>*,body:not(.mode-flow) #main #license.is-active .lic-grid>li,
  body:not(.mode-flow) #main #license.is-active .lic-band,body:not(.mode-flow) #main #license.is-active .lic-foot>*,body:not(.mode-flow) #main #research.is-phase-2 .steward-body>*,
  body:not(.mode-flow) #main #research.is-phase-2 .steward-facts>li,body:not(.mode-flow) #main #books.is-active .books-intro>*,body:not(.mode-flow) #main #contact.is-phase-2 .cta-inner>*,
  body:not(.mode-flow) #main #top.is-active .hero-copy>h1{clip-path:none!important;filter:none!important}
  /* 12 문의: 제목 포커스, 버튼은 0.5초 뒤 (기존 2.15초 지연을 대체) */
  body:not(.mode-flow) #main #contact.is-phase-2 .closing-cta .cta-inner>h2{animation:nomi19Focus .9s .25s cubic-bezier(.16,1,.3,1) both!important}
  body:not(.mode-flow) #main #contact.is-phase-2 .closing-cta .cta-inner>.pill{animation:nomi19Up .6s .75s cubic-bezier(.16,1,.3,1) both!important}
}
/* 2026-09-16 P1: 움직임 멈춤은 nomi-motion-stop 레이어의 중요 선언으로 우선 적용한다. */

/* 사용자 선택 A안: 헤더 버튼 자간과 좌우 여백만 조정. */
.hdr .hdr-actions .header-cta{letter-spacing:0}
@media(min-width:561px){.hdr .hdr-actions .header-cta{padding-inline:18px!important}}

/* 2026-09-15: 사용자 제공 영문 기출간 표지. 한국어 표지는 기존 이미지 유지. */
/* [5-03] 적용3(2026-10-04): 같은 그림을 크기 그대로 WebP 품질 90으로 바꾼 권장안(4장 6.83MB → 581KB)으로 연결. 원본 PNG는 지우지 않음. 화질(품질 90)은 사용자 답(10-04)으로 허용. 무손실판 -lossless.webp 도 지우지 않음 */
html[lang=en] .book-cover--p1{background-image:url(assets/cover-en-p1-20261004.webp)!important}
html[lang=en] .book-cover--p2{background-image:url(assets/cover-en-p2-20261004.webp)!important}
html[lang=en] .book-cover--p3{background-image:url(assets/cover-en-p3-20261004.webp)!important}
html[lang=en] .book-cover--p4{background-image:url(assets/cover-en-p4-20261004.webp)!important}
html[lang=en] .book-set--published .book-cover{background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}
html[lang=en] .book-set--published .bdesc{display:block}

/* 2026-09-16: 선생님 선택 9번. 소문자 활자, 금색 o, 문구와 입장 버튼 한 줄. */
.opening--nine{background:#080a0b;color:#f6f4ee;outline:none}
body.mode-flow.intro-open,html.mode-flow-root:has(body.intro-open .opening--nine){height:100%!important;overflow:hidden!important}
.opening--nine::before{background:#080a0b!important}
.opening--nine::after{display:none}
.opening--nine .opening-institute{
  position:absolute;z-index:4;left:clamp(24px,3.3vw,64px);top:32px;
  margin:0;font-size:16px;font-weight:500;line-height:44px;letter-spacing:0;
  color:#f6f4ee;
}
.opening--nine .intro-language{left:auto;right:clamp(24px,3.3vw,64px);top:32px;gap:24px}
.opening--nine .intro-language button{
  min-width:0;padding:0;background:none;border:0;border-radius:0;
  color:#a9a79e!important;font-size:16px!important;font-weight:500;opacity:1!important;text-decoration:none;
}
.opening--nine .intro-language button[aria-pressed=true]{color:#f6f4ee!important;border:0}
.opening--nine .intro-language button:hover{color:#f6f4ee!important}
.opening--nine .intro-language button::after{display:none}
.opening--nine .opening-stage{
  width:min(1300px,63vw);display:block;text-align:left;transform:none;
}
.opening--nine .opening-art{
  width:100%;aspect-ratio:auto;height:auto;opacity:1;transform:none;
}
.opening--nine:not(.is-transitioning) .opening-art{animation:none}
.opening--nine .opening-reveal-word--type2{
  position:relative;inset:auto;justify-content:flex-start;align-items:baseline;
  font-size:clamp(100px,16.6vw,342px);line-height:1;letter-spacing:-.045em;
  font-weight:300;color:#f6f4ee;
}
.opening--nine .opening-reveal-word--type2 > span{color:#f6f4ee;text-shadow:none}
.opening--nine .opening-kn,.opening--nine .opening-w{margin:0;letter-spacing:inherit;font-weight:300}
.opening--nine .opening-o{
  width:auto;height:auto;margin:0;flex:none;line-height:inherit;
  font-weight:300;letter-spacing:inherit;color:#d2a83e!important;
}
.opening--nine .opening-me{margin-left:.06em;font-weight:700;letter-spacing:-.05em}
.opening--nine .opening-entry-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:32px;margin-top:28px;padding-left:.5%;
}
.opening--nine .opening-korean{
  flex:1;margin:0;max-width:34em;opacity:1;transform:none;
  font-family:"Noto Sans KR",sans-serif;font-size:clamp(16px,1.55vw,26px);
  font-weight:400;line-height:1.65;letter-spacing:-.025em;word-break:keep-all;color:#f6f4ee;
}
.opening--nine .opening-enter{
  flex:none;display:flex;gap:12px;min-width:0;min-height:44px;
  margin:0;padding:0;border:0;border-radius:0;background:none;
  opacity:1;transform:none;overflow:visible;color:#f6f4ee;
}
.opening--nine .opening-enter::before{display:none}
.opening--nine .opening-enter-text b{
  color:inherit;font-size:clamp(16px,1.4vw,24px);font-weight:500;letter-spacing:-.025em;
}
.opening--nine .opening-enter-arrow{
  display:block;align-self:center;border:0;font-family:"DM Sans",sans-serif;
  font-size:1.5em;line-height:1;font-weight:400;transform:none;
}
.opening--nine .opening-enter:hover,.opening--nine .opening-enter:focus-visible{color:#d2a83e;transform:none}
.opening--nine .opening-enter:hover .opening-enter-text b,
.opening--nine .opening-enter:focus-visible .opening-enter-text b{color:inherit}
.opening--nine .opening-enter:hover .opening-enter-arrow{transform:translateX(3px)}
.opening--nine.is-transitioning .opening-entry-row{opacity:0;transition:opacity .28s ease}
html[lang=en] .opening--nine .opening-korean{font-family:"DM Sans",sans-serif;letter-spacing:0;max-width:30em}
@media(max-width:1100px){
  .opening--nine .opening-stage{width:78vw}
  .opening--nine .opening-reveal-word--type2{font-size:20.5vw}
  .opening--nine .opening-entry-row{margin-top:32px;gap:24px}
}
@media(max-width:600px){
  .opening--nine .opening-institute{left:24px;top:20px;font-size:13px}
  .opening--nine .intro-language{right:24px;top:20px;gap:16px}
  .opening--nine .intro-language button{font-size:13px!important}
  .opening--nine .opening-stage{width:calc(100% - 48px)}
  .opening--nine .opening-reveal-word--type2{font-size:22.1vw}
  .opening--nine .opening-entry-row{display:flex;flex-direction:column;gap:24px;margin-top:28px;padding:0}
  .opening--nine .opening-korean{max-width:21em;font-size:16px;line-height:1.8;letter-spacing:-.025em}
  .opening--nine .opening-enter{align-self:flex-end;min-height:44px}
  .opening--nine .opening-enter-text b{font-size:16px}
  html[lang=en] .opening--nine .opening-institute{max-width:140px;line-height:1.4;top:29px;font-size:12px}
}
@media(max-height:500px) and (min-width:601px){
  .opening--nine .opening-institute,.opening--nine .intro-language{top:12px}
  .opening--nine .opening-stage{width:66vw;margin-top:36px}
  .opening--nine .opening-reveal-word--type2{font-size:16vw}
  .opening--nine .opening-entry-row{margin-top:12px}
}

/* ==========================================================================
   [초안] 적용1 (2026-10-04): 체크리스트 항목을 시안 A(걸림 없는 무대, 10-02 밤 재검수본)에서 옮김.
   [ ] 안 번호 = 홈페이지_업그레이드_시안_2026-10-02/05_체크리스트/체크리스트_데이터.json 항목 번호.
   규칙 순서는 시안 A에서 검수한 순서 그대로. 이름 앞 sian-은 시안 A의 이름을 그대로 둔 것
   (나중에 다른 시안 코드를 옮길 때 맞추기 쉽게). 짝이 되는 계산은 v27-upgrade.js 끝 '적용1' 묶음.
   ========================================================================== */

/* [1-02] 넘길 때 회색 판 없애기: 그림 뒤 바탕을 그림의 검정과 같은 색으로.
   장면 넘김(PC, 태블릿)에서만 쓴다(휴대폰 세로 스크롤 모드는 지금 색 그대로).
   [6-06] 넘김 모양은 사용자 선택 6-06 = A(지금 닦기 모양 그대로 한 번). 검수수정(10-04)에서 시안 A의 '닦기 한 번' 규칙을 옮겼다(아래 [6-06] 줄). */
body:not(.mode-flow) .gs-prepare .scene-pin{background:#000}
body:not(.mode-flow) .gs-driver .scene-pin{background:#020404}
body:not(.mode-flow) .gs-license .scene-pin{background:#020202}
body:not(.mode-flow) .gs-edu .scene-pin{background:#020202}
body:not(.mode-flow) .gs-parent .scene-pin{background:#050607}
body:not(.mode-flow) .gs-def .scene-pin{background:#020202}
body:not(.mode-flow) #top .hero-pin{background:#050505}
/* [6-06] 검수수정(10-04): 시안 A '닦기 한 번'. 그림은 장면과 함께 한 번에 들어오고(따로 1.34초, 06은 1.8초 다시 열리지 않음),
   들어오는 장면은 지금처럼 0.64초 감속, 나가는 장면은 0.48초 그대로 두고 가속 곡선만. 시안 A sian-css 그대로(10-02 밤 재검수본) */
body:not(.mode-flow) #contact>.scene-pin{background:#070c12}   /* 노란 면 아래(푸터 자리)가 푸터가 올라오는 동안 흰 판으로 비치지 않게 푸터 색 */
body:not(.mode-flow) .gold-scene:not(#sftdef) .scene-pin::before,
body:not(.mode-flow) #main .gs-parent.is-active .scene-pin::before,
body:not(.mode-flow) .trust-steward::before,
body:not(.mode-flow) #research.is-phase-2 .trust-steward::before{
  animation:none!important;opacity:1!important;clip-path:none!important;transform:none!important}
body:not(.mode-flow) #sftdef .sftdef-motion img{animation:none!important;opacity:1!important;clip-path:none!important}
body:not(.mode-flow) #sftdef .scene-pin::after{transition:none!important;opacity:1!important}
/* [6-06] 09 소개 판과 11 노란 면도 장면과 함께 한 번에(따로 0.8~1초 다시 열리지 않음) */
body:not(.mode-flow) .trust .trust-steward,
body:not(.mode-flow) .closing .closing-process,
body:not(.mode-flow) .closing .closing-cta{transition:none!important}
body:not(.mode-flow) .story-scene.is-leaving-next,
body:not(.mode-flow) .story-scene.is-leaving-prev{animation-timing-function:cubic-bezier(.55,.06,.68,.19)!important}

/* [1-02] 10 책 안 출간 준비 ↔ 기출간: 빈 화면 없이 넘긴다.
   표지 그림끼리만 0.3초 겹쳐 바뀌고, 글(제목, 소개, 링크, 표지 아래 글)은 나가는 쪽이 0.12초 안에 먼저 사라진 뒤
   들어오는 쪽이 0.15초부터 시작한다(나가는 묶음 사진은 v27-upgrade.js 끝 적용1 5)가 만든다). 표지가 왼쪽부터 차례로 나오는 순서는 그대로. */
@keyframes sianGhostOut{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-8px,0)}}
@keyframes sianGhostTxt{from{opacity:1}to{opacity:0}}
@media (min-width:761px) and (min-height:501px){
  body:not(.mode-flow) #books .books-stage{position:relative;z-index:1}
  body:not(.mode-flow) #books .sian-books-ghost{position:absolute;inset:0;z-index:0;pointer-events:none;
    animation:sianGhostOut .3s cubic-bezier(.55,.06,.68,.19) both}
  body:not(.mode-flow) #main #books.is-books-switch .books-intro>*{animation-delay:.15s!important}
  body:not(.mode-flow) #main #books.is-books-switch .books-intro>:nth-child(2){animation-delay:.2s!important}
  body:not(.mode-flow) #main #books.is-books-switch .books-intro>:nth-child(3){animation-delay:.25s!important}
  body:not(.mode-flow) #main #books.is-books-switch .books-intro>:nth-child(4){animation-delay:.29s!important}
  body:not(.mode-flow) #main #books.is-books-switch .book-set .book-card:nth-of-type(1){animation-delay:.15s!important}
  body:not(.mode-flow) #main #books.is-books-switch .book-set .book-card:nth-of-type(2){animation-delay:.22s!important}
  body:not(.mode-flow) #main #books.is-books-switch .book-set .book-card:nth-of-type(3){animation-delay:.29s!important}
  body:not(.mode-flow) #main #books.is-books-switch .book-set .book-card:nth-of-type(4){animation-delay:.36s!important}
  /* [1-02] 마지막 수정(10-09, 사용자 답 '고치기'): 기출간 → 출간 준비로 뒤로 넘길 때도 들어오는 표지가 앞으로 넘길 때처럼 .15초부터 차례로 시작한다.
     위 '10 출간 준비' 첫 방문 규칙(:not(.books-mode-published), .55초부터)이 바로 위 넘김 규칙보다 구체적이어서 이겨,
     나가는 표지가 .3초에 다 사라진 뒤 약 .27초 표지가 비었다. 같은 값을 더 구체적인 선택자로 다시 적는다.
     is-books-switch는 움직임 켬일 때만 붙는다(v27-upgrade.js 적용1 5). 동작 줄이기와 움직임 멈춤은 바뀌지 않는다 */
  body:not(.mode-flow) #main #books.is-active.is-books-switch:not(.books-mode-published) .book-set--upcoming .book-card:nth-of-type(1){animation-delay:.15s!important}
  body:not(.mode-flow) #main #books.is-active.is-books-switch:not(.books-mode-published) .book-set--upcoming .book-card:nth-of-type(2){animation-delay:.22s!important}
  body:not(.mode-flow) #main #books.is-active.is-books-switch:not(.books-mode-published) .book-set--upcoming .book-card:nth-of-type(3){animation-delay:.29s!important}
  body:not(.mode-flow) #main #books.is-active.is-books-switch:not(.books-mode-published) .book-set--upcoming .book-card:nth-of-type(4){animation-delay:.36s!important}
}

/* [1-06] 오른쪽 장면 점 둘레 비우기: 점 앞 약 64px를 비움 구역으로. 그림 가장자리는 이 구역에서 서서히 사라지고,
   오른쪽까지 오던 글 칸(05, 07)과 10 표지는 그 앞에서 멈춘다. 이름표가 64px보다 길면(영어 등) 그 길이만큼 넓힌다
   (--dots-label-w, 장면마다 JS가 잼). 현재 장면 이름표는 지금처럼 늘 보이고, 뒤에 장면 바탕색 작은 판만 깐다. */
@media (min-width:1081px) and (min-height:501px){
  :root{--dots-r:clamp(10px,1.1vw,22px);--dots-col:calc(var(--dots-r) + 24px);
        --dots-zone:calc(var(--dots-col) + 64px)}
  #books{--dots-zone-l:calc(var(--dots-col) + max(64px,var(--dots-label-w,0px) + 16px))}
  /* 07은 이름표가 본문 마지막 줄과 같은 높이라 16px 더 떼어 문장 끝 꼬리표처럼 읽히지 않게 */
  #parent{--dots-zone-l:calc(var(--dots-col) + max(64px,var(--dots-label-w,0px) + 32px))}
  body:not(.mode-flow) .gold-scene .scene-pin::before,
  body:not(.mode-flow) .trust-steward::before{
    -webkit-mask-image:linear-gradient(to left,transparent calc(var(--mask-off,0px) + var(--dots-col) - 4px),#000 calc(var(--mask-off,0px) + var(--dots-col) + 64px));
            mask-image:linear-gradient(to left,transparent calc(var(--mask-off,0px) + var(--dots-col) - 4px),#000 calc(var(--mask-off,0px) + var(--dots-col) + 64px))}
  body:not(.mode-flow) #sftdef .sftdef-motion{
    -webkit-mask-image:linear-gradient(to left,transparent calc(var(--dots-col) - 4px),#000 calc(var(--dots-col) + 64px));
            mask-image:linear-gradient(to left,transparent calc(var(--dots-col) - 4px),#000 calc(var(--dots-col) + 64px))}
  /* 03 영상: 완전히 지우는 폭은 점 바깥 여백만, 흐려지는 구간은 점 열 앞 약 190px까지 길고 부드럽게(검은 세로 띠가 생기지 않게) */
  body:not(.mode-flow) #top .hero-media{
    -webkit-mask-image:linear-gradient(to left,transparent 0,transparent calc(var(--dots-r) - 2px),rgba(0,0,0,.14) var(--dots-col),rgba(0,0,0,.4) calc(var(--dots-col) + 50px),rgba(0,0,0,.72) calc(var(--dots-col) + 110px),rgba(0,0,0,.92) calc(var(--dots-col) + 160px),#000 calc(var(--dots-col) + 190px));
            mask-image:linear-gradient(to left,transparent 0,transparent calc(var(--dots-r) - 2px),rgba(0,0,0,.14) var(--dots-col),rgba(0,0,0,.4) calc(var(--dots-col) + 50px),rgba(0,0,0,.72) calc(var(--dots-col) + 110px),rgba(0,0,0,.92) calc(var(--dots-col) + 160px),#000 calc(var(--dots-col) + 190px))}
  /* 05는 이름표 높이에 글이 없어 64px, 07(오른쪽 글 단)과 10(표지)은 이름표가 글, 표지와 같은 높이라 이름표 길이까지 비운다 */
  body:not(.mode-flow) #license .gs-inner.one-col{padding-right:max(var(--gutter),var(--dots-zone))!important}
  body:not(.mode-flow) #parent .gs-inner{padding-right:max(var(--gutter),var(--dots-zone-l))!important}
  body:not(.mode-flow) #books .books-stage{padding-right:max(var(--gutter),var(--dots-zone-l))!important}
  /* 이름표 판: 글자 자리는 그대로(오른쪽 30px), 판 여백만큼 위치 보정 */
  .scene-dots button::after{right:22px;padding:3px 8px;border-radius:3px;line-height:1.35;
    background:var(--dot-plate,rgba(4,5,7,.9));box-shadow:0 0 0 1px rgba(255,255,255,.04)}
  body[data-scene="books-upcoming"] .scene-dots,body[data-scene="books-published"] .scene-dots{--dot-plate:rgba(11,16,23,.94)}
  body[data-scene="contact"] .scene-dots{--dot-plate:#f0df00}
  body[data-scene="contact"] .scene-dots button::after{box-shadow:none}
}
@media (hover:hover) and (min-width:1081px){body:not(.mode-flow) .gold-scene .scene-pin::before{--mask-off:16px}}

/* [1-07] 01 AI 시대: 비활성 점이 사진에 묻히지 않게 다른 어두운 장면과 같은 밝은 점 + 얇은 어두운 테(사진은 그대로) */
body[data-scene="era"] .scene-dots{color:#efece4}
body[data-scene="era"] .scene-dots button:not([aria-current="true"])::before{box-shadow:0 0 0 1.5px rgba(3,9,20,.55)}
/* [1-07] 01의 장면 이름표 「이 시대의 질문」은 지금처럼 둔다(점만 밝게). 시안 A는 점을 밝히면서 이름표와 어두운 판도
   새로 보이게 했는데, 이것은 사용자가 따로 고르지 않아 옮기지 않았다(사용자 답 10-04: 보류, 넣지 않음). 지금 글자색 그대로, 판 없음. */
body[data-scene="era"] .scene-dots button::after{color:#22231f;background:none;box-shadow:none}

/* [2-01] 휴대폰 01: 글 상자가 화면 폭 + 22px로 오른쪽이 넘치던 것 → 좌우 22px 여백 안(영어 부제 잘림 없어짐) */
@media (max-width:760px),(max-height:500px){
  body.mode-flow #era .era-copy{left:0;right:auto;width:auto;margin-inline:22px}
  /* 한국어 부제는 글 상자 오른쪽 끝을 화면 끝까지만(넘치지는 않게) 두어, 폭 375 이상 휴대폰에서 지금처럼 한 줄 */
  html:not([lang=en]) body.mode-flow #era .era-copy{margin-right:0}
}
/* [2-01] 한 줄이 안 되는 좁은 휴대폰(폭 370 이하)은 기관명이 갈라지지 않게 줄표(—) 앞에서 줄을 바꾼다. 글자는 그대로 */
@media (max-width:370px){
  html:not([lang=en]) body.mode-flow #era .era-sub .sep::before{content:"\A";white-space:pre}
  html:not([lang=en]) body.mode-flow #era .era-sub .sep{margin-left:0}
}
/* [1-07] PC: 01 글 시작선을 다른 장면과 같은 선(--gutter)으로(선생님 승인 화면: 전후 사진을 선생님께 보여 드림) */
@media (min-width:761px) and (min-height:501px){
  body:not(.mode-flow) #era .era-copy{left:var(--gutter)}
}
/* [1-03] ④ 키보드 초점이 평소 투명한 '아래로 내리기' 안내에 들어오면 반투명으로 보이게(평소 투명은 그대로) */
html.nomi-first-scene body:not(.intro-open) .scene-cue:focus-visible{opacity:.7;pointer-events:auto}

/* [1-09] 03: 「소리 켜기」와 「맨 위로」 사이 12px 이상(헤더에 소리 단추는 넣지 않음) */
#top .hero-tools{right:max(var(--gutter),calc(clamp(16px,2vw,28px) + 42px + 12px))}
body.mode-flow #top .hero-tools{right:max(var(--gutter),calc(14px + 40px + 12px))}

/* [1-10] 04 둘째 제목 「인간은 무엇을 준비해야 하는가」의 8px 들여쓰기 없애기 */
.gs-prepare #prepTitle{margin-left:0}
/* [1-08] 05: 네 카드 설명 윗선을 맞춘다(2줄 카드에서 설명이 아래로 처지던 것) */
.gold-scene .lic-grid li{align-content:start}
@media (min-width:1081px){
  /* [1-08] 05: 그림 선 끝점이 본문 오른쪽 끝 + 32px 밖에 오도록 그림만 오른쪽으로(--lic-shift, JS가 잼) */
  body:not(.mode-flow) .gs-license .scene-pin::before{
    background-position:calc(50% + var(--lic-shift,0px) + var(--par-x,0px)) calc(50% + 48px + var(--par-y,0px))!important}
}
@media (min-width:1081px) and (min-height:501px) and (max-height:900px){
  /* [1-08] 05: 내용이 위에 몰리고 아래 4분의 1이 비던 것 → 남는 세로 여백을 위아래로 나눔 */
  body:not(.mode-flow) #license .gs-inner.one-col{align-content:safe center!important;padding-top:clamp(20px,3.6vh,40px)!important;padding-bottom:clamp(20px,3.6vh,40px)!important}
}
/* [1-08] 05: 마지막 두 줄을 위로 끌어올리던 이동(-4.5vh, 09-12 '살짝 위로')이 움직임을 켠 상태에서만 위 띠 글과 겹치던 것.
   덩어리를 화면 가운데에 두었으므로 이동을 없애 두 상태를 같게 한다 */
body:not(.mode-flow) #license .lic-foot{transform:none!important}
/* [1-08] 05 그림 상자 바탕을 그림의 검정과 같게(그림을 오른쪽으로 민 만큼 드러나는 왼쪽 가장자리에 사각 테두리가 보이지 않게) */
.gs-license .scene-pin::before{background-color:#020202!important}
/* [3-02] 영어 02, 07: 글 단 폭만 그림 금색 선 앞까지. 그림은 화면을 덮는(cover) 크기라 그 크기에서 선 위치를 계산한다 */
@media (min-width:1081px) and (min-height:501px){
  :root{--art-drawn:max(calc(100vw + 32px),calc((100dvh - var(--hdr) + 32px) * 1.7778))}
  html[lang=en] body:not(.mode-flow) #driver .gs-copy{
    max-width:min(47vw,62ch,calc(50vw - var(--art-drawn) * .059375 - 40px - var(--gutter)))!important}
  html[lang=en] body:not(.mode-flow) #parent .gs-copy{
    max-width:min(62ch,calc(100vw - max(var(--gutter),var(--dots-zone-l)) - 50vw - var(--art-drawn) * .04245 - 40px))!important}
  /* 영어 07에 한 단어짜리 줄이 생기지 않게 마지막 줄을 고르게(문구 그대로, 줄바꿈 위치만. 지원하지 않는 브라우저는 지금처럼) */
  html[lang=en] body:not(.mode-flow) #parent .gs-copy :is(h2,p,li){text-wrap:pretty}
}

/* [1-05] 09 최명희 소개: 원문, 구도, 글자 크기, 줄바꿈 그대로. 글 단을 읽는 판으로 — 회색 기본 막대 대신 얇은 금색 막대가 글 단 바로 옆에,
   아래에 글이 더 있으면 아래쪽을 살짝 흐리게(끝에 닿으면 흐림 없음). 글이 넘치는 크기에서만 제목을 헤더에서 떼고 문단 사이를 10px로.
   ([1-04] 09 글을 끝까지 읽은 뒤 넘어가기는 index.html 입력 처리와 이 읽는 판이 함께 만든다) */
@media (min-width:761px) and (min-height:501px){
  body:not(.mode-flow) #research .steward-inner{overflow:hidden!important;grid-template-rows:minmax(0,1fr)!important;
    align-content:stretch!important}
  /* 글이 한 화면에 다 들어가는 크기(예: 한국어 1920x1080)는 위아래 여백, 문단 간격, 위치를 지금 그대로(sian-fit, JS가 잼) */
  /* scrollbar-gutter: 글이 넘칠 때 바깥 상자에 생기던 기본 막대 자리를 그대로 남겨 글 단 폭과 줄바꿈을 지금과 똑같이 */
  body:not(.mode-flow) #research:not(.sian-fit) .steward-inner{padding-top:clamp(28px,4vh,36px)!important;padding-bottom:12px!important;scrollbar-gutter:stable}
  /* 막대는 글 단 오른쪽 끝 바로 밖 6~9px(그림 패널 앞)에. 오른쪽으로 9px 내밀고 6px 안쪽 여백 + 3px 막대 = 글 폭 그대로 */
  body:not(.mode-flow) #research .steward-body{min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;
    align-self:start;padding-right:6px;margin-right:-9px}
  body:not(.mode-flow) #research.sian-fit .steward-body{padding-right:0;margin-right:0}
  /* 문단 사이 빈 줄(한 줄 높이 약 29px)만 10px로. 글자, 글자 크기, 줄 간격, 줄바꿈, 문단 순서는 그대로 */
  body:not(.mode-flow) #research .steward-body .body-copy .sian-pgap{display:block;height:1lh}
  body:not(.mode-flow) #research .steward-body.sian-tight .body-copy .sian-pgap{height:10px}
  body:not(.mode-flow) #research .steward-body::-webkit-scrollbar{width:3px}
  body:not(.mode-flow) #research .steward-body::-webkit-scrollbar-track{background:transparent}
  body:not(.mode-flow) #research .steward-body::-webkit-scrollbar-thumb{background:transparent;border-radius:3px}
  /* 손잡이는 글이 나타난 뒤(sian-bar-on, JS)에만 옅게. 넘김 중 금색 세로선이 글보다 먼저 보이지 않게 */
  body:not(.mode-flow) #research .steward-body.sian-bar-on::-webkit-scrollbar-thumb{background:rgba(201,164,88,.32)}
  body:not(.mode-flow) #research .steward-body::-webkit-scrollbar-button{display:none;height:0}
  @supports not selector(::-webkit-scrollbar){body:not(.mode-flow) #research .steward-body{scrollbar-width:thin;scrollbar-color:rgba(201,164,88,.32) transparent}}
  /* 세로 태블릿 폭(761~900)은 그림이 글 뒤에 깔려 막대가 동심원 위를 가른다 → 막대는 숨기고 아래쪽 흐림만으로 '더 있음' */
  @media (max-width:900px){
    body:not(.mode-flow) #research .steward-body.sian-bar-on::-webkit-scrollbar-thumb{background:transparent}
    @supports not selector(::-webkit-scrollbar){body:not(.mode-flow) #research .steward-body{scrollbar-width:none}}
  }
  /* 낮은 화면에서 안쪽 스크롤이 생기는 05, 10 글 상자도 회색 기본 막대 대신 같은 얇은 금색 막대 */
  body:not(.mode-flow) #license .gs-inner.one-col::-webkit-scrollbar,body:not(.mode-flow) #books .books-stage::-webkit-scrollbar{width:3px}
  body:not(.mode-flow) #license .gs-inner.one-col::-webkit-scrollbar-track,body:not(.mode-flow) #books .books-stage::-webkit-scrollbar-track{background:rgba(226,196,128,.08)}
  body:not(.mode-flow) #license .gs-inner.one-col::-webkit-scrollbar-thumb,body:not(.mode-flow) #books .books-stage::-webkit-scrollbar-thumb{background:rgba(201,164,88,.7);border-radius:3px}
  body:not(.mode-flow) #license .gs-inner.one-col::-webkit-scrollbar-button,body:not(.mode-flow) #books .books-stage::-webkit-scrollbar-button{display:none;height:0}
  body:not(.mode-flow) #research .steward-body.sian-more{
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),rgba(0,0,0,.3) 100%);
            mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),rgba(0,0,0,.3) 100%)}
}
/* [2-04] 가로 태블릿 폭(901~1080): 09 그림 빛 중심을 오른쪽으로(PC와 같은 오른쪽 배치) → 글 뒤 밝은 선을 피함.
   세로 태블릿 05, 07은 지금 배치 그대로(두 장면만 구도를 바꾸는 방법은 폐기 항목과 겹쳐 쓰지 않음) */
@media (min-width:901px) and (max-width:1080px) and (min-height:501px){
  body:not(.mode-flow) .trust-steward::before{background-size:57% auto!important;background-position:right center!important;mix-blend-mode:screen}
}
/* [1-10] 09 직함 줄 「노미 심리연구소 대표, 불교상담학 박사」 한글 자간 0 */
:lang(ko) #research .steward-name span{letter-spacing:0}

/* [2-02] 휴대폰 10 책: '책으로 이어 읽기' 등으로 이동한 뒤 제목이 2줄 헤더에 가리던 것 → 이동 여백 = 헤더 높이 + 8px */
body.mode-flow .books-intro{scroll-margin-top:calc(var(--hdr) + 8px)}
/* [4-06] 10 책: 3, 4번 회색 매트(D-042)는 그대로. 매트 14px만큼 좁아 보이던 간격을 고르게: 2, 3번 카드를 14px 왼쪽으로 */
@media (min-width:761px) and (min-height:501px){
  body:not(.mode-flow) #books .book-set--upcoming .book-card:nth-of-type(2),
  body:not(.mode-flow) #books .book-set--upcoming .book-card:nth-of-type(3){translate:-14px 0}
}

/* [4-08] 11 문의 푸터: 높이를 내용에 맞추고(최소는 지금 높이) 노란 면은 푸터 실제 높이(--foot-real, JS)만큼 위에서 끝난다 */
@media (min-width:761px) and (min-height:501px){
  body:not(.mode-flow) .foot{height:auto!important;min-height:var(--foot-h)}
  body:not(.mode-flow) .foot-inner{height:auto!important;min-height:var(--foot-h);align-content:center}
  body:not(.mode-flow) .closing .closing-process,
  body:not(.mode-flow) .closing .closing-cta{inset:0 0 var(--foot-real,var(--foot-h)) 0!important}
  /* 푸터 정돈: 왼쪽 시작선에 맞춘 2칸 — 왼쪽 연구소명, 오른쪽 대표와 사업자등록번호, 이메일, 개인정보처리방침. 저작권 줄은 아래 */
  body:not(.mode-flow) .foot-main{grid-template-columns:minmax(0,1fr) repeat(3,max-content);column-gap:clamp(20px,3vw,56px);row-gap:0;align-items:start}
  body:not(.mode-flow) .foot-main>.foot-brand{grid-column:1;grid-row:1;margin-bottom:0}
  body:not(.mode-flow) .foot-main>p{grid-row:1;margin:0}
  body:not(.mode-flow) .foot-main>.foot-rule,
  body:not(.mode-flow) .foot-main>small{grid-column:1/-1}
  /* 구분선이 '맨 위로' 버튼 앞 12px에서 끝나게(세로 태블릿에서 선 끝이 버튼 원 안으로 들어가던 것). 넓은 화면은 그대로 */
  body:not(.mode-flow) .foot-main>.foot-rule{margin-right:max(0px,calc(clamp(16px,2vw,28px) + 42px + 12px - var(--gutter)))}
}
/* [2-03] 문의 창: 머리말 대비(어두운 배경용 색, 영문 그대로), 입력칸 이름 12px 이상, 예시 글자 4.5:1 이상. 문구 그대로 */
.modal .kicker{color:#a9a79e}
.modal .field>span{font-size:max(12px,var(--t-xs))}
.modal .field ::placeholder{color:#9b9990;opacity:1}

/* [1-10] 작은 점의 레몬 노랑 → 같은 장면의 금색(#e2c480). 크기와 빛 번짐 양은 그대로 (05 카드 점, 08 목록 점) */
.gold-scene .lic-grid li::before{background:#e2c480;box-shadow:0 0 10px rgba(226,196,128,.5)}
.gold-scene .gs-list li::before{background:#e2c480;box-shadow:0 0 12px rgba(226,196,128,.55)}
/* [1-09] 03 「소리 켜기」 알약 안 점도 금색 */
.sound .dot{background:#e2c480}
/* [2-03] 세로 태블릿, 작은 노트북(폭 1180 이하 장면 모드): 11px 글자 세 곳 → 12px(본문 확대 아님) */
@media (min-width:761px) and (max-width:1180px) and (min-height:501px){
  body:not(.mode-flow) .foot-main p,body:not(.mode-flow) .foot-main small{font-size:12px!important}
  body:not(.mode-flow) #books .book-card>span{font-size:12px}
  body:not(.mode-flow) .scene-cue [data-cue-text]{font-size:12px}
}
/* [2-03] 손가락으로 누르는 영역 44px(보이는 크기는 그대로, 투명한 누름 영역만 넓힘) */
.scene-nav-btn,.motion-toggle,.hdr .lang-switch :is(a,button),#books .text-action,.foot-main a,.back-purpose{position:relative}
.scene-nav-btn::after{content:"";position:absolute;inset:-6px -1px}
.motion-toggle::after{content:"";position:absolute;inset:-6px}
body.mode-flow .motion-toggle::after{inset:-8px}
.hdr .lang-switch :is(a,button)::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:44px;translate:0 -50%}
#books .text-action::after,.foot-main a::after,.back-purpose::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;translate:0 -50%}
/* ===== 적용1 끝 ===== */
/* ==========================================================================
   [초안] 적용2 (2026-10-04): 10 책 장면(4-01~4-05)과 휴대폰 장면 그림 먼저(2-06).
   [ ] 안 번호 = 홈페이지_업그레이드_시안_2026-10-02/05_체크리스트/체크리스트_데이터.json 항목 번호.
   근거: 4-02~4-05는 시안 B(머무는 빛) 10 books 규칙에서, 2-06은 시안 D(장면마다 한 컷)의 휴대폰 규칙에서 옮김.
   시안 B의 '첫 책 1.4배 큰 칸', '후속 3권 들림 없앰'은 옮기지 않았다(4-01 바뀐 지시). 시안 D의 PC 구도, 넘김, 머무는 동안 밀림(6-05)도 옮기지 않았다.
   짝이 되는 계산은 v27-upgrade.js 끝 '적용2' 묶음. 이름 앞 sian-은 시안의 이름을 그대로 둔 것.
   ========================================================================== */

/* [4-04] 10 책 바탕: 남색(#0d131b) → 다른 장면과 같은 검정 가족(#050607). 금빛 번짐은 같은 양 그대로,
   푸른 번짐만 같은 밝기의 중립색으로(시안 B). 푸른 회색 글자 → 같은 밝기의 상아 보조색. 펼친 책 소개 판, 장면 점 이름표 판도 검정으로 */
.books>.scene-pin{background:
  radial-gradient(ellipse 70% 55% at 62% 78%,rgba(202,164,75,.13),transparent 70%),
  radial-gradient(ellipse 60% 40% at 18% 12%,rgba(138,134,124,.09),transparent 70%),
  #050607!important}
.books-intro .body-copy{color:#cbc8bf!important}
.book-card p,.book-card .bdesc{color:#bdbab1!important}
body[data-scene="books-upcoming"] .scene-dots,body[data-scene="books-published"] .scene-dots{--dot-plate:rgba(5,6,7,.92)!important}
@media (min-width:761px) and (min-height:501px){
  #books .book-detail[open] > div{background:rgba(6,7,8,.97)}
}

/* [4-05] 10 책 소개 글 한 줄 약 36자(글자 크기 그대로, 시안 B). 펼친 책 소개 전문 판 안 글도 같은 폭(판 크기는 그대로).
   『책 이름』과 바로 붙은 조사가 줄 첫머리로 떨어지지 않게 한 덩어리로 묶는다(글자는 그대로, JS가 span만 씌움).
   PC와 태블릿은 『…』+조사 전체, 휴대폰은 마지막 낱말+』+조사만(좁은 화면에서 긴 책 이름이 넘치지 않게) */
#main #books .books-intro .body-copy{max-width:36em!important}
body:not(.mode-flow) #books .sian-nobr,#books .sian-nobr-end{white-space:nowrap}
#main #books .book-detail>div>p{max-width:36em}

/* [4-02] 「출간 소식 받기」: 모양(금색 글자, 밑줄) 그대로, 자리만 첫 책 상태 줄 「국제판 출간」 바로 오른쪽으로(시안 B).
   첫 책 칸 안에 다 들어가지 않으면(영어, 좁은 화면) 상태 줄 바로 아래, 휴대폰은 늘 상태 줄 바로 아래.
   글의 순서(문서 순서, 키보드 순서)는 바꾸지 않고 보이는 자리만 옮긴다. 자리는 JS가 화면마다 잰다(--bk-btn-x, --bk-btn-y) */
#books .book-set--upcoming .book-card:first-of-type>span{width:fit-content;margin-bottom:var(--bk-cta-reserve,0px)}
#books.sian-news-ready .books-intro:not(.books-intro--pub) [data-v27-news]{position:absolute!important;left:var(--bk-btn-x,0px);top:var(--bk-btn-y,0px);margin:0!important;z-index:3;white-space:nowrap}

/* [4-03] 첫 표지를 누르면(키보드 Enter, Space도) 책 소개 전문이 열린다(시안 B). 표지 이름과 역할은 JS가 붙인다.
   시안 B의 '반응 없는 후속 3권은 들리지 않게'는 4-01(모든 표지 커짐)과 겹쳐 하지 않는다 */
#books .book-cover--u1[role="button"]{cursor:pointer}
#books .book-cover--u1[role="button"]:focus-visible{outline:2px solid #e4c47b;outline-offset:6px}
body.mode-flow #books .book-detail>summary{scroll-margin-top:calc(var(--hdr) + 12px)}   /* 휴대폰: 첫 표지를 눌러 책 소개로 갈 때 2줄 헤더에 가리지 않게 */

/* [4-01] 바뀐 지시: 첫 책만 크게 하지 않고, 모든 표지(출간 준비 4권, 기출간 4권)가 마우스를 올리면 커진다.
   금빛 테두리 빛은 그대로, 크기 1.025배 → 1.07배. 0.26초에 부드럽게. 커진 만큼 위 소개 글에 닿지 않게 들림은 위로 14px → 8px.
   마우스가 없는 기기(hover:none)는 지금처럼 움직이지 않는다(v27.css 8차 규칙 그대로).
   움직임 멈춤 단추를 누른 상태는 nomi-motion-stop 층이 전환을 없애 바로 바뀌고, 기기의 '동작 줄이기'도 전환 없이 바로.
   키보드 초점이 가는 첫 표지(4-03)는 초점을 받을 때도 같은 모양 */
/* 폭 1080 이하(세로 태블릿 크기 창)는 표지 사이가 9~18px로 좁아 1.04배(커진 표지가 옆 표지에 닿지 않게) */
@media (max-width:1080px){#books{--bk-hover-scale:1.04}}
@media (hover:hover){
  #books .book-cover{transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s ease!important}
  #books .book-card:hover .book-cover{transform:translateY(-8px) scale(var(--bk-hover-scale,1.07))!important}
}
#books .book-cover--u1[role="button"]:focus-visible{transform:translateY(-8px) scale(var(--bk-hover-scale,1.07))!important;
  box-shadow:0 34px 70px rgba(0,0,0,.55),0 0 0 1px rgba(226,196,128,.35),0 0 40px rgba(226,196,128,.18)!important}
@media (prefers-reduced-motion:reduce){#books .book-cover{transition:none!important}}
/* [4-01][4-05] 책 묶음이 무대 높이보다 클 때(낮은 노트북, 영어 등) 가운데 맞춤 때문에 위로 넘쳐 소개 글 위에 겹치던 것 →
   넘칠 때만 위쪽에 맞추고 나머지는 지금처럼 책 무대 안에서 스크롤(원본 v27 방식). 넘치지 않으면 지금과 같은 가운데 */
@media (min-width:761px) and (min-height:501px){body:not(.mode-flow) #books .book-set{align-self:safe center}}
/* [4-02][4-05] 그래도 넘치면 넘친 만큼만 표지 폭을 줄인다(지금 크기의 80%까지, 값은 JS fitCovers가 화면마다 잼). 넘치지 않는 화면은 지금 그대로 */
@media (min-width:761px) and (min-height:501px){
  body:not(.mode-flow) #books .book-set--upcoming .book-cover{max-width:min(100%,var(--bk-fit-up,100%))}
  body:not(.mode-flow) #books .book-set--published .book-cover{max-width:min(100%,var(--bk-fit-pub,100%))}
}

/* [2-06] 휴대폰(세로 스크롤 모드)에서만: 장면마다 그림 한 장(세로 포스터)이 헤더 바로 아래에서 먼저 나오고 그 아래에 글(시안 D의 휴대폰 규칙).
   PC와 태블릿(장면 넘김 모드)은 .d-shot을 그리지 않고 그림 파일도 받지 않는다(지금 그대로).
   포스터의 자르기(시안 D 구도표 M)는 v27-upgrade.js 끝 '적용2'가 시안 D와 같은 계산으로 넣는다.
   01 era와 10 책, 11 문의는 그대로. 03 top은 영상 칸을 세로 포스터로 자른다.
   시안 D의 '머무는 동안 천천히 밀려 들어감'(6-05 카메라 다가옴, 고르지 않음)은 넣지 않았다.
   글 칸 뒤 바탕은 지금 휴대폰 색 그대로 두었다(시안 D는 검정. 사용자 답 10-04: 그대로) */
body:not(.mode-flow) .d-shot{display:none!important}
.d-shot{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--shot-bg,#020303);contain:strict}
.d-shot-img{position:absolute;left:0;top:0;display:block;max-width:none;max-height:none;margin:0;user-select:none}
.d-shot-img:not([src]){visibility:hidden}
body.mode-flow .d-shot-img[data-fade]{
  -webkit-mask-image:linear-gradient(to right,transparent 0,transparent var(--fl0,0%),#000 var(--fl,0%),#000 calc(100% - var(--fr,0%)),transparent calc(100% - var(--fr0,0%)),transparent 100%),
                     linear-gradient(to bottom,transparent 0,transparent var(--ft0,0%),#000 var(--ft,0%),#000 calc(100% - var(--fb,0%)),transparent calc(100% - var(--fb0,0%)),transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent 0,transparent var(--fl0,0%),#000 var(--fl,0%),#000 calc(100% - var(--fr,0%)),transparent calc(100% - var(--fr0,0%)),transparent 100%),
                     linear-gradient(to bottom,transparent 0,transparent var(--ft0,0%),#000 var(--ft,0%),#000 calc(100% - var(--fb,0%)),transparent calc(100% - var(--fb0,0%)),transparent 100%);
          mask-composite:intersect}
/* 예전 휴대폰 그림(글 아래 띠)과 그 위 가림막은 휴대폰에서만 쓰지 않는다 */
body.mode-flow #main .gold-scene .scene-pin::before,body.mode-flow #main .trust-steward::before{display:none!important}
body.mode-flow #main .gold-scene .scene-pin::after,body.mode-flow #main .trust-steward::after{display:none!important}
body.mode-flow #main #sftdef .sftdef-motion{display:none!important}
body.mode-flow .d-shot{position:relative;inset:auto;display:block;width:100%;margin:var(--hdr) 0 0;contain:layout paint;translate:none}
body.mode-flow #main :is(#driver,#prepare,#license,#sftdef,#parent,#edu)>.scene-pin{display:block!important;min-height:0!important}
body.mode-flow #main .gold-scene .gs-inner{min-height:0!important;height:auto!important;padding:24px 22px 72px!important;align-content:start!important}
body.mode-flow #main #license .gs-inner.one-col{padding:24px 22px 72px!important}
body.mode-flow #main #research .trust-steward{display:block}
body.mode-flow #main #research .steward-inner{padding:24px 22px 72px!important}
/* 03 top: 영상 칸도 세로 포스터로 자르고(노란 핵이 가운데 오게), 제목은 그 아래. 소리 켜기 알약은 포스터 오른쪽 아래 */
body.mode-flow #main #top>.scene-pin{display:block!important;min-height:0!important}
body.mode-flow #main #top .hero-pin .hero-media{position:relative!important;inset:auto!important;height:min(112vw,58svh)!important;margin:var(--hdr) 0 0!important}
body.mode-flow #main #top .hero-media video,body.mode-flow #main #top .hero-media img{object-fit:cover!important;object-position:76% 46%!important}
body.mode-flow #main #top .hero-media::after{background:linear-gradient(90deg,#060606 0,transparent 9%)}
body.mode-flow #main #top .hero-pin .hero-inner{height:auto!important;min-height:0!important;padding:24px 22px 72px!important}
body.mode-flow #main #top .hero-tools{position:absolute;top:calc(var(--hdr) + min(112vw,58svh) - 54px);bottom:auto}
/* ===== 적용2 끝 ===== */
/* ==========================================================================
   [초안] 적용3 (2026-10-04): 시안에 없던 새 항목. [ ] 안 번호 = 체크리스트 항목 번호.
   문구는 바꾸지 않는다. 새 글자가 드는 1-11 메뉴 이름, 3-03 'Korean edition'과 확인 대기인 1-12, 1-14 꾸밈은
   검수수정(10-04)에서 뺐다(다시 넣기: 검수자료/검수수정/_도구/확인대기_다시넣기.py <항목>).
   사용자 답(10-04): 1-11 안 2(09 연구소 / Institute), 1-12, 3-03은 다시 넣었다. 1-14 꾸밈은 넣지 않는다(자리만 옮김).
   짝이 되는 계산은 v27-upgrade.js 끝 '적용3' 묶음과 index.html applyFlowMode(2-05).
   ========================================================================== */

/* [1-12] 글 나오는 시간과 순서. 움직임의 모양(방향, 흐림), 길이, 인트로는 그대로 두고 기다리는 시간만 줄이거나 순서를 바로잡는다 */
@media(prefers-reduced-motion:no-preference){
  /* 01 AI 시대: 전 제목 0.84초, 1.32초, 부제 2.19초 뒤(인트로를 누른 뒤 약 6초에 부제) → 제목 두 줄 거의 함께(0.25초, 0.37초), 부제 0.6초 */
  body:not(.mode-flow) #era.is-active .era-title .el:nth-child(1){animation-delay:.25s}
  body:not(.mode-flow) #era.is-active .era-title .el:nth-child(2){animation-delay:.37s}
  body:not(.mode-flow) #era.is-active .era-sub{animation-delay:.6s}
  /* 04 제4의식: 첫 줄도 다른 줄과 같은 방식(아래에서, 0.25초 뒤). 전에는 옛 규칙이 이겨 장면이 넘어가는 순간 오른쪽에서 들어와 넘김에 묻혔다 */
  body:not(.mode-flow) #main #prepare.is-active .gs-copy>.gs-sub:first-child{animation:nomi19Up .7s .25s cubic-bezier(.16,1,.3,1) both!important}
  /* 05 마음 운전면허: 첫 줄(0.25초) → 제목(0.33초) → 본문(0.43초). 전에는 옛 규칙이 첫 줄만 0.45초로 늦춰 제목이 먼저 나왔다 */
  body:not(.mode-flow) #main #license.is-active .lic-head>div:first-child>:nth-child(1){animation-delay:.25s!important}
}

/* [1-14] 08 게임 SFT: 「현재 현장 실습과 연구를 준비하고 있습니다. …」를 맨 아래에서 목록 바로 아래로(index.html 순서만, 문구 그대로).
   검수수정(10-04): 글자 크기(14→16px), 밝은 색, 왼쪽 금색 세로줄은 뺐다(체크리스트 1-14 '위치만 옮김', 폐기 18차-6 글자 키우기와 겹칠 수 있음).
   모양은 원래 .research-status 그대로. 다시 넣기: 확인대기_다시넣기.py 1-14 */

/* [1-15] 07 부모: 노트북처럼 높이가 낮은 화면(940px 이하)에서는 제목이 한 단계 작아져(--t-lg) 굵은 결론(--t-lg)과 같은 크기가 되어
   결론이 제목처럼 보였다. 이 경우에만 07 결론을 한 단계 작게(--t-md). 다른 장면, 큰 모니터, 휴대폰은 그대로 */
@media (min-width:761px) and (min-height:501px) and (max-height:940px){
  body:not(.mode-flow) #main .gs-parent .gs-punch{font-size:var(--t-md)}
}

/* [3-04] 영어 화면에서 한국어 글꼴(Noto Sans KR)의 영문자로 그려지던 곳을 다른 영어 글자와 같은 DM Sans로(D-128 범위 안, 굵기 그대로):
   04 첫 줄, 05, 07, 08 굵은 결론, 10 책 카드 제목. 측정: 검수자료/적용3/측정/전/fonts_en_1440x900.json */
html[lang=en] #prepare .gs-copy>.gs-sub:first-child,
html[lang=en] .gold-scene .gs-punch,
html[lang=en] #books .book-card h3{font-family:"DM Sans","Noto Sans KR",system-ui,sans-serif!important}

/* [3-03] 영어 화면 기출간 4권 출판사 줄 아래 작은 표시(글자는 사전 'bk.edition', 한국어는 빈칸이라 숨김) */
#books .bk-edition:empty{display:none}
#books .bk-edition{display:inline-block;margin-top:7px;padding:1px 7px;border:1px solid rgba(202,164,75,.5);border-radius:2px;color:#e2c480;font:500 12px/1.6 "DM Sans","Noto Sans KR",system-ui,sans-serif;letter-spacing:.03em;white-space:nowrap}

/* [3-05] 문의 창(사용자 답 10-04: 영어 문의 창의 새 모양을 한국어 문의 창에도. 검수수정 때 넣은 html[lang=en] 범위를 풀었다.
   휴대폰(폭 760 이하)은 배치 그대로, 체크 상자와 막대만 같다): 입력 항목, 순서, 문구, 참여 문의 비활성(D-126), 측정 장치는 그대로. 배치와 간격, 체크 상자, 막대, 닫기 자리만.
   1) 체크 상자: 브라우저 기본 흰 상자 → 금색 테두리 상자, 고르면 금색 칸에 검은 체크(키보드 초점은 금색 테두리) */
#modal .consent input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:0 0 18px;width:18px;height:18px;margin:2px 0 0;padding:0;border:1px solid rgba(226,196,128,.8);border-radius:2px;background:transparent;cursor:pointer}
#modal .consent input[type=checkbox]:checked{background:#caa44b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-7' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;border-color:#caa44b}
#modal .consent input[type=checkbox]:focus-visible{outline:2px solid #e4c47b;outline-offset:2px}
#modal .consent{cursor:pointer}
/* 2) 문의 창 오른쪽 스크롤 막대: 기본 회색 → 얇은 금색(09 소개 글 막대와 같은 색) */
#modal{scrollbar-width:thin;scrollbar-color:rgba(201,164,88,.7) rgba(226,196,128,.08)}
/* 3) 넓은 화면: 기관 협력 양식만 짧은 칸 둘씩 한 줄(기관, 소속 | 담당자 / 이메일 | 연락처), 칸 사이와 동의 상자 간격을 줄여 길이를 줄인다.
      닫기(×)는 글 단 오른쪽 바깥으로 옮겨, 내려도 「선택해 주세요」 칸 화살표와 겹치지 않게 */
@media (min-width:761px){
  #modal .modal-box:has(form [name="org"]){width:min(720px,100%)}
  #modal form:has([name="org"]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:start}   /* start: 스팸 막는 숨은 칸(첫 초점)이 맨 위에 있어야 창이 위에서 열린다 */
  #modal form:has([name="org"])>*{grid-column:1/-1}
  #modal form:has([name="org"])>.field:has(>input){grid-column:auto}
  #modal form:has([name="org"]) .field{margin-top:14px}
  #modal form:has([name="org"]) h2{margin-top:10px}
  #modal form:has([name="org"]) .field textarea{min-height:84px}
  #modal form:has([name="org"]) .agree{margin-top:16px;padding:12px 14px}
  #modal form:has([name="org"]) .agree .consent{margin-top:8px}
  #modal form:has([name="org"]) .submit{margin-top:22px;justify-self:start}
  #modal form:has([name="org"])>.back-purpose{justify-self:start}
}
@media (min-width:900px){
  #modal .modal-close{margin-right:-64px}
}
/* [1-11] 헤더 메뉴가 오른쪽 단추에 닿을 때만(영어 좁은 노트북): 메뉴 사이 좁힘 → 그래도 닿으면 숨김(폭 1080 이하와 같음). 판단은 v27-upgrade.js 적용3 fitNav */
#hdr .site-nav{transition-property:none!important}   /* 동작 줄이기에서 모든 요소에 걸리는 1ms 전환 때문에 메뉴 폭을 바로 잴 수 없던 것(메뉴 자체는 움직이지 않음) */
.hdr.nav-tight .site-nav{gap:14px!important}
.hdr.nav-hidden .site-nav{display:none!important}
/* [1-11] 마지막 수정(10-09, 사용자 답 ②): 영어에서 메뉴 사이를 좁혀도 닿는 폭(1081~1270 안팎)에서만 헤더 장면 목록(‹ 01/12 ›)을 숨기고 메뉴를 보인다.
   판단은 v27-upgrade.js 적용3 fitNav(영어만). 진행선(.hdr::after), 오른쪽 장면 점, 키보드와 휠 이동은 그대로 */
.hdr.nav-noscene .scene-nav{display:none!important}
/* ===== 적용3 끝 ===== */
/* ==========================================================================
   [초안] 검수수정 (2026-10-04): 검수(디자인, 동작)에서 찾은 새 겹침 바로잡기와 4-07 링크 모양. 짝이 되는 계산은 v27-upgrade.js 끝 '검수수정' 묶음.
   ========================================================================== */
/* [4-07] 06 「책으로 이어 읽기」: 접힘 밖으로 나와도 모양은 그대로(.concept-detail a 규칙과 같은 값) */
#sftdef .def-book{display:inline-block;color:#e4c47b;border:0;border-bottom:1px solid #9f8550;background:transparent;font:inherit;font-size:14px;line-height:1.6;padding:8px 0;text-decoration:none;cursor:pointer;min-height:40px;justify-self:start}
/* [4-05][4-03] 10 책: 펼친 「책 소개 전문 보기」 판의 아래 끝이 그 아래 첫 책 제목 위 14px에서 멈추게(판 안은 지금처럼 스크롤).
   판의 위치, 모양, 최대 높이(화면 52%, 520px)는 그대로. 값은 JS fitDetail 이 화면마다 잰다 */
@media(min-width:761px) and (min-height:501px){
  #main #books .book-detail[open] > div{max-height:min(52dvh,520px,var(--bk-detail-max,520px))}
}
/* [4-01][4-05] 낮은 노트북에서 표지를 줄였을 때만(fitCovers) 표지를 칸 왼쪽에 붙여 표지 왼쪽 끝과 제목 왼쪽 끝을 맞춘다.
   줄이지 않은 화면은 지금처럼(칸 가운데) */
@media (min-width:761px) and (min-height:501px){
  body:not(.mode-flow) #books .book-set--upcoming .book-cover{margin-left:var(--bk-fit-up-ml,auto)}
  body:not(.mode-flow) #books .book-set--published .book-cover{margin-left:var(--bk-fit-pub-ml,auto)}
}
/* ===== 검수수정 끝 ===== */