/* 홈페이지 만들기 코치 v3 — 단순·한 화면 한 동작(듀오링고식)
   원칙: 큰 글씨(17px), 버튼 44px, 대비 4.5:1, 움직임 줄이기 존중, 휴대폰 먼저 */
:root {
  --ink: #16202e; --sub: #4a5568; --line: #e3e8f2; --bg: #f3f6fc; --card: #fff;
  --brand: #1f4aa8; --brand-2: #3b6fe0; --brand-weak: #e9f0ff; --teal: #0f8a6a; --amber: #f59f00; --pink: #db2777;
  --ok: #18794e; --ok-bg: #e5f6ec; --wait: #8a5300; --wait-bg: #fff3d6; --bad: #b42318; --bad-bg: #fdecea;
  --radius: 18px; --radius-s: 12px;
  --shadow-1: 0 1px 2px rgba(22, 32, 46, .06), 0 4px 14px rgba(22, 32, 46, .06);
  --shadow-2: 0 2px 4px rgba(22, 32, 46, .06), 0 14px 36px rgba(31, 74, 168, .14);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body {
  margin: 0; color: var(--ink); font-size: 17px; line-height: 1.68; word-break: keep-all; overflow-wrap: anywhere;
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, #dfe9ff 0%, transparent 60%), radial-gradient(900px 500px at 110% 10%, #e3f7ef 0%, transparent 55%), var(--bg);
  background-attachment: fixed; padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--brand) }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 6px }
.skip { position: absolute; left: -999px } .skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 50 }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.3; margin: .3em 0 .3em; letter-spacing: -.02em; font-weight: 800 }
h2 { font-size: 1.25rem; margin: 1.8em 0 .6em; letter-spacing: -.01em; font-weight: 750 }
h3 { font-size: 1.06rem; margin: 1.2em 0 .4em }
.lead { font-size: 1.08rem; color: #2b3647 }
.muted { color: var(--sub) } .small { font-size: .9rem }
.eyebrow { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--accent, var(--brand)) }
code { background: #eef2f8; padding: 1px 6px; border-radius: 6px; font-size: .9em }
.grad { background: linear-gradient(90deg, var(--brand), var(--teal) 60%, var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent }

/* ── 머리말 ── */
#site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid rgba(227, 232, 242, .8) }
.bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; max-width: 1200px; margin: 0 auto }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto }
.logo { width: 38px; height: 38px; display: grid; place-items: center; font-size: 22px; border-radius: 12px; background: linear-gradient(135deg, #fff, #e3ecff); box-shadow: var(--shadow-1) }
.brand-text { display: flex; flex-direction: column; line-height: 1.2 } .brand-text small { color: var(--sub); font-size: .75rem }
.level-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink); font-size: .85rem; font-weight: 700 }
.lv-bar { width: 60px; height: 6px; border-radius: 9px; background: #e7ecf5; overflow: hidden } .lv-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--amber)) }
.who { font-size: .88rem; color: var(--sub); white-space: nowrap }
#main-nav { display: flex; gap: 4px; overflow-x: auto; padding: 0 12px 8px; max-width: 1200px; margin: 0 auto; scrollbar-width: none }
#main-nav::-webkit-scrollbar { display: none }
#main-nav a { white-space: nowrap; padding: 7px 13px; border-radius: 999px; text-decoration: none; color: #2b3647; font-size: .92rem; min-height: 40px; display: inline-flex; align-items: center; gap: 4px; transition: background .2s }
#main-nav a:hover { background: #eef2fb }
#main-nav a[aria-current=page] { background: var(--ink); color: #fff }
@media (max-width: 720px) { .brand-text small, .lv-name { display: none } .level-chip { padding: 6px 10px } }

main { max-width: 1100px; margin: 0 auto; padding: 8px 16px 110px }
body.wide main { max-width: 1240px }
#site-footer { border-top: 1px solid var(--line); background: rgba(255, 255, 255, .7); padding: 18px 16px 90px; text-align: center; font-size: .92rem }

/* 휴대폰 아래 탭 */
#bottom-nav { display: none }
@media (max-width: 760px) {
  #bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 30; background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 20px; box-shadow: var(--shadow-2); padding: 6px }
  #bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .72rem; color: var(--sub); text-decoration: none; min-height: 50px; border-radius: 14px }
  #bottom-nav a span { font-size: 1.15rem; line-height: 1 }
  #bottom-nav a[aria-current=page] { color: var(--brand); background: var(--brand-weak) }
  #bottom-nav a.go { background: linear-gradient(135deg, var(--brand), var(--teal)); color: #fff; font-weight: 700 }
  #main-nav { display: none }
}

/* ── 버튼·배지 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--brand); background: var(--brand); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; font-family: inherit; transition: transform .15s var(--ease), box-shadow .2s, background .2s }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(31, 74, 168, .25) }
.btn:active { transform: translateY(0) scale(.98) }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none }
.btn.ghost { background: #fff; color: var(--brand); border-color: #c9d6f3 }
.btn.primary { background: linear-gradient(135deg, #16824f, #0f8a6a); border-color: transparent }
.btn.primary:hover { box-shadow: 0 8px 22px rgba(15, 138, 106, .32) }
.btn.small { min-height: 38px; padding: 6px 12px; font-size: .9rem; border-radius: 10px }
.btn.big { font-size: 1.08rem; padding: 14px 24px; border-radius: 14px }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; vertical-align: middle; line-height: 1.7 }
.badge.ok { background: var(--ok-bg); color: var(--ok) } .badge.wait { background: var(--wait-bg); color: var(--wait) }
.badge.warn { background: var(--bad-bg); color: var(--bad) } .badge.info { background: var(--brand-weak); color: var(--brand) } .badge.muted { background: #edf1f7; color: #3c4655 }

/* ── 3D 지도 ── */
.map3d { margin-top: 14px; position: relative }
.map3d-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 10px }
.map3d-head h1 { margin: .1em 0 .2em }
.map3d-head .lead { margin: 0; max-width: 46ch }
.map3d-actions { display: flex; gap: 8px }
.map3d-stage { position: relative; height: clamp(420px, 66vh, 660px); border-radius: 28px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #e6eeff 45%, #d3e2ff 100%); box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255, 255, 255, .7); touch-action: none }
.map3d-stage canvas { display: block; width: 100%; height: 100%; cursor: grab }
.map3d-stage canvas:active { cursor: grabbing }
.map3d-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden }
.map3d-tag { position: absolute; left: 0; top: 0; transition: opacity .25s; pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 14px rgba(22, 32, 46, .14); font: inherit; font-size: .8rem; font-weight: 700; color: var(--ink); cursor: pointer; white-space: nowrap; transition: opacity .2s, box-shadow .2s; will-change: transform }
.map3d-tag .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #e8edf7; font-size: .75rem }
.map3d-tag.done .n { background: var(--ok); color: #fff } .map3d-tag.now .n { background: var(--brand); color: #fff }
.map3d-tag.soon { color: #5b6677 } .map3d-tag.facility { padding-left: 10px; background: rgba(233, 240, 255, .95) }
.map3d-tag .here { background: var(--amber); color: #1b1300; border-radius: 999px; padding: 0 8px; font-size: .72rem }
.map3d-tag.on { box-shadow: 0 0 0 3px var(--amber), 0 6px 18px rgba(22, 32, 46, .2) }
.map3d-tag.pulse { animation: pulse 1.6s var(--ease) 3 }
@keyframes pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(22, 32, 46, .14) } 50% { box-shadow: 0 0 0 8px rgba(245, 159, 0, .25), 0 4px 14px rgba(22, 32, 46, .14) } }
.map3d-panel { position: absolute; right: 14px; top: 14px; width: min(340px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow: auto; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-radius: 22px; padding: 16px 18px 18px; box-shadow: var(--shadow-2); border-top: 5px solid var(--accent, var(--brand)); animation: panelIn .35s var(--ease) }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } }
.map3d-panel img { width: 100%; height: auto; border-radius: 14px; background: #f3f6fc }
.map3d-panel h3 { margin: .2em 0 .3em; font-size: 1.2rem }
.map3d-panel .analogy { color: var(--accent); font-weight: 700; margin: 0 0 .3em }
.map3d-panel .sum { margin: 0 0 .6em } .map3d-panel .meta { display: flex; flex-wrap: wrap; gap: 6px }
.map3d-panel .pill { background: #f0f3f9; border-radius: 999px; padding: 2px 10px; font-size: .8rem }
.map3d-panel .btn { width: 100%; margin-top: 8px }
.map3d-panel .x { position: absolute; right: 10px; top: 8px; border: 0; background: #f0f3f9; width: 34px; height: 34px; border-radius: 50%; font-size: 1.2rem; cursor: pointer }
@media (max-width: 640px) { .map3d-stage { height: 440px } .map3d-head .lead { font-size: .95rem } .map3d-panel { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; max-height: 62% } .map3d-stage { border-radius: 22px } }
.map3d-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--sub); font-weight: 600 }
.map3d-loading span { width: 46px; height: 46px; border-radius: 50%; border: 4px solid #cfdcf7; border-top-color: var(--brand); animation: spin 1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.map3d.no-webgl .map3d-stage { height: auto; min-height: 0; padding: 18px; background: var(--brand-weak) }
.map3d.no-webgl .map3d-stage::after { content: '이 기기에서는 3D 지도를 그릴 수 없어서, 아래 목록으로 보여 드려요.'; color: var(--sub) }
.map3d.no-webgl .map3d-actions, .map3d.no-webgl .map3d-legend { display: none }
.map3d-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; padding: 0; margin: 10px 4px 0; font-size: .85rem; color: var(--sub) }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px }
.lg.done { background: #7ccf8f } .lg.now { background: #ffd166 } .lg.ready { background: #9ad48a } .lg.soon { background: #c8d7c2 } .lg.fac { background: #b9d9f5 }

/* 오늘의 미션 + 레벨 */
.mission-strip { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 18px }
@media (max-width: 820px) { .mission-strip { grid-template-columns: 1fr } }
.mission-card, .level-card { background: var(--card); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-1) }
.mission-card { background: linear-gradient(135deg, #1f4aa8 0%, #2f63d1 55%, #0f8a6a 130%); color: #fff }
.mission-card .eyebrow { color: #cfe0ff } .mission-card h2 { margin: .2em 0 .3em; font-size: 1.45rem } .mission-card p { color: #e6eeff }
.mission-card a:not(.btn) { color: #fff }
.lv { font-size: 1.2rem; margin: .2em 0 } .lv-emoji { font-size: 1.6rem; vertical-align: -3px }
.xpbar { height: 12px; border-radius: 9px; background: #edf1f7; overflow: hidden } .xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--amber)); border-radius: 9px; transition: width .8s var(--ease) }
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0 4px }
.badges li { width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.15rem; border-radius: 12px; background: #f0f3f8; filter: grayscale(1); opacity: .45 }
.badges li.got { filter: none; opacity: 1; background: linear-gradient(135deg, #fff7e0, #ffe7a8); box-shadow: 0 2px 8px rgba(245, 159, 0, .3) }

/* 여정 목록 */
.journey { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px }
.journey .step a { display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; background: var(--card); border-radius: var(--radius); text-decoration: none; color: inherit; box-shadow: var(--shadow-1); border: 2px solid transparent; transition: transform .2s var(--ease), box-shadow .2s }
.journey .step a:hover { transform: translateY(-3px); box-shadow: var(--shadow-2) }
.journey img { width: 96px; height: 72px; object-fit: cover; border-radius: 12px; flex: none; background: #f3f6fc }
.journey .t { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.journey .row1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.journey .num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: color-mix(in srgb, var(--accent) 16%, white); color: var(--accent) }
.journey .s { color: #3a4556; font-size: .9rem }
.journey .now a { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(31, 74, 168, .12), var(--shadow-1) }
.journey .done a { background: linear-gradient(135deg, #fff, #effaf3) }
.journey .soon a { opacity: .78 }
.mini-bar { display: block; height: 6px; background: #edf1f7; border-radius: 9px; overflow: hidden; margin-top: 2px } .mini-bar i { display: block; height: 100%; background: var(--accent, var(--teal)) }

.how-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px }
.how-steps li, .explain-3 > div { background: var(--card); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 2px }
.how-steps span, .explain-3 span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-weak); color: var(--brand); font-weight: 800; margin-bottom: 4px }
.how-steps em, .explain-3 em { font-style: normal; color: var(--sub); font-size: .9rem }
.explain-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; margin: 14px 0 }

.activity { list-style: none; padding: 0; display: grid; gap: 6px }
.activity li { display: flex; gap: 10px; align-items: center; background: var(--card); border-radius: 14px; padding: 8px 12px; box-shadow: var(--shadow-1); font-size: .93rem }
.who-dot { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #dce7ff, #c9f0e1); font-weight: 800; color: var(--brand) }

/* ── 쪽 머리 ── */
.page-head, .island-hero, .card-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--card); border-radius: 24px; padding: 18px 22px; margin-top: 14px; box-shadow: var(--shadow-1); position: relative; overflow: hidden }
.page-head::before, .island-hero::before, .card-hero::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--accent, var(--brand)) }
.page-head h1 { margin: .1em 0 } .ph-emoji { display: inline-block }
.ph-img, .island-hero img, .card-hero img { flex: none; width: clamp(120px, 26vw, 240px); height: auto; border-radius: 18px }
.island-hero img { width: clamp(150px, 34vw, 360px) }
.analogy.big { font-size: 1.15rem; font-weight: 700; color: var(--accent); margin: .2em 0 }
@media (max-width: 560px) { .page-head, .island-hero, .card-hero { flex-direction: column-reverse; align-items: stretch } .ph-img, .island-hero img, .card-hero img { width: 100%; max-height: 200px; object-fit: contain } .card-hero img { display: none } }
.card-progress { display: flex; align-items: center; gap: 10px; max-width: 320px } .card-progress .mini-bar { flex: 1; --accent: var(--teal) }

.crumbs { font-size: .88rem; color: var(--sub); margin-top: 12px }
.crumbs a { text-decoration: none }
.card-list { list-style: none; padding: 0; display: grid; gap: 10px }
.card-list a { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--card); border-radius: var(--radius); text-decoration: none; color: inherit; box-shadow: var(--shadow-1); transition: transform .2s var(--ease), box-shadow .2s }
.card-list a:hover { transform: translateX(4px); box-shadow: var(--shadow-2) }
.quest-no { width: 42px; height: 42px; flex: none; border-radius: 14px; display: grid; place-items: center; font-weight: 800; background: var(--brand-weak); color: var(--brand); font-size: 1.1rem }
.card-list li.done .quest-no { background: var(--ok); color: #fff }
.card-list .body { display: flex; flex-direction: column; gap: 2px } .card-list .row1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.card-list .s { color: #2d3748 } .card-list .o { color: var(--sub); font-size: .86rem }
.soon-box { background: var(--card); border: 2px dashed #c9d3e4; border-radius: var(--radius); padding: 16px 18px; margin-top: 16px }

/* ── 카드 본문 ── */
.three-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; margin: 14px 0 }
.three-lines > div { background: var(--card); border-radius: var(--radius-s); padding: 12px 14px; display: flex; flex-direction: column; box-shadow: var(--shadow-1); border-top: 4px solid var(--brand) }
.three-lines > div:nth-child(2) { border-top-color: var(--amber) } .three-lines > div:nth-child(3) { border-top-color: var(--teal) }
.three-lines .k { font-size: .82rem; color: var(--sub); font-weight: 600 }
.meta { display: flex; flex-wrap: wrap; gap: 6px }
.why { background: #fffbea; border-radius: var(--radius-s); padding: 12px 16px; border: 1px solid #fbe7a8 }
.example { background: var(--card); border-radius: var(--radius); padding: 4px 18px 14px; box-shadow: var(--shadow-1); margin-top: 16px }
.ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px } @media (max-width: 640px) { .ex-grid { grid-template-columns: 1fr } }
.ex { border-radius: 14px; padding: 12px 14px; position: relative } .ex ul { margin: 0; padding-left: 1.1em } .ex li { margin: 3px 0 }
.ex.good { background: #ecf9f1; border: 2px solid #9fdcb5 } .ex.bad { background: #fff2f0; border: 2px dashed #f2b4ab }
.ex-label { margin: 0 0 6px; font-weight: 800 } .ex.good .ex-label { color: var(--ok) } .ex.bad .ex-label { color: var(--bad) }
.ex-why { margin: 10px 0 0; font-weight: 600 }
.actions { list-style: none; padding: 0; display: grid; gap: 10px; counter-reset: step }
.action { display: flex; gap: 12px; background: var(--card); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-1); border: 2px solid transparent; transition: background .3s, border-color .3s }
.action.checked { background: #f1faf4; border-color: #b7e2c6 }
.action .tick input { width: 28px; height: 28px; margin-top: 2px; accent-color: var(--ok); cursor: pointer }
.action .body { flex: 1; min-width: 0 } .action .body p { margin: .25em 0 }
.action .where { font-size: .88rem } .action .menu { color: var(--sub) }
.action.checked .body > p:nth-child(2) { color: #3b4a3f }
.warning { background: var(--bad-bg); color: #7a1a12; padding: 8px 12px; border-radius: 10px }
.tip { background: #eef5ff; padding: 8px 12px; border-radius: 10px }
.shot { border: 2px dashed #c9d3e4; border-radius: 10px; padding: 10px; color: var(--sub); font-size: .9rem; background: #fafbfe }
.action img { max-width: 100%; border-radius: 10px; border: 1px solid var(--line) }
.check { background: var(--card); border-radius: var(--radius); padding: 4px 18px 14px; margin-top: 18px; box-shadow: var(--shadow-1); border: 2px solid var(--brand-weak) }
.check-result { margin-top: 10px; padding: 12px 14px; border-radius: 12px; min-height: 1em }
.check-result:empty { display: none }
.check-result.green { background: var(--ok-bg); color: #0d4f22 } .check-result.yellow { background: var(--wait-bg); color: #6b3f00 } .check-result.red { background: var(--bad-bg); color: #7a1a12 }
.quiz fieldset { border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); margin: 0 0 10px; padding: 10px 16px }
.quiz legend { font-weight: 700; padding: 0 4px }
.quiz fieldset.right { border-color: #7cc492; background: #f3fbf6 } .quiz fieldset.wrong { border-color: #e88b80; background: #fff6f5 }
.choice { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; border-radius: 10px; padding: 0 6px }
.choice:hover { background: #f4f7fd } .choice input { width: 22px; height: 22px }
.trouble, .prompt { background: var(--card); border-radius: var(--radius-s); padding: 10px 14px; margin-bottom: 8px; box-shadow: var(--shadow-1) }
summary { cursor: pointer; font-weight: 650; min-height: 32px }
.copybox { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 }
.copybox textarea, .field textarea, .field input, .dns-add input, .dns-add select { width: 100%; font: inherit; font-size: 16px; border: 1.5px solid #c9d3e4; border-radius: 12px; padding: 10px 12px; background: #fff; transition: border-color .2s, box-shadow .2s }
.field textarea:focus, .field input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(31, 74, 168, .12); outline: none }
.copybox textarea { background: #f8faff; font-size: .9rem }
.copybox .btn { align-self: flex-start }
.field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-weight: 650 }
.field textarea, .field input { font-weight: 400 }
fieldset.field { border: 0; padding: 0 }
.req { font-size: .76rem; color: var(--bad); font-weight: 700 }
.terms dl, .glossary { margin: 0 } .terms dt, .glossary dt { font-weight: 700; margin-top: 8px } .terms dd, .glossary dd { margin: 0 0 4px; color: #2d3748 }
.glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 8px }
.glossary .g { background: var(--card); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow-1) } .glossary .g dt { margin-top: 0 }
.sources { margin-top: 26px; font-size: .9rem; border-top: 1px dashed var(--line); padding-top: 10px }
.unverified { color: #7a1a12 }
.done-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0; padding: 16px; border-radius: var(--radius); background: linear-gradient(135deg, #f0fbf5, #eef4ff) }
.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px }
.pager a { text-decoration: none; font-weight: 650 }
.shortcut { background: #f0f7ff; border-radius: 10px; padding: 8px 12px }

/* ── 계획 도우미 ── */
.types { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px }
.type { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--card); border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; font: inherit; color: inherit; min-height: 44px; box-shadow: var(--shadow-1); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s }
.type:hover { transform: translateY(-2px); box-shadow: var(--shadow-2) }
.type.on { border-color: var(--brand); background: var(--brand-weak) }
.type .pick { color: var(--brand); font-weight: 650 } .type .ex { color: var(--sub); font-size: .88rem }
.swatch { display: inline-flex; gap: 4px } .swatch i { width: 18px; height: 18px; border-radius: 6px; display: inline-block; border: 1px solid rgba(0, 0, 0, .08) }
.swatch.big i { width: 34px; height: 34px; border-radius: 10px }
.plan-form, .type-detail { background: var(--card); border-radius: var(--radius); padding: 4px 20px 16px; margin-top: 16px; box-shadow: var(--shadow-1) }
.chips { display: flex; flex-wrap: wrap; gap: 8px } .chip { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 500; min-height: 40px; background: #fff }
.bracket-warn { background: var(--wait-bg); color: #6b3f00; padding: 8px 12px; border-radius: 10px }

/* ── 공통 블록 ── */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px }
.grid2.tight { gap: 10px }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-top: 20px }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--card); border-radius: var(--radius); text-decoration: none; color: inherit; margin-bottom: 10px; box-shadow: var(--shadow-1) }
.tile span { color: var(--sub) }
.tool { background: var(--card); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-1) }
.tool h2 { margin-top: 0 }
.note { background: var(--brand-weak); border-radius: var(--radius-s); padding: 14px 16px } .note.warn { background: var(--wait-bg) }
.note h2 { margin-top: 0 }
.conclusion { background: var(--card); border-left: 6px solid var(--brand); padding: 4px 18px; border-radius: 14px; box-shadow: var(--shadow-1) }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-s); background: var(--card); box-shadow: var(--shadow-1) }
table { border-collapse: collapse; width: 100%; font-size: .93rem }
th, td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top }
thead th { background: #f3f6fb; position: sticky; top: 0 }
.compare table { min-width: 960px } .compare th[scope=row] { background: #f9fafd; min-width: 100px }
.compare .ours { background: #f2f6ff }
table.roles { min-width: 760px } table.roles td { text-align: center } table.roles input { width: 24px; height: 24px }
table.allow { min-width: 640px }
.cons li, .dont li { margin-bottom: 6px }
.files { list-style: none; padding: 0 } .files li { padding: 10px 14px; background: var(--card); border-radius: 12px; margin-bottom: 6px; box-shadow: var(--shadow-1) } .files li.old { opacity: .7 }
.doc { background: var(--card); border-radius: var(--radius); padding: 8px 22px 22px; overflow-x: auto; box-shadow: var(--shadow-1) }
.doc table { min-width: 640px }
.feedback { list-style: none; padding: 0 } .feedback li { background: var(--card); border-radius: 14px; padding: 10px 14px; margin-bottom: 8px; box-shadow: var(--shadow-1) } .feedback p { margin: 4px 0 0; white-space: pre-wrap }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 }
.tab { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 16px; font: inherit; cursor: pointer; min-height: 44px }
.tab.on { background: var(--ink); color: #fff; border-color: var(--ink) }
.fake-gabia { background: var(--card); border: 2px solid #3b5bdb33; border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-1) }
.fake-title { font-weight: 700; margin: 0 0 8px }
.dns-add { display: grid; grid-template-columns: 110px 1fr 1fr auto; gap: 6px; margin: 10px 0 }
@media (max-width: 640px) { .dns-add { grid-template-columns: 1fr } }
.kv { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 } .kv span { min-width: 140px; color: var(--sub); font-size: .9rem }
#dns-table th, #dns-table td:first-child, #dns-table td:nth-child(2), #dns-table .btn { white-space: nowrap; word-break: normal }

/* 알림 */
#toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(160px); background: #16202e; color: #fff; padding: 12px 18px; border-radius: 14px; max-width: 92vw; transition: transform .3s var(--ease); z-index: 60; box-shadow: var(--shadow-2); font-weight: 600 }
#toast { opacity: 0 } #toast.on { transform: translateX(-50%) translateY(0); opacity: 1 }
body.focus #toast { bottom: 110px }
@media (min-width: 761px) { #toast { bottom: 24px } }

/* 스크롤 등장 */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease) }
.reveal.in { opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
  .reveal { opacity: 1; transform: none }
}
@media (max-width: 640px) {
  .map3d-panel { padding: 12px 14px 14px; display: grid; grid-template-columns: 84px 1fr; column-gap: 12px; align-items: start }
  .map3d-panel img { grid-row: span 3; width: 84px; height: 63px; object-fit: cover }
  .map3d-panel .sum, .map3d-panel .meta, .map3d-panel .btn { grid-column: 1 / -1 }
  .map3d-panel .sum { font-size: .92rem; margin-top: 6px }
}
@media (max-width: 640px) { .map3d-panel { max-height: 78% } .map3d-panel .analogy { font-size: .92rem } .map3d-panel .btn { position: sticky; bottom: 0 } .map3d-panel h3 { font-size: 1.05rem } }

/* ═══════════ v3: 단순화 · 듀오링고식 ═══════════ */
:root { --go: #58cc02; --go-dark: #46a302; --go-ink: #fff; --right-bg: #d7ffb8; --right-ink: #58a700; --wrong-bg: #ffdfe0; --wrong-ink: #ea2b2b }
.map3d-panel .deliv { margin: 0 0 .6em; font-size: .92rem; color: var(--sub) }
/* 큰 초록 버튼 (아래 그림자로 눌리는 느낌) */
.btn.go { background: var(--go); border: 0; color: var(--go-ink); box-shadow: 0 4px 0 var(--go-dark); border-radius: 16px; text-transform: none; letter-spacing: .02em; min-width: 150px }
.btn.go:hover { background: #61d80a; transform: none; box-shadow: 0 4px 0 var(--go-dark) }
.btn.go:active { transform: translateY(4px); box-shadow: 0 0 0 var(--go-dark) }
.btn.go[disabled] { background: #e5e5e5; color: #afafaf; box-shadow: 0 4px 0 #cfcfcf; opacity: 1 }
.btn.go.retry { background: var(--wrong-ink); box-shadow: 0 4px 0 #b81f1f }
.btn.huge { font-size: 1.2rem; min-height: 60px; padding: 14px 40px; width: 100% }
.link-btn { background: none; border: 0; color: var(--sub); font: inherit; font-weight: 700; cursor: pointer; padding: 10px 8px; min-height: 44px }
.link-btn:hover { color: var(--ink) }
.hide-s { display: inline } .show-s { display: none }
@media (max-width: 520px) { .hide-s { display: none } .show-s { display: inline } }

/* 위쪽 메뉴: 3개 + 더보기 */
.bar { flex-wrap: wrap }
#main-nav { padding: 0; margin: 0; overflow: visible; max-width: none; align-items: center }
.more { position: relative }
.more summary { list-style: none; white-space: nowrap; padding: 7px 13px; border-radius: 999px; color: #2b3647; font-size: .92rem; min-height: 40px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer }
.more summary::-webkit-details-marker { display: none }
.more summary:hover, .more[open] summary { background: #eef2fb }
.more summary[aria-current=page] { background: var(--ink); color: #fff }
.more ul { position: absolute; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 8px; width: min(320px, 92vw); background: #fff; border-radius: 18px; box-shadow: var(--shadow-2); z-index: 40 }
.more li a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--ink) }
.more li a:hover, .more li a[aria-current=page] { background: #f0f4fb }
.more li a > span:first-child { font-size: 1.2rem }
.more li strong { display: block; font-size: .95rem } .more li small { display: block; color: var(--sub); font-size: .8rem; line-height: 1.3 }
@media (max-width: 760px) { #main-nav > a { display: none } .who .btn { min-height: 36px } }

/* 코치 말풍선 */
.coach { display: flex; align-items: flex-start; gap: 14px; margin: 8px 0 18px }
.coach-face { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: linear-gradient(135deg, #e9f9d9, #c9f0a6); box-shadow: 0 3px 0 #a6dc7a; animation: bob 3s ease-in-out infinite }
.coach.big .coach-face { width: 72px; height: 72px; font-size: 40px }
.coach-bubble { position: relative; background: #fff; border: 2px solid #e5e5e5; border-radius: 18px; padding: 12px 16px; max-width: 640px; box-shadow: none }
.coach-bubble::before { content: ''; position: absolute; left: -10px; top: 20px; width: 16px; height: 16px; background: #fff; border-left: 2px solid #e5e5e5; border-bottom: 2px solid #e5e5e5; transform: rotate(45deg) }
.coach-bubble p { margin: .15em 0 } .coach-bubble:focus { outline: none }
.coach-small { color: var(--sub); font-size: .88rem }
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }

/* 홈: 큰 버튼 하나 */
.home-hero { display: grid; grid-template-columns: 1fr minmax(240px, 340px); gap: 18px; align-items: center; background: #fff; border-radius: 24px; padding: 18px 22px; margin: 14px 0 18px; box-shadow: var(--shadow-1) }
.home-hero .coach { margin: 0 }
.hero-cta { display: flex; flex-direction: column; gap: 10px }
.overall { height: 14px; border-radius: 99px; background: #e5e5e5; overflow: hidden }
.overall i { display: block; height: 100%; background: var(--go); border-radius: 99px; min-width: 14px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08) }
@media (max-width: 720px) { .home-hero { grid-template-columns: 1fr; padding: 16px } }
.map3d-head h1 { font-size: 1.4rem; margin: 0 }
.map3d-hint { text-align: center; margin: 8px 0 0 }
.list-toggle { margin-top: 14px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 4px 14px }
.list-toggle > summary { cursor: pointer; font-weight: 700; padding: 10px 0; min-height: 44px }
.list-toggle .journey { margin: 6px 0 14px }
.journey .step a { padding: 12px 14px }

/* 단계: 경로(노드) */
.path { list-style: none; padding: 10px 0 0; margin: 10px auto; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 18px; position: relative }
.path::before { content: ''; position: absolute; top: 40px; bottom: 40px; left: 50%; width: 6px; margin-left: -3px; background: repeating-linear-gradient(#dfe5ee 0 12px, transparent 12px 22px); z-index: 0 }
.node { position: relative; z-index: 1; width: 100% ; display: flex }
.node:nth-child(4n+2) { justify-content: flex-start; padding-left: 12% } .node:nth-child(4n+4) { justify-content: flex-end; padding-right: 12% } .node:nth-child(odd) { justify-content: center }
.node a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; position: relative }
.node .dot { width: 76px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; color: #fff; background: var(--accent); box-shadow: 0 7px 0 color-mix(in srgb, var(--accent) 70%, black); transition: transform .15s }
.node a:active .dot { transform: translateY(5px); box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 70%, black) }
.node.open .dot { background: #e5e5e5; color: #9aa3b0; box-shadow: 0 7px 0 #cfcfcf }
.node.done .dot { background: #ffc800; box-shadow: 0 7px 0 #e0a800 }
.node.now .dot { outline: 6px solid color-mix(in srgb, var(--accent) 22%, white); animation: bob 2.4s ease-in-out infinite }
.node .label { text-align: center; background: #fff; padding: 4px 12px; border-radius: 12px; box-shadow: var(--shadow-1) }
.node .label strong { display: block; font-size: .95rem } .node .label small { color: var(--sub) }
.start-tag { position: absolute; top: -34px; background: #fff; border: 2px solid #e5e5e5; color: var(--go-dark); font-weight: 800; padding: 2px 12px; border-radius: 10px; font-size: .9rem }
.start-tag::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-top-color: #e5e5e5 }

/* 레슨 플레이어 (집중 모드: 머리말·메뉴 숨김) */
body.focus { background: #fff; overflow-x: clip }
body.focus main { max-width: 760px; padding: 0 16px 140px }
.lesson-top { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 14px; padding: 14px 0; background: #fff }
.lesson-top.inline { position: static; padding: 6px 0 2px }
.lesson-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: #afafaf; font-size: 1.4rem; text-decoration: none; cursor: pointer; border-radius: 10px }
.lesson-x:hover { color: var(--ink); background: #f3f3f3 }
.lesson-bar { flex: 1; height: 16px; background: #e5e5e5; border-radius: 99px; overflow: hidden }
.lesson-bar i { display: block; height: 100%; width: 0; background: var(--go); border-radius: 99px; transition: width .4s var(--ease); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .08), inset 0 4px 0 rgba(255, 255, 255, .3) }
.lesson-id { font-size: .85rem; color: var(--sub); font-weight: 700; white-space: nowrap }
.screen { animation: slideIn .3s var(--ease) }
.screen[hidden] { display: none }
@keyframes slideIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
.intro-card { display: flex; gap: 18px; align-items: flex-start; border: 2px solid #e5e5e5; border-radius: 20px; padding: 18px }
.intro-card img { width: 160px; height: auto; border-radius: 14px; flex: none }
.intro-card h1 { font-size: 1.5rem; margin: 0 0 .3em }
.intro-card .why, .intro-card .reassure { margin: .4em 0; padding: 0; background: none; border: 0 }
@media (max-width: 560px) { .intro-card { flex-direction: column } .intro-card img { width: 100%; max-height: 160px; object-fit: contain } }
.choices { display: grid; gap: 12px; grid-template-columns: 1fr }
.choices.two { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) }
.choice-card { display: flex; gap: 12px; align-items: center; text-align: left; width: 100%; min-height: 64px; padding: 14px 16px; background: #fff; border: 2px solid #e5e5e5; border-bottom-width: 4px; border-radius: 16px; font: inherit; color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s }
.choice-card:hover { background: #f7f7f7 }
.choice-card.on { border-color: #84d8ff; background: #ddf4ff; color: #1899d6 }
.choice-card.right { border-color: var(--go); background: var(--right-bg); color: var(--right-ink) }
.choice-card.wrong { border-color: var(--wrong-ink); background: var(--wrong-bg); color: var(--wrong-ink) }
.choice-card ul { margin: 0; padding-left: 1.1em; color: var(--ink) }
.choice-card .key { flex: none; width: 30px; height: 30px; border: 2px solid #e5e5e5; border-radius: 8px; display: grid; place-items: center; font-size: .85rem; color: #afafaf; font-weight: 800 }
.feedback-text { margin: 14px 0 0; font-weight: 600 }
.do-card { border: 2px solid #e5e5e5; border-radius: 20px; padding: 18px }
.do-card .do { font-size: 1.12rem; margin-top: 0 }
.do-card img { max-width: 100%; border-radius: 12px }
.big-link { width: 100% }
.did-it { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 700; color: var(--sub); cursor: pointer; min-height: 44px }
.did-it input { width: 24px; height: 24px; accent-color: var(--go) }
.screen.checked .did-it { color: var(--right-ink) }
.check-box { border: 2px solid #e5e5e5; border-radius: 20px; padding: 18px }
.finish { text-align: center; padding-top: 30px }
.finish-art { font-size: 84px; animation: bob 2s ease-in-out infinite }
.finish h2 { font-size: 1.6rem; color: #f0a800; margin: .3em 0 }
/* 아래 고정 바 */
.lesson-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 2px solid #e5e5e5; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); transition: background .2s }
.lesson-foot.static { position: sticky; margin: 18px -16px 0 }
.lesson-foot.right { background: var(--right-bg); border-color: transparent } .lesson-foot.right .foot-msg { color: var(--right-ink) }
.lesson-foot.wrong { background: var(--wrong-bg); border-color: transparent } .lesson-foot.wrong .foot-msg { color: var(--wrong-ink) }
.foot-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.foot-msg { margin: 0; font-weight: 800; font-size: 1.05rem; min-height: 1.2em; flex: 1 1 160px }
.foot-btns { display: flex; align-items: center; gap: 8px; margin-left: auto }
@media (max-width: 520px) { .foot-btns { width: 100% } .foot-btns .btn.go { flex: 1; min-width: 0 } }
/* 도움말 서랍 */
.help-drawer { border: 0; padding: 0 20px 20px; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 22px 0 0 22px; box-shadow: var(--shadow-2); overflow: auto }
.help-drawer::backdrop { background: rgba(22, 32, 46, .45) }
.help-drawer[open] { animation: drawerIn .3s var(--ease) }
@keyframes drawerIn { from { transform: translateX(40px); opacity: 0 } to { transform: none; opacity: 1 } }
.drawer-head { position: sticky; top: 0; background: #fff; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; z-index: 1 }
.help-drawer > details { border-top: 1px solid var(--line); padding: 8px 0 }
.help-drawer > details > summary { font-weight: 700; cursor: pointer; min-height: 40px; display: flex; align-items: center }
/* 기획서 마법사 */
.wizard { max-width: 760px; margin: 0 auto }
.wstep[hidden] { display: none }
.wstep { animation: slideIn .3s var(--ease) }
.choices.types { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) }
.choice-card.type strong { display: block } .choice-card.type small { display: block; color: var(--sub); font-size: .85rem; font-weight: 400 }
.choice-card.type.on { border-color: #84d8ff; background: #ddf4ff }
.choice-card .swatch { display: flex; flex: none }
.field.big input, .field.big textarea { font-size: 1.1rem; padding: 14px; border: 2px solid #e5e5e5; border-radius: 14px; background: #f7f7f7 }
.field.big input:focus, .field.big textarea:focus { background: #fff; border-color: #84d8ff; outline: none }
.chips.big .chip { padding: 10px 14px; font-size: 1rem; border: 2px solid #e5e5e5; border-radius: 14px }
.result-card { max-width: 760px; margin: 24px auto 0; background: #fff; border-radius: 22px; padding: 6px 20px 16px; box-shadow: var(--shadow-1) }
.level-card { margin-top: 14px }
@media (prefers-reduced-motion: reduce) { .coach-face, .node.now .dot, .finish-art, .screen, .wstep { animation: none } }

/* ═══════════ v4: 토스급 하이엔드 디자인 ═══════════
   원칙: 흰 바탕 + 연회색 면, 굵고 짧은 제목, 넉넉한 여백, 그림자 최소, 브랜드 파랑 하나로 행동 유도 */
:root {
  --ink: #191F28; --sub: #4E5968; --sub2: #8B95A1; --line: #E5E8EB; --bg: #F2F4F6; --card: #fff;
  --brand: #2B89F1; --brand-2: #1B6FD8; --brand-weak: #E8F3FF; --navy: #1B365D; --sun: #FDC550;
  --teal: #1B6FD8; --amber: #FDC550; --pink: #5B6CFF;
  --go: #2B89F1; --go-dark: #1B6FD8; --right-bg: #E8F3FF; --right-ink: #1B64DA; --wrong-bg: #FFEEEE; --wrong-ink: #F04452;
  --radius: 20px; --radius-s: 14px;
  --shadow-1: 0 1px 2px rgba(0, 27, 55, .04), 0 2px 8px rgba(0, 27, 55, .04);
  --shadow-2: 0 4px 12px rgba(0, 27, 55, .06), 0 16px 40px rgba(0, 27, 55, .08);
  --ease: cubic-bezier(.22, .9, .3, 1);
}
body { background: var(--bg); background-attachment: scroll; color: var(--ink); letter-spacing: -.01em }
h1 { font-weight: 700; letter-spacing: -.03em } h2 { font-weight: 700; letter-spacing: -.02em }
a { color: var(--brand) }
.grad { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--brand) }
.eyebrow { color: var(--brand); letter-spacing: 0 }
.lead { color: var(--sub) }

/* 머리말 */
#site-header { background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line) }
.bar { padding: 10px 20px; min-height: 64px }
.logo { width: 36px; height: 36px; background: none; box-shadow: none; border-radius: 12px; overflow: hidden }
.logo img { width: 36px; height: 36px; display: block }
.brand-text strong { font-size: 1rem; letter-spacing: -.02em } .brand-text small { color: var(--sub2) }
.cobrand { display: block; height: 12px; width: auto; margin-bottom: 2px }
#main-nav a, .more summary { color: var(--sub); font-weight: 600; border-radius: 10px }
#main-nav a:hover, .more summary:hover, .more[open] summary { background: var(--bg); color: var(--ink) }
#main-nav a[aria-current=page], .more summary[aria-current=page] { background: var(--brand-weak); color: var(--brand) }
.level-chip { box-shadow: none; background: var(--bg); font-weight: 600 }
.lv-bar i, .xpbar i, .mini-bar i { background: var(--brand) }
#bottom-nav a.go { background: var(--brand) }
#bottom-nav a[aria-current=page] { background: var(--brand-weak); color: var(--brand) }

/* 버튼 */
.btn { border-radius: 14px; border: 0; background: var(--brand); font-weight: 600; letter-spacing: -.01em; transition: transform .12s var(--ease), background .15s }
.btn:hover { transform: none; box-shadow: none; background: var(--brand-2) }
.btn:active { transform: scale(.97) }
.btn.ghost { background: var(--bg); color: #333D4B; border: 0 }
.btn.ghost:hover { background: #E5E8EB }
.btn.primary { background: var(--brand) } .btn.primary:hover { background: var(--brand-2); box-shadow: none }
.btn.go { background: var(--brand); box-shadow: none; border-radius: 16px; min-height: 56px; font-size: 1.05rem; font-weight: 700 }
.btn.go:hover { background: var(--brand-2); box-shadow: none }
.btn.go:active { transform: scale(.97); box-shadow: none }
.btn.go[disabled] { background: #E5E8EB; color: #B0B8C1; box-shadow: none }
.btn.go.retry { background: var(--wrong-ink); box-shadow: none }
.btn.huge { min-height: 60px; font-size: 1.15rem }
.badge { font-weight: 600; border-radius: 8px } .badge.info { background: var(--brand-weak); color: var(--brand) } .badge.muted { background: var(--bg); color: var(--sub) }

/* 카드·면 */
.page-head, .island-hero, .home-hero, .result-card, .level-card, .tool, .tile, .doc, .table-wrap, .plan-form, .type-detail, .list-toggle, .example, .check, .conclusion, .activity li, .feedback li, .files li, .glossary .g, .trouble, .prompt, .fake-gabia, .soon-box { box-shadow: none; border: 0; border-radius: var(--radius) }
.page-head::before, .island-hero::before, .card-hero::before { display: none }
.page-head, .island-hero { padding: 28px 28px; margin-top: 20px }
.page-head h1, .island-hero h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) }
.ph-img, .island-hero img { border-radius: 16px; background: var(--bg) }
.soon-box { border: 0; background: #fff }
.why { background: var(--bg); border: 0 }
.note { background: var(--brand-weak) }
thead th { background: #F9FAFB; color: var(--sub); font-weight: 600 }

/* 코치(마스코트) */
.coach-face { background: none; box-shadow: none; width: 52px; height: 52px; animation: none }
.coach-face img { width: 100%; height: 100%; display: block }
.coach.big .coach-face { width: 64px; height: 64px }
.coach-bubble { border: 0; background: var(--bg); border-radius: 4px 20px 20px 20px; padding: 14px 18px }
.coach-bubble::before { display: none }
.home-hero .coach-bubble, .result-card .coach-bubble { background: var(--brand-weak) }
.coach-small { color: var(--sub2) }

/* 홈 */
.home-hero { background: #fff; padding: 28px; margin: 20px 0 16px }
.overall { height: 8px; background: var(--bg) } .overall i { background: var(--brand); box-shadow: none }
.hero-cta .muted { text-align: center }
.map3d-stage { border-radius: 24px; box-shadow: none; background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #EEF5FF 50%, #DCEBFF 100%) }
.map3d-tag { box-shadow: 0 2px 8px rgba(0, 27, 55, .12); font-weight: 600 }
.map3d-tag.now .n { background: var(--brand) } .map3d-tag .here { background: var(--sun); color: #3D2B00 }
.map3d-tag.on { box-shadow: 0 0 0 3px var(--brand), 0 6px 18px rgba(0, 27, 55, .2) }
.map3d-tag.facility { background: rgba(232, 243, 255, .96); color: var(--navy) }
.map3d-panel { border-top: 0; border-radius: 20px }

/* 단계 경로 */
.node .dot { box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 65%, #0a1a33) }
.node.open .dot { background: #E5E8EB; color: #8B95A1; box-shadow: 0 6px 0 #D1D6DB }
.node.done .dot { background: var(--sun); color: #5A3E00; box-shadow: 0 6px 0 #E0A92E }
.node.now .dot { outline-color: var(--brand-weak) }
.node .label { box-shadow: none; background: #fff }
.start-tag { border: 0; background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(43, 137, 241, .3) }
.start-tag::after { border-top-color: var(--brand) }

/* 레슨 */
body.focus { background: #fff }
.lesson-top { gap: 10px }
.lesson-back { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--sub); font: inherit; font-weight: 600; padding: 8px 10px; border-radius: 10px; cursor: pointer; min-height: 40px; white-space: nowrap }
.lesson-back:hover { background: var(--bg); color: var(--ink) }
.lesson-bar { height: 8px; background: var(--bg) } .lesson-bar i { background: var(--brand); box-shadow: none }
.lesson-x { color: var(--sub2) }
.intro-card, .do-card, .check-box { border: 0; background: var(--bg); border-radius: 20px }
.choice-card { border: 1.5px solid var(--line); border-bottom-width: 1.5px; border-radius: 16px }
.choice-card:hover { background: #F9FAFB }
.choice-card.on, .choice-card.type.on { border-color: var(--brand); background: var(--brand-weak); color: var(--ink) }
.choice-card.right { border-color: var(--brand); background: var(--right-bg); color: var(--right-ink) }
.choice-card .key { border: 0; background: var(--bg); color: var(--sub) }
.choice-card.on .key { background: var(--brand); color: #fff }
.lesson-foot { border-top: 1px solid var(--line) }
.lesson-foot.right { background: var(--right-bg) } .lesson-foot.wrong { background: var(--wrong-bg) }
.finish h2 { color: var(--brand) }
.did-it input { accent-color: var(--brand) }
.field.big input, .field.big textarea { border: 1.5px solid transparent; background: var(--bg) }
.field.big input:focus, .field.big textarea:focus { border-color: var(--brand); background: #fff }
.chips.big .chip { border: 1.5px solid var(--line) }
.chip:has(input:checked) { border-color: var(--brand); background: var(--brand-weak) }

/* 이 화면 안내(모든 쪽 공통) */
.page-top { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; flex-wrap: wrap }
.back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 12px; background: #fff; color: #333D4B; font-weight: 600; text-decoration: none; border: 0; font: inherit; font-size: .95rem; cursor: pointer; min-height: 40px }
.back-btn:hover { background: #E5E8EB }
.crumb-path { color: var(--sub2); font-size: .9rem }
.page-guide { margin: 12px 0 0; background: #fff; border-radius: 20px; padding: 0 }
.page-guide > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; min-height: 56px }
.page-guide > summary::-webkit-details-marker { display: none }
.page-guide .pg-icon { width: 32px; height: 32px; flex: none } .page-guide .pg-icon img { width: 100%; height: 100% }
.page-guide .pg-one { flex: 1; font-weight: 600 } .page-guide .pg-one small { display: block; color: var(--sub2); font-weight: 500; font-size: .85rem }
.page-guide .pg-toggle { color: var(--brand); font-weight: 600; font-size: .9rem; white-space: nowrap }
.page-guide[open] .pg-toggle::after { content: ' 접기' } .page-guide:not([open]) .pg-toggle::after { content: ' 자세히' }
.pg-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; padding: 0 18px 18px }
.pg-body > div { background: var(--bg); border-radius: 14px; padding: 12px 14px }
.pg-body b { display: block; font-size: .82rem; color: var(--brand); margin-bottom: 2px }
.arrived { margin-top: 12px; background: var(--brand-weak); border-radius: 20px; padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start }
.arrived .coach-face { width: 40px; height: 40px }
.arrived p { margin: .1em 0 }
.arrived .row { margin: 8px 0 0 }

/* 나가기 확인 창 */
.exit-dialog { border: 0; border-radius: 24px; padding: 24px; width: min(420px, 92vw); box-shadow: var(--shadow-2) }
.exit-dialog::backdrop { background: rgba(0, 12, 30, .45) }
.exit-dialog h2 { margin: .2em 0 .4em; font-size: 1.25rem }
.exit-dialog p { color: var(--sub); margin: .3em 0 }
.exit-dialog .where-to { background: var(--bg); border-radius: 14px; padding: 12px 14px; margin: 12px 0; color: var(--ink) }
.exit-dialog .btns { display: grid; gap: 8px; margin-top: 14px }
.exit-dialog .btns .btn { width: 100%; min-height: 52px }

/* 스튜디오·연동 */
.seg { display: inline-flex; background: var(--bg); border-radius: 14px; padding: 4px; gap: 4px; flex-wrap: wrap }
.seg button { border: 0; background: none; padding: 10px 16px; border-radius: 10px; font: inherit; font-weight: 600; color: var(--sub); cursor: pointer; min-height: 44px }
.seg button[aria-selected=true] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 27, 55, .1) }
.out-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 18px; align-items: start }
@media (max-width: 860px) { .out-grid { grid-template-columns: 1fr } }
.out-card { background: #fff; border-radius: 20px; padding: 16px 18px }
.out-card h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px }
.out-card .count { margin-left: auto; color: var(--sub2); font-size: .82rem; font-weight: 500 }
.card-canvas { width: 100%; height: auto; border-radius: 16px; background: var(--bg); display: block }
.queue { list-style: none; padding: 0; display: grid; gap: 8px }
.queue li { background: #fff; border-radius: 16px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.queue .q-main { flex: 1; min-width: 200px } .queue .q-main small { display: block; color: var(--sub2) }
.st { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 8px; white-space: nowrap }
.st.draft { background: var(--bg); color: var(--sub) } .st.review { background: #FFF4D6; color: #8A5A00 } .st.approved { background: var(--brand-weak); color: var(--brand) } .st.posted { background: #E3F7EC; color: #0E7A3E }
.level-steps { counter-reset: lv; list-style: none; padding: 0; display: grid; gap: 10px }
.level-steps > li { background: #fff; border-radius: 20px; padding: 18px 20px; position: relative }
.level-steps h3 { margin: 0 0 4px }
.level-steps .tag { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 8px; background: var(--brand-weak); color: var(--brand); margin-bottom: 6px }
.level-steps .tag.later { background: var(--bg); color: var(--sub) }
.option-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px }
.option-cards article { background: #fff; border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px }
.option-cards article.rec { outline: 2px solid var(--brand) }
.option-cards .o-head { display: flex; align-items: center; gap: 8px } .option-cards h3 { margin: 0 }
.option-cards dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: .92rem } .option-cards dt { color: var(--sub2) } .option-cards dd { margin: 0 }
.fact-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; list-style: none; padding: 0 }
.fact-list li { background: #fff; border-radius: 16px; padding: 12px 16px } .fact-list b { display: block; color: var(--sub2); font-size: .82rem; font-weight: 600 }
.danger-note { background: #FFEEEE; color: #A3122A; border-radius: 16px; padding: 14px 16px; font-weight: 600 }
.lesson-plan { margin-top: 14px; background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: 16px 18px }
.lp-title { margin: 0 0 8px; font-weight: 700 }
.lesson-plan ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: lp }
.lesson-plan li { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: start; counter-increment: lp }
.lesson-plan li::before { content: counter(lp); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-weak); color: var(--brand); font-weight: 700; font-size: .85rem }
.lesson-plan li span { color: var(--sub); font-size: .92rem }
.lesson-id { color: var(--sub2) }
.lint-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px }
.lint-list li { padding: 8px 12px; border-radius: 12px; background: var(--bg); font-size: .92rem }
.lint-list li.stop { background: #FFEEEE; color: #A3122A } .lint-list li.check { background: #FFF6E0; color: #7A4F00 } .lint-list li.ok { background: var(--brand-weak); color: var(--right-ink) }
.ai-fill { background: var(--bg); border-radius: 16px; padding: 10px 14px; margin-bottom: 8px }
.ai-fill > summary { min-height: 40px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.out-preview { display: grid; gap: 12px; position: sticky; top: 76px }
@media (max-width: 860px) { .out-preview { position: static } }
.field.small { font-size: .9rem }

/* ── v5: 브랜드 '웹짓기' + 로그인·참여 신청 화면 (듀오링고 마스코트 × 토스 여백) ── */
:root { --brand: #2F6BFF; --brand-2: #2346D8; --brand-weak: #EAF0FF; --navy: #1E2A78; --sun: #FFC53D; --mint: #3DDC97; --go: #2F6BFF; --go-dark: #2346D8; --teal: #2346D8; --pink: #7B61FF; --right-bg: #EAF0FF; --right-ink: #2346D8 }
body.gate { background: #fff; min-height: 100dvh }
.gate-top { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); display: flex; align-items: center; gap: 16px; padding: 14px 20px; max-width: 560px; margin: 0 auto }
.gate-brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none }
.gate-brand strong { font-size: 1.1rem; letter-spacing: -.02em } .gate-brand span { color: var(--sub2); font-size: .85rem }
.gate-progress { flex: 1; height: 10px; border-radius: 99px; background: #EEF1F5; overflow: hidden } .gate-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #6E9BFF); border-radius: 99px; transition: width .6s var(--ease) }
.gate-main { max-width: 560px; margin: 0 auto; padding: 8px 22px 140px }
.gate-hero { text-align: center; padding: 18px 0 8px } .gate-hero.compact { padding-top: 4px }
.gate-hero h1 { font-size: clamp(1.7rem, 6vw, 2.15rem); line-height: 1.3; letter-spacing: -.03em; margin: 14px 0 10px }
.gate-hero .hl { color: var(--brand) }
.gate-lead { color: var(--sub); font-size: 1.04rem; line-height: 1.65; margin: 0 }
.gate-mascot { position: relative; display: inline-block; animation: m-bob 3.2s ease-in-out infinite }
.gate-mascot.oops { animation: m-tilt 2.6s ease-in-out infinite } .gate-mascot.yay { animation: m-jump 1.2s var(--ease) infinite }
.gate-mascot .m-badge { position: absolute; right: -6px; top: 6px; font-size: 2rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,.12)) }
@keyframes m-bob { 50% { transform: translateY(-8px) } } @keyframes m-tilt { 25% { transform: rotate(-6deg) } 75% { transform: rotate(6deg) } } @keyframes m-jump { 40% { transform: translateY(-14px) scale(1.04) } }
@media (prefers-reduced-motion: reduce) { .gate-mascot { animation: none !important } }
.gate-points { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 10px }
.gate-points li { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: var(--bg); border-radius: 18px; padding: 14px 16px }
.gate-points li span { grid-row: span 2; font-size: 1.6rem; width: 48px; height: 48px; display: grid; place-items: center; background: #fff; border-radius: 14px }
.gate-points b { font-size: 1.02rem } .gate-points em { font-style: normal; color: var(--sub); font-size: .92rem }
.gate-how h2 { font-size: 1.15rem; margin: 26px 0 10px } .gate-how ol, .gate-fix { list-style: none; counter-reset: g; padding: 0; margin: 0; display: grid; gap: 8px }
.gate-how li, .gate-fix li { counter-increment: g; position: relative; padding: 12px 14px 12px 52px; border: 1.5px solid var(--line); border-radius: 16px; color: var(--sub); font-size: .95rem }
.gate-how li::before, .gate-fix li::before { content: counter(g); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .9rem }
.gate-how li b, .gate-fix li b { display: block; color: var(--ink); font-size: 1rem }
.gate-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: linear-gradient(transparent, #fff 26%); padding: 28px 22px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 8px; max-width: 560px; margin: 0 auto; text-align: center }
.btn.big { width: 100%; padding: 17px 20px; font-size: 1.08rem; border-radius: 16px; justify-content: center }
.btn.go { box-shadow: 0 4px 0 var(--go-dark) } .btn.go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--go-dark) }
.gate-faq { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 12px } .gate-faq summary { cursor: pointer; font-weight: 700 } .gate-faq dt { font-weight: 700; margin-top: 12px } .gate-faq dd { margin: 4px 0 0; color: var(--sub) }
.gate-seg { display: flex; background: var(--bg); border-radius: 14px; padding: 4px; margin: 22px 0 14px } .gate-seg button { flex: 1; border: 0; background: transparent; padding: 11px 8px; border-radius: 11px; font: inherit; font-weight: 700; color: var(--sub); cursor: pointer }
.gate-seg button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.06) }
.gate-form { display: grid; gap: 12px } .gate-form input, .gate-form textarea { font-size: 1.05rem } .gate-form input[name=code] { font-size: 1.5rem; letter-spacing: .14em; text-align: center; font-weight: 800; padding: 14px }
.gate-form.shake { animation: shake .4s } @keyframes shake { 20%, 60% { transform: translateX(-8px) } 40%, 80% { transform: translateX(8px) } }
.gate-err { background: var(--wrong-bg); color: var(--wrong-ink); border-radius: 12px; padding: 10px 12px; margin: 0; font-weight: 600 }
.gate-note { border-radius: 16px; padding: 14px 16px; margin: 18px 0 } .gate-note.bad { background: #FFF4F4; border: 1.5px solid #FFD6D6 } .gate-note p { margin: 4px 0 0 }
.gate-org { display: flex; align-items: center; gap: 12px; border: 2px solid var(--brand); background: var(--brand-weak); border-radius: 16px; padding: 12px 14px } .gate-org span:nth-child(2) { flex: 1; display: grid } .gate-org em { font-style: normal; color: var(--sub); font-size: .9rem } .go-icon { font-size: 1.6rem }
.gate-status { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px } .gate-status li { display: flex; gap: 12px; align-items: center; background: var(--bg); border-radius: 16px; padding: 14px } .gate-status li span:last-child { display: grid } .gate-status em { font-style: normal; color: var(--sub); font-size: .9rem }
.gs-dot { width: 12px; height: 12px; border-radius: 50%; flex: none } .gs-dot.wait { background: var(--sun); box-shadow: 0 0 0 0 rgba(255,197,61,.6); animation: pulse 1.8s infinite } @keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(255,197,61,0) } 100% { box-shadow: 0 0 0 0 rgba(255,197,61,0) } }
.gate-foot { margin-top: 28px; text-align: center }
.chips { display: flex; flex-wrap: wrap; gap: 8px } .chip { border: 1.5px solid var(--line); border-radius: 99px; padding: 8px 14px; cursor: pointer; font-weight: 600 } .chip:has(input:checked) { border-color: var(--brand); background: var(--brand-weak); color: var(--brand-2) } .chip input { accent-color: var(--brand) }
/* 승인 목록 */
.req-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px } .req-list li { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; flex-wrap: wrap }
.rq-main { flex: 1; min-width: 180px; display: grid } .rq-main em { font-style: normal; color: var(--sub); font-size: .88rem } .rq-main q { color: var(--sub); font-size: .92rem; margin-top: 4px }
.rq-btns { display: flex; gap: 6px }
.invite-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--brand-weak); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px } .invite-card .code { display: block; font-size: 1.6rem; letter-spacing: .12em }
.chips-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px } .chips-list li { background: var(--bg); border-radius: 99px; padding: 4px 6px 4px 12px; display: flex; align-items: center; gap: 4px }
.org-switch { border: 0; background: var(--bg); border-radius: 10px; padding: 6px 8px; font: inherit; font-weight: 700; max-width: 160px }
.who-badge { background: var(--sun); color: var(--navy); border-radius: 99px; font-size: .72rem; font-weight: 800; padding: 1px 7px; margin-left: 4px }
/* 카드뉴스 */
.slides-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px } .slides-strip canvas { flex: none; width: 70%; max-width: 300px; aspect-ratio: 4/5; height: auto; border-radius: 14px; scroll-snap-align: start; box-shadow: 0 6px 18px rgba(25,31,40,.12); cursor: zoom-in }
.slide-count { color: var(--sub); font-size: .9rem }
.tpl-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px } .tpl-picker button { border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 6px 10px 6px 6px; display: flex; gap: 6px; align-items: center; font: inherit; font-size: .88rem; cursor: pointer }
.tpl-picker button.on { border-color: var(--brand) } .tpl-sw { width: 26px; height: 26px; border-radius: 8px; flex: none }
.img-drop { border: 2px dashed var(--line); border-radius: 16px; padding: 16px; text-align: center; color: var(--sub); cursor: pointer; display: block } .img-drop.over { border-color: var(--brand); background: var(--brand-weak) }
.img-thumb { display: flex; gap: 10px; align-items: center; margin-top: 8px } .img-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px }
.brand-text { display: grid; line-height: 1.15 } .brand-text .org-name { color: var(--sub2); font-size: .72rem; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pending-pill { background: var(--sun); color: var(--navy); border-radius: 99px; padding: 3px 10px; font-weight: 800; font-size: .85rem; text-decoration: none; margin-left: 6px }
.org-pick label { display: flex; gap: 10px; padding: 10px 12px; align-items: center } .org-pick label > span:last-child { display: grid; gap: 4px }
/* 강사 해설서 */
.guide-doc h2 { margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--line) }
.guide-toc { background: var(--card); border-radius: var(--radius); padding: 16px 22px; margin: 16px 0 } .guide-toc ol { columns: 2; margin: 0; padding-left: 20px } .guide-toc li { margin: 4px 0 }
.guide-dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px } .guide-dl dt { font-weight: 700; color: var(--sub) } .guide-dl dd { margin: 0 }
.session { background: var(--card); border-radius: var(--radius); padding: 20px 22px; margin: 16px 0; box-shadow: 0 1px 3px rgba(0,0,0,.04) }
.session header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap } .session header h3 { margin: 0; flex: 1 } .s-no { background: var(--brand); color: #fff; font-weight: 800; border-radius: 10px; padding: 4px 10px }
.session h4 { margin: 16px 0 6px; font-size: .95rem; color: var(--brand-2) } .s-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px }
.say li { background: var(--brand-weak); border-radius: 10px; padding: 8px 12px; margin: 6px 0; list-style: none } .say { padding: 0 }
.check-list { list-style: none; padding: 0 } .check-list li { margin: 4px 0 }
.timeline td:first-child { width: 48px; text-align: center; font-weight: 800; color: var(--brand) }
.session-jump { display: flex; gap: 6px; flex-wrap: wrap } .session-jump a { background: var(--card); border-radius: 99px; padding: 6px 14px; text-decoration: none; font-weight: 700 }
@media (max-width: 720px) { .s-grid { grid-template-columns: 1fr } .guide-toc ol { columns: 1 } .guide-dl { grid-template-columns: 1fr } }
@media print { #site-header, #bottom-nav, #site-footer, .page-top, .page-guide, .row .btn, .session-jump { display: none !important } .session { break-inside: avoid; box-shadow: none; border: 1px solid #ddd } body { background: #fff } details { display: block } details > *:not(summary) { display: block } }
.img-thumbs { display: grid; gap: 6px }
.hub-admin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 }
.hub-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px }
.hub-list a { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink); background: #fff; transition: border-color .15s, transform .15s }
.hub-list a:hover, .hub-list a:focus-visible { border-color: var(--brand); transform: translateY(-1px) } .hub-list a.last { border-color: var(--brand); background: var(--brand-weak) }
.hb-main { flex: 1; display: grid } .hb-main b { font-size: 1.05rem } .hb-main em { font-style: normal; color: var(--sub); font-size: .9rem }

/* ═══════════ v6: 메인 화면(공개) · 위 바 개선 · 하단 사업자 정보 · 약관 · 모바일 ═══════════
   참고: Apple·Linear·Stripe·Vercel·Toss 메인 — 큰 한 줄 + 3D 오브젝트 1개 + 행동 1개, 넓은 여백, 스크롤 이야기 */
:root { --lp-ink: #0B1220; --lp-blue: #2F6BFF; --lp-navy: #1E2A78; --lp-max: 1180px }
body.landing, body.legal-page { background: #fff; font-size: 17px }
.landing a, .legal-page a { color: inherit }

/* 위 바 (메인) */
.lp-top { position: sticky; top: 0; z-index: 40; transition: background .25s, box-shadow .25s, backdrop-filter .25s }
.lp-top.solid { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.8) blur(16px); -webkit-backdrop-filter: saturate(1.8) blur(16px); box-shadow: 0 1px 0 rgba(15, 23, 42, .06) }
.lp-bar { max-width: var(--lp-max); margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 24px; min-height: 68px }
.lp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto }
.lp-brand img { border-radius: 10px; display: block }
.lp-brand span { display: flex; flex-direction: column; line-height: 1.15 } .lp-brand strong { font-size: 1.08rem; letter-spacing: -.03em; color: var(--lp-ink) } .lp-brand small { font-size: .74rem; color: #6B7684; font-weight: 600 }
.lp-nav { display: flex; gap: 2px }
.lp-nav a { text-decoration: none; color: #4E5968; font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 10px; transition: background .15s, color .15s }
.lp-nav a:hover, .lp-nav a[aria-current=page] { background: #F2F4F6; color: var(--lp-ink) }
.lp-login { text-decoration: none; font-weight: 600; font-size: .95rem; color: #4E5968; padding: 8px 12px; border-radius: 10px } .lp-login:hover { background: #F2F4F6 }
.lp-login.me { color: var(--lp-blue) }
.lp-start { text-decoration: none; font-weight: 700; font-size: .95rem; color: #fff !important; background: var(--lp-ink); padding: 10px 18px; border-radius: 12px; transition: transform .15s, background .15s; white-space: nowrap }
.lp-start:hover { background: #1f2a3d; transform: translateY(-1px) }

/* 히어로 */
.lp-hero { max-width: var(--lp-max); margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; align-items: center; min-height: min(78vh, 720px); position: relative }
.lp-hero::before { content: ''; position: absolute; inset: -140px -10vw auto auto; width: 70vw; height: 720px; background: radial-gradient(closest-side, rgba(47, 107, 255, .16), transparent 70%), radial-gradient(closest-side at 30% 70%, rgba(61, 220, 151, .10), transparent 70%); z-index: -1; pointer-events: none }
.lp-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: var(--lp-blue); background: #EEF4FF; padding: 6px 12px; border-radius: 999px; margin: 0 0 18px }
.lp-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-blue); box-shadow: 0 0 0 4px rgba(47, 107, 255, .18); animation: pulse 2s infinite }
.lp-hero h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); line-height: 1.08; letter-spacing: -.045em; font-weight: 800; margin: 0 0 20px; color: var(--lp-ink) }
.lp-grad { background: linear-gradient(100deg, #2F6BFF 10%, #6B4DFF 55%, #12B886 95%); -webkit-background-clip: text; background-clip: text; color: transparent }
.lp-lead { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); color: #4E5968; line-height: 1.7; margin: 0 0 28px; max-width: 34em }
.lp-cta { display: flex; gap: 10px; flex-wrap: wrap }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 26px; border-radius: 16px; font-weight: 700; font-size: 1.05rem; text-decoration: none; transition: transform .15s var(--ease), box-shadow .2s, background .15s }
.lp-btn.primary { background: var(--lp-blue); color: #fff !important; box-shadow: 0 10px 30px -8px rgba(47, 107, 255, .65) }
.lp-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(47, 107, 255, .75); background: #275de0 }
.lp-btn.ghost { background: #F2F4F6; color: var(--lp-ink) } .lp-btn.ghost:hover { background: #E5E8EB }
.lp-btn.big { min-height: 64px; padding: 0 34px; font-size: 1.15rem }
.lp-proof { display: flex; gap: 26px; list-style: none; padding: 0; margin: 34px 0 0 }
.lp-proof li { display: flex; flex-direction: column } .lp-proof b { font-size: 1.35rem; letter-spacing: -.03em; color: var(--lp-ink) } .lp-proof span { font-size: .88rem; color: #6B7684 }
.lp-hero-art { position: relative; aspect-ratio: 56 / 52; width: 100%; max-width: 600px; justify-self: center }
.lp-poster, .lp-canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.lp-poster { object-fit: contain; transition: opacity .6s; animation: floaty 6s ease-in-out infinite }
.lp-canvas { opacity: 0; transition: opacity .8s } .lp-hero-art.live .lp-canvas { opacity: 1 } .lp-hero-art.live .lp-poster { opacity: 0 }
.lp-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); padding: 9px 14px; border-radius: 14px; font-size: .9rem; font-weight: 700; color: var(--lp-ink); box-shadow: 0 12px 30px -10px rgba(30, 42, 120, .35); animation: floaty 5s ease-in-out infinite }
.lp-chip.c1 { left: 2%; top: 18% } .lp-chip.c2 { right: 0; top: 46%; animation-delay: -1.6s } .lp-chip.c3 { left: 14%; bottom: 8%; animation-delay: -3.2s }
@keyframes floaty { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

/* 이런 곳에서 */
.lp-band { max-width: var(--lp-max); margin: 0 auto; padding: 10px 24px 30px; text-align: center }
.lp-band p { margin: 0 0 14px; color: #8B95A1; font-weight: 600; font-size: .92rem }
.lp-band ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px }
.lp-band li { display: inline-flex; gap: 6px; align-items: center; padding: 10px 16px; border-radius: 999px; background: #F7F8FA; color: #333D4B; font-weight: 600; font-size: .95rem }

/* 섹션 */
.lp-sec { max-width: var(--lp-max); margin: 0 auto; padding: 88px 24px 20px; scroll-margin-top: 70px }
.lp-eyebrow { margin: 0 0 10px; font-weight: 700; color: var(--lp-blue); font-size: .95rem }
.lp-sec h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.2; letter-spacing: -.04em; margin: 0 0 14px; font-weight: 800; color: var(--lp-ink) }
.lp-sub { color: #6B7684; margin: 0 0 28px; font-size: 1.05rem }
.lp-how { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.lp-how li { background: #F7F8FA; border-radius: 24px; padding: 26px 22px; position: relative; overflow: hidden }
.lp-how .n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--lp-blue); font-weight: 800; box-shadow: 0 4px 12px rgba(15, 23, 42, .06) }
.lp-how h3 { margin: 18px 0 6px; font-size: 1.2rem; letter-spacing: -.02em } .lp-how p { margin: 0; color: #4E5968; font-size: .98rem }

/* 10단계 레일 (옆으로 넘기기) */
.lp-rail { list-style: none; padding: 4px 4px 22px; margin: 0 -4px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch }
.lp-rail li { scroll-snap-align: start; background: #fff; border: 1px solid #EEF0F3; border-radius: 22px; padding: 14px 14px 18px; transition: transform .25s var(--ease), box-shadow .25s; border-top: 4px solid var(--accent, var(--lp-blue)) }
.lp-rail li:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .25) }
.lp-rail img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: #F2F4F6; display: block }
.lp-rail .st { display: inline-block; margin-top: 12px; font-size: .8rem; font-weight: 700; color: var(--accent, var(--lp-blue)) }
.lp-rail h3 { margin: 4px 0 4px; font-size: 1.08rem } .lp-rail p { margin: 0; color: #6B7684; font-size: .92rem; line-height: 1.55 }

/* 도구 (벤토 그리드) */
.lp-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px }
.lp-bento article { background: #F7F8FA; border-radius: 26px; padding: 28px 26px; min-height: 210px; position: relative; overflow: hidden; transition: transform .25s var(--ease) }
.lp-bento article:hover { transform: translateY(-3px) }
.lp-bento .ic { font-size: 1.8rem } .lp-bento h3 { margin: 14px 0 6px; font-size: 1.25rem; letter-spacing: -.02em } .lp-bento p { margin: 0; color: #4E5968 }
.lp-bento .b-map { grid-column: span 2; background: linear-gradient(135deg, #0F1B4D, #2F6BFF); color: #fff } .lp-bento .b-map p { color: #D6E2FF; max-width: 26em }
.b-art { position: absolute; right: 26px; bottom: 22px; display: flex; gap: 10px; align-items: flex-end }
.b-art i { width: 34px; border-radius: 9px; background: rgba(255, 255, 255, .22); display: block; animation: bars 3s ease-in-out infinite }
.b-art i:nth-child(1) { height: 34px } .b-art i:nth-child(2) { height: 56px; animation-delay: -.4s } .b-art i:nth-child(3) { height: 78px; animation-delay: -.8s; background: #FFC53D } .b-art i:nth-child(4) { height: 50px; animation-delay: -1.2s } .b-art i:nth-child(5) { height: 30px; animation-delay: -1.6s }
@keyframes bars { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.lp-bento .b-studio { background: #F1EEFF } .lp-bento .b-quality { background: #FFF1F5 } .lp-bento .b-dns { background: #FFF7E6 } .lp-bento .b-team { background: #E9FBF3 }

/* 리더·강사 */
.lp-for { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.for-card { border-radius: 28px; padding: 34px 30px; background: #F7F8FA }
.for-card h3 { font-size: 1.5rem; letter-spacing: -.03em; margin: 0 0 12px }
.for-card ul { margin: 0; padding-left: 1.1em; color: #4E5968 } .for-card li { margin: 4px 0 }
.for-card.dark { background: var(--lp-ink); color: #fff } .for-card.dark ul { color: #C5CCD6 } .for-card.dark .lp-eyebrow { color: #8FB1FF }

/* FAQ */
.lp-faq { margin-top: 28px; display: grid; gap: 10px; max-width: 820px }
.lp-faq details { background: #F7F8FA; border-radius: 18px; padding: 4px 22px }
.lp-faq summary { cursor: pointer; list-style: none; font-weight: 700; padding: 18px 0; display: flex; justify-content: space-between; gap: 12px }
.lp-faq summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: #8B95A1; transition: transform .2s } .lp-faq details[open] summary::after { transform: rotate(45deg) }
.lp-faq summary::-webkit-details-marker { display: none }
.lp-faq p { margin: 0 0 18px; color: #4E5968 } .lp-faq a { color: var(--lp-blue); text-decoration: underline }

/* 마지막 행동 */
.lp-final { max-width: 880px; margin: 96px auto 80px; padding: 56px 24px; text-align: center; border-radius: 36px; background: radial-gradient(120% 120% at 50% 0%, #EAF1FF, #fff 70%) }
.lp-final h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -.04em; margin: 12px 0 8px } .lp-final p { color: #6B7684 } .lp-final .small a { color: var(--lp-blue) }

/* 스크롤 등장 */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease) } .js-reveal .reveal.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none } .lp-poster, .lp-chip, .b-art i, .lp-kicker .dot { animation: none } }

/* 하단 사업자 정보 (모든 화면 공통) */
.company-foot { background: #F9FAFB; border-top: 1px solid #EEF0F3; color: #6B7684; font-size: .85rem; padding: 34px 24px calc(34px + env(safe-area-inset-bottom)) }
.company-foot .cf-inner { max-width: var(--lp-max); margin: 0 auto }
.cf-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 16px }
.cf-links a { text-decoration: none; color: #4E5968 !important; font-weight: 600 } .cf-links a:hover { text-decoration: underline } .cf-links strong { color: var(--lp-ink) }
.cf-brand { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #333D4B } .cf-brand img { border-radius: 5px }
.cf-info { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 }
.cf-info div { display: flex; gap: 6px } .cf-info dt { color: #8B95A1 } .cf-info dd { margin: 0; color: #4E5968 } .cf-info a { color: inherit !important; text-decoration: none }
.cf-copy { margin: 14px 0 0; color: #8B95A1 }
.company-foot.compact { background: transparent; border: 0; padding-top: 10px; text-align: center } .company-foot.compact .cf-links, .company-foot.compact .cf-info { justify-content: center } .company-foot.compact .cf-brand { justify-content: center }
body:not(.landing):not(.legal-page):not(.gate) .company-foot { padding-bottom: calc(110px + env(safe-area-inset-bottom)) }
@media (min-width: 761px) { body:not(.landing):not(.legal-page):not(.gate) .company-foot { padding-bottom: 34px } }
#site-footer { padding-bottom: 18px }

/* 약관·방침 */
.legal { max-width: 860px; margin: 0 auto; padding: 40px 24px 80px; font-size: 1rem; line-height: 1.8 }
.legal h1 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); letter-spacing: -.035em; margin: 0 0 6px }
.legal-meta { color: #8B95A1; margin: 0 0 24px; font-size: .92rem }
.legal-lead { font-size: 1.05rem; color: #333D4B }
.legal-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0 }
.legal-summary div { background: #F7F8FA; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; line-height: 1.5 } .legal-summary b { color: var(--lp-blue) }
.legal-toc { background: #F7F8FA; border-radius: 18px; padding: 16px 22px; margin: 18px 0 30px }
.legal-toc ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 28px } .legal-toc a { color: #333D4B !important; text-decoration: none } .legal-toc a:hover { color: var(--lp-blue) !important; text-decoration: underline }
.legal section { scroll-margin-top: 84px; padding-top: 6px } .legal h2 { font-size: 1.2rem; margin: 30px 0 10px; letter-spacing: -.02em }
.legal ol, .legal ul { padding-left: 1.3em } .legal li { margin: 3px 0 }
.legal .table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid #EEF0F3 } .legal table { border-collapse: collapse; width: 100%; font-size: .92rem; line-height: 1.55 }
.legal th, .legal td { border-bottom: 1px solid #EEF0F3; padding: 10px 12px; text-align: left; vertical-align: top } .legal th { background: #F9FAFB; white-space: nowrap }
.legal a { color: var(--lp-blue) !important }
.lp-nav.show { display: flex }

/* ── 앱 화면 위 바(로그인 후) 개선: 더 낮고 또렷하게, 현재 위치는 밑줄 대신 알약, 계속하기 버튼 ── */
#site-header { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.8) blur(16px); -webkit-backdrop-filter: saturate(1.8) blur(16px); border-bottom: 1px solid rgba(15, 23, 42, .06) }
.bar { max-width: 1240px; gap: 10px; min-height: 64px }
.brand-text small.org-name { max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600 }
#main-nav { padding: 0; margin: 0 auto 0 8px; gap: 2px; align-items: center }
#main-nav a, .more summary { font-size: .93rem; padding: 8px 12px; min-height: 40px }
#main-nav a[aria-current=page], .more summary[aria-current=page] { background: #EEF4FF; color: var(--lp-blue) }
.bar-cta { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; background: var(--lp-blue); color: #fff; font-weight: 700; font-size: .9rem; padding: 9px 14px; border-radius: 12px; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(47, 107, 255, .6); transition: transform .15s, background .15s }
.bar-cta:hover { background: #275de0; transform: translateY(-1px) } .bar-cta span { font-size: .75rem }
.who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #333D4B }
.who-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #2F6BFF, #6B4DFF); color: #fff; font-size: .85rem; font-weight: 800; flex: none }
.who-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem }
@media (max-width: 1100px) { .who-name { display: none } .lv-name { display: none } }
@media (max-width: 760px) { .bar-cta { display: none } .bar { min-height: 56px; padding: 8px 14px } }

/* ── 반응형: 메인 ── */
@media (max-width: 1000px) { .lp-nav { display: none } .lp-hero { grid-template-columns: 1fr; text-align: left; padding-top: 28px; min-height: 0 } .lp-hero-art { max-width: 460px; order: -1 } .lp-how { grid-template-columns: 1fr 1fr } .lp-bento { grid-template-columns: 1fr 1fr } .lp-bento .b-map { grid-column: span 2 } .legal-summary { grid-template-columns: 1fr 1fr } }
@media (max-width: 640px) {
  .lp-bar { padding: 10px 16px; min-height: 60px; gap: 8px } .lp-brand small { display: none } .lp-login { padding: 8px }
  .lp-hero { padding: 12px 18px 24px; gap: 8px } .lp-hero-art { max-width: 340px } .lp-chip { font-size: .78rem; padding: 7px 10px }
  .lp-hero h1 { font-size: 2.35rem } .lp-hero .pc { display: none } .lp-cta .lp-btn { flex: 1 1 100% } .lp-proof { gap: 18px }
  .lp-sec { padding: 64px 18px 10px } .lp-how { grid-template-columns: 1fr } .lp-bento { grid-template-columns: 1fr } .lp-bento .b-map { grid-column: auto; min-height: 240px }
  .lp-for { grid-template-columns: 1fr } .lp-final { margin: 64px 14px 56px; padding: 40px 18px; border-radius: 28px }
  .lp-rail { grid-auto-columns: 78% }
  .legal { padding: 24px 18px 60px } .legal-toc ol { columns: 1 } .legal-summary { grid-template-columns: 1fr }
  .cf-info { flex-direction: column; gap: 2px }
}

/* ── 모바일 점검 결과 고침: 안내 상자가 길면 하단 바에 가려짐 → 접힌 상태 기본 + 여백 ── */
@media (max-width: 760px) {
  main#main { padding-bottom: 96px }
  .page-guide .pg-one { font-size: .95rem } .page-guide .pg-one small { display: block }
  .home-hero { margin-top: 10px }
  .map3d-stage { height: 64vh; min-height: 380px }
  table { font-size: .9rem }
}

/* 맨 입력칸·선택칸도 같은 모양 (전체 단체 관리 등) */
form.row input:not([type=checkbox]):not([type=radio]):not([type=color]), form.row select, .allow select, main select:not(.org-switch) { font: inherit; font-size: 16px; min-height: 48px; border: 1.5px solid #D9DEE5; border-radius: 12px; padding: 10px 14px; background: #fff; transition: border-color .15s, box-shadow .15s }
form.row input:focus, form.row select:focus, main select:focus { border-color: var(--lp-blue); box-shadow: 0 0 0 4px rgba(47, 107, 255, .14); outline: none }
form.row { align-items: stretch; gap: 8px; flex-wrap: wrap }
form.row .btn.small { min-height: 48px }
/* 가로 넘침 방지: 히어로 뒤 빛 번짐·떠 있는 칩이 화면 밖으로 나가지 않게 */
body.landing { overflow-x: clip } @supports not (overflow: clip) { body.landing { overflow-x: hidden } }
.lp-hero { overflow-x: clip } .lp-hero::before { inset: -140px 0 auto auto; width: min(70vw, 100%) }

/* ═══════════ v6.1 메인 '3D 스테이지': 전면 아이소메트릭 마을 + 떠 있는 유리 패널 (전략 게임식) ═══════════ */
.lp-top.over { position: fixed; left: 0; right: 0 }
.lp-top.over:not(.solid) { background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)) }
.lp-stage { position: relative; height: max(720px, 100vh); min-height: 680px; overflow: hidden; background: radial-gradient(120% 90% at 60% 30%, #F5F8FF 0%, #E7EEFB 60%, #DCE6F7 100%) }
.stage-3d { position: absolute; inset: 0 }
.stage-3d .lp-poster { position: absolute; right: 6%; top: 50%; width: min(48vw, 640px); height: auto; transform: translateY(-46%); animation: none; transition: opacity .6s }
.stage-3d .lp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s }
.stage-3d.live .lp-canvas { opacity: 1 } .stage-3d.live .lp-poster { opacity: 0 }
.stage-pins { position: absolute; inset: 0; pointer-events: none; z-index: 1 }
.pin { position: absolute; left: 0; top: 0; pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; color: #1d2433; background: rgba(255, 255, 255, .92); padding: 4px 10px 4px 4px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(30, 42, 120, .35); white-space: nowrap; transition: box-shadow .2s, opacity .3s; will-change: transform }
.pin b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #EEF2F8; font-size: .72rem }
.pin.done b { background: #12B886; color: #fff } .pin.now b { background: var(--lp-blue); color: #fff } .pin.next { color: #6B7684 }
.pin.on { box-shadow: 0 0 0 3px #FFC53D, 0 8px 20px -6px rgba(30, 42, 120, .45) }
.stage-3d:not(.live) .stage-pins { display: none }

.stage-ui { position: absolute; inset: 84px 24px 24px; pointer-events: none; display: grid; grid-template-columns: minmax(380px, 520px) 1fr minmax(280px, 330px); grid-template-rows: auto 1fr auto; gap: 16px; max-width: 1480px; margin: 0 auto }
.stage-ui > * { pointer-events: auto }
.glass { background: rgba(255, 255, 255, .72); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border: 1px solid rgba(255, 255, 255, .75); border-radius: 22px; box-shadow: 0 10px 30px rgba(20, 35, 80, .08), 0 1px 0 rgba(255, 255, 255, .8) inset }
.glass.strong { background: rgba(255, 255, 255, .84) }

.g-kpis { grid-column: 1 / 3; grid-row: 1; list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; align-self: start; flex-wrap: wrap }
.g-kpis li { display: flex; gap: 10px; align-items: center; padding: 12px 16px; min-width: 170px }
.k-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #EEF4FF; font-size: 1.15rem; flex: none }
.g-kpis span span { display: flex; flex-direction: column; line-height: 1.25 }
.g-kpis small { font-size: .74rem; color: #6B7684; font-weight: 600 } .g-kpis b { font-size: 1.35rem; letter-spacing: -.03em; color: #0B1220 } .g-kpis b em { font-style: normal; font-size: .8rem; font-weight: 700; color: #4E5968; margin-left: 2px } .g-kpis i { font-style: normal; font-size: .72rem; color: #12B886; font-weight: 700 }

.g-hero { grid-column: 1; grid-row: 2; align-self: center; padding: 30px 30px 28px }
.g-hero h1 { font-size: clamp(2.3rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.1; letter-spacing: -.045em; font-weight: 800; margin: 0 0 14px; color: #0B1220 }
.g-hero .lp-lead { font-size: 1.06rem; margin: 0 0 22px }
.g-hero .lp-kicker { margin-bottom: 14px }

.g-detail { grid-column: 3; grid-row: 1 / 3; align-self: start; padding: 18px 20px 16px; border-top: 4px solid var(--lp-blue) }
.g-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; font-size: .82rem; color: #6B7684; font-weight: 700 }
.g-badge { padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 800; background: #EEF4FF; color: var(--lp-blue) } .g-badge.ok { background: #E6F8F0; color: #0C8A5B } .g-badge.wait { background: #F2F4F6; color: #6B7684 }
.g-detail h2 { font-size: 1.3rem; letter-spacing: -.03em; margin: 2px 0 6px }
.g-sum { margin: 0 0 12px; color: #4E5968; font-size: .93rem; line-height: 1.55; min-height: 4.6em }
.g-meta { margin: 0; display: grid; gap: 6px } .g-meta div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; background: rgba(242, 244, 246, .8); border-radius: 12px; font-size: .86rem } .g-meta dt { color: #6B7684 } .g-meta dd { margin: 0; font-weight: 700; text-align: right }
.g-tip { margin: 10px 0 0; font-size: .78rem; color: #8B95A1 }

.g-track { grid-column: 1 / 3; grid-row: 3; align-self: end; justify-self: start; padding: 14px 18px 16px; width: min(560px, 100%) }
.g-title { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font-size: .9rem }
.g-live { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 800; color: var(--lp-blue); background: #EEF4FF; padding: 3px 10px; border-radius: 999px }
.g-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-blue); animation: pulse 1.6s infinite }
.g-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative }
.g-steps li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .76rem; font-weight: 700; color: #8B95A1; position: relative; z-index: 1 }
.g-steps li span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #D9DEE5; font-size: .75rem }
.g-steps li.done { color: #0C8A5B } .g-steps li.done span { background: #12B886; border-color: #12B886; color: #fff }
.g-steps li.now { color: var(--lp-blue) } .g-steps li.now span { background: var(--lp-blue); border-color: var(--lp-blue); color: #fff; box-shadow: 0 0 0 5px rgba(47, 107, 255, .18) }
.g-steps::before { content: ''; position: absolute; left: 10%; right: 10%; top: 14px; height: 2px; background: linear-gradient(90deg, #12B886 0 45%, #D9DEE5 45%) }
.g-bar { display: none }

.g-table { grid-column: 3; grid-row: 3; align-self: end; padding: 12px 14px 8px }
.g-tabs { display: flex; gap: 6px; margin: 0 0 6px; font-size: .78rem } .g-tabs b, .g-tabs span { padding: 4px 10px; border-radius: 999px } .g-tabs b { background: #0B1220; color: #fff } .g-tabs span { color: #6B7684; background: rgba(242, 244, 246, .9) }
.g-table table { width: 100%; border-collapse: collapse; font-size: .82rem } .g-table th, .g-table td { padding: 7px 4px; border-bottom: 1px solid rgba(15, 23, 42, .06); text-align: left } .g-table tr:last-child th, .g-table tr:last-child td { border: 0 } .g-table th { color: #4E5968; font-weight: 700; background: none }
.t { font-style: normal; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px } .t.ok { background: #E6F8F0; color: #0C8A5B } .t.go { background: #EEF4FF; color: var(--lp-blue) } .t.wait { background: #FFF4DB; color: #9A6700 }

/* 비교표·평생교육 과정 */
.lp-compare { margin-top: 30px; border-radius: 24px; border: 1px solid #EEF0F3; overflow-x: auto; background: #fff }
.lp-compare table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .96rem }
.lp-compare th, .lp-compare td { padding: 16px 18px; border-bottom: 1px solid #F2F4F6; text-align: left; vertical-align: top }
.lp-compare thead th { font-size: .9rem; color: #6B7684; background: #FAFBFC } .lp-compare tbody th { color: #333D4B; white-space: nowrap; background: #FAFBFC; width: 9em }
.lp-compare .us { background: #F3F7FF; color: #0B1220; font-weight: 700 } .lp-compare thead .us { color: var(--lp-blue); font-size: 1rem }
.lp-compare tbody tr:last-child th, .lp-compare tbody tr:last-child td { border: 0 }
.lp-note { margin-top: 10px }
.lp-course .course-in { border-radius: 32px; padding: 44px 40px; background: linear-gradient(135deg, #0F1B4D 0%, #1E2A78 45%, #2F6BFF 100%); color: #fff; position: relative; overflow: hidden }
.lp-course .course-in::after { content: ''; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 197, 61, .35), transparent) }
.lp-course h2 { color: #fff } .lp-course .lp-eyebrow { color: #A9C2FF } .lp-course p { color: #D6E2FF; max-width: 40em }
.course-weeks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; z-index: 1 }
.course-weeks li { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 4px } .course-weeks b { font-size: 1.1rem } .course-weeks span { color: #D6E2FF; font-size: .92rem }

/* 반응형: 스테이지 */
@media (max-width: 1180px) { .stage-ui { grid-template-columns: minmax(340px, 460px) 1fr minmax(250px, 290px) } .g-table { display: none } .g-kpis li:nth-child(3) { display: none } }
@media (max-width: 900px) {
  .lp-stage { height: auto; min-height: 0; overflow: visible }
  .stage-3d { position: relative; height: 56vh; min-height: 360px; max-height: 520px; margin-top: 60px }
  .stage-3d .lp-poster { right: 50%; transform: translate(50%, -50%); width: min(86vw, 460px) }
  .stage-ui { position: relative; inset: auto; padding: 0 16px 24px; display: flex; flex-direction: column; gap: 12px; margin-top: -40px }
  .g-hero { order: -1; padding: 24px 20px } .g-kpis { order: 1 } .g-detail { order: 2 } .g-track { order: 3; width: 100% } .g-table { display: none }
  .g-kpis { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none } .g-kpis::-webkit-scrollbar { display: none } .g-kpis li { min-width: 160px; flex: none } .g-kpis li:nth-child(3) { display: flex }
  .g-sum { min-height: 0 }
  .course-weeks { grid-template-columns: 1fr 1fr } .lp-course .course-in { padding: 32px 22px }
}
@media (max-width: 640px) { .g-hero h1 { font-size: 2.2rem } .pin span { display: none } .pin { padding: 4px } .lp-compare th, .lp-compare td { padding: 12px } }
/* v6.1 고침: 메인은 전체 폭, 이름표는 패널 아래, 숫자 카드 정렬 */
body.landing main#main { max-width: none; padding: 0; margin: 0 }
.stage-ui { z-index: 2 }
.g-kpis li > span:last-child { display: flex; flex-direction: column; line-height: 1.25 }
.g-kpis b { display: flex; align-items: baseline; gap: 2px }
@media (max-width: 900px) {
  .lp-top.over { position: sticky; background: rgba(255, 255, 255, .9) }
  .lp-stage { background: linear-gradient(180deg, #E9EFF9 0%, #E9EFF9 60%, #fff 100%) }
  .stage-3d { margin-top: 0 }
}
@media (max-width: 640px) { .lp-login { display: none } .lp-bar { gap: 6px } .lp-start { padding: 9px 14px } }
.foundation { background: linear-gradient(135deg, #FFFBF0, #fff); border: 1px solid #F3E3B5; border-radius: 22px; padding: 6px 22px 18px; margin-top: 18px }
.foundation h2 { margin-top: 1em } .foundation th { white-space: nowrap; width: 8em }
@media (max-width: 900px) {
  .lp-stage, .stage-3d { overflow: hidden; max-width: 100vw }
  .stage-ui { max-width: 100vw; min-width: 0 } .stage-ui > * { min-width: 0; max-width: 100% }
  .g-kpis { width: 100% } .stage-3d .lp-poster { max-width: 86vw }
}

/* ══ v7 메인: 스크롤로 짓는 3D 마을 (화면 전체 3D + 떠 있는 유리 카드 + 왼쪽 목차 막대) ══ */
body.landing.v7 { background: #E9EFF9 }
.v7 .world { position: fixed; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 62% 28%, #F7F9FF 0%, #E8EEFA 58%, #DCE5F6 100%) }
.v7 .world .lp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s }
.v7 .world.live .lp-canvas { opacity: 1 }
.v7 .world .lp-poster { position: absolute; right: 8%; top: 50%; width: min(46vw, 600px); height: auto; transform: translateY(-50%); transition: opacity .8s }
.v7 .world.live .lp-poster { opacity: 0; pointer-events: none }
.world-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2 }
.w-tag { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px -6px rgba(30, 42, 120, .35); font-size: .78rem; font-weight: 700; color: #1d2433; white-space: nowrap; transition: opacity .3s; will-change: transform }
.w-tag b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--lp-blue); color: #fff; font-size: .72rem }
.w-tag.facility { padding-left: 8px } .w-tag i { font-style: normal }
.v7 .story { position: relative; z-index: 2; pointer-events: none }
.v7 .ch { min-height: 100vh; display: flex; align-items: center; padding: 96px max(24px, calc((100vw - 1240px) / 2)) 48px calc(max(24px, (100vw - 1240px) / 2) + 96px) }
.v7 .ch.ch-tall { min-height: 260vh; align-items: flex-start }
.v7 .ch.ch-tall .ch-card { position: sticky; top: 110px }
.v7 .ch-card { pointer-events: auto; width: min(460px, 100%); padding: 30px 30px 28px; border-radius: 28px; opacity: .5; transform: translateY(18px) scale(.985); transition: opacity .5s var(--ease), transform .6s var(--ease) }
.v7 .ch.on .ch-card, .v7 .ch-hero .ch-card { opacity: 1; transform: none }
.v7 .ch-card.center { text-align: center; margin: 0 auto } .v7 .ch-final { justify-content: center; padding-left: 24px }
.v7 .ch-card h1 { font-size: clamp(2.4rem, 1.5rem + 2.8vw, 3.8rem); line-height: 1.08; letter-spacing: -.045em; font-weight: 800; margin: 14px 0 14px; color: #0B1220 }
.v7 .ch-card h2 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.7rem); line-height: 1.15; letter-spacing: -.04em; font-weight: 800; margin: 4px 0 14px; color: #0B1220 }
.v7 .ch-card > p { color: #4E5968; font-size: 1.06rem; line-height: 1.7; margin: 0 0 18px }
.v7 .ch-no { margin: 0; font-weight: 800; font-size: .9rem; color: var(--lp-blue); letter-spacing: .08em }
.ch-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 } .ch-chips li { background: #EEF4FF; color: #1E2A78; font-weight: 700; padding: 8px 14px; border-radius: 999px; font-size: .92rem }
.ch-prompt { margin: 0; background: #0B1220; color: #E6ECF8; border-radius: 18px; padding: 16px 18px; font-size: .92rem; line-height: 1.6 } .ch-prompt span { font-size: .75rem; font-weight: 700; color: #8FB2FF } .ch-prompt p { margin: 6px 0 0 }
.ch-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px }
.ch-steps li { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: .94rem; color: #8B95A1; transition: color .3s }
.ch-steps li b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #EEF0F3; color: #6B7684; font-size: .75rem; transition: background .3s, color .3s }
.ch-steps li.on { color: #0B1220 } .ch-steps li.on b { background: var(--c, var(--lp-blue)); color: #fff }
.ch-team, .ch-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.ch-team li, .ch-tools li { background: rgba(247, 248, 250, .9); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px }
.ch-team b, .ch-tools b { font-size: .98rem } .ch-team span, .ch-tools small { color: #6B7684; font-size: .85rem } .ch-tools li > span { font-size: 1.4rem }
.ch-weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px } .ch-weeks li { display: flex; gap: 12px; align-items: baseline; background: rgba(247, 248, 250, .9); border-radius: 14px; padding: 10px 14px } .ch-weeks b { color: var(--lp-blue); min-width: 3.4em }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); margin: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: #4E5968 }
.scroll-cue span { width: 24px; height: 38px; border: 2px solid #8B95A1; border-radius: 14px; position: relative } .scroll-cue span::after { content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #4E5968; animation: cue 1.6s infinite }
@keyframes cue { 0% { transform: translateY(0); opacity: 1 } 80% { transform: translateY(12px); opacity: 0 } 100% { opacity: 0 } }
.v7 .ch-hero { position: relative }
.v7 #company-footer { position: relative; z-index: 2 }
.v7 .lp-top.over { z-index: 40 }

/* 토스식 왼쪽 목차 막대 (메인·해설서 공용) */
.toc-rail { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 30 }
.toc-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px }
.toc-rail a { display: flex; align-items: center; gap: 10px; padding: 5px 0; text-decoration: none; color: #8B95A1; font-size: .82rem; font-weight: 600 }
.toc-rail i { display: block; width: 14px; height: 2px; border-radius: 2px; background: #C9D0DA; transition: width .25s var(--ease), background .25s }
.toc-rail span { opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; white-space: nowrap }
.toc-rail:hover span, .toc-rail:focus-within span, .toc-rail a.on span { opacity: 1; transform: none }
.toc-rail a.on { color: #0B1220 } .toc-rail a.on i { width: 26px; background: #0B1220 }
.toc-rail a:hover i { width: 22px; background: #4E5968 }

@media (max-width: 900px), (max-aspect-ratio: 23/20) {
  .v7 .ch { padding: 0 16px 28px; align-items: flex-end; min-height: 100svh }
  .v7 .ch-hero { padding-top: 0 }
  .v7 .ch.ch-tall { min-height: 220svh } .v7 .ch.ch-tall .ch-card { top: auto; bottom: 20px; margin-top: 55svh }
  .v7 .ch-card { width: 100%; padding: 22px 20px; border-radius: 24px }
  .v7 .ch-card h1 { font-size: 2.3rem } .v7 .ch-card h2 { font-size: 1.85rem }
  .v7 .world .lp-poster { right: 50%; top: 32%; transform: translate(50%, -50%); width: min(86vw, 460px) }
  .toc-rail { display: none } .scroll-cue { display: none }
  .ch-steps { grid-template-columns: 1fr 1fr 1fr } .ch-steps li { font-size: .85rem }
}
@media (prefers-reduced-motion: reduce) { .v7 .ch-card { transition: none; opacity: 1; transform: none } .scroll-cue span::after { animation: none } }

/* v7 진행 지도: 메인과 같은 3D 마을 */
.v7map .map3d-stage { height: clamp(460px, 72vh, 760px); background: radial-gradient(120% 90% at 55% 25%, #F7F9FF 0%, #E8EEFA 60%, #DCE5F6 100%); box-shadow: 0 30px 60px -30px rgba(30, 42, 120, .35), inset 0 0 0 1px rgba(255, 255, 255, .7) }
.v7map .map3d-stage .lp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s; touch-action: none }
.v7map .map3d-stage.live .lp-canvas { opacity: 1 } .v7map.ready .map3d-loading { display: none }
.v7map .w-tag { pointer-events: auto; border: 0; cursor: pointer; font-family: inherit }
.v7map .w-tag.done b { background: #12B886 } .v7map .w-tag.soon { color: #8B95A1 } .v7map .w-tag.soon b, .v7map .w-tag.ready b { background: #C9D0DA }
.v7map .w-tag.now b { background: var(--lp-blue) } .v7map .w-tag .here { font-style: normal; background: #FFC53D; color: #1b1300; border-radius: 999px; padding: 0 7px; font-size: .7rem }
.v7map .w-tag.on { box-shadow: 0 0 0 3px #FFC53D, 0 8px 20px -6px rgba(30, 42, 120, .45) }
.v7map .w-tag.pulse { animation: pulse 1.6s var(--ease) 3 }
.v7map .map3d-panel { z-index: 3; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(255, 255, 255, .9); border-radius: 22px; border-top: 4px solid var(--accent, var(--lp-blue)) }
.v7map .map3d-legend { position: absolute; left: 14px; bottom: 12px; z-index: 3; margin: 0; background: rgba(255, 255, 255, .82); backdrop-filter: blur(10px); border-radius: 14px; padding: 8px 12px; font-size: .78rem }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px } .lg.done { background: #12B886 } .lg.now { background: var(--lp-blue) } .lg.ready { background: #C9D0DA } .lg.soon { background: #E5E8EB; outline: 1px dashed #9aa6b8 }
@media (max-width: 640px) { .v7map .map3d-stage { height: 62svh } .v7map .map3d-legend { display: none } }

/* v7 진행 지도: 화면 전체 3D + 게임식 유리 패널(HUD) */
body.full3d { background: #E6EDF9; overflow-x: clip }
body.full3d main#main { max-width: none; padding: 0; margin: 0 }
body.full3d #site-header { position: fixed; left: 0; right: 0; background: rgba(255, 255, 255, .6) }
body.full3d .v7map { margin: 0; position: relative; height: 100svh; min-height: 560px }
body.full3d .v7map .map3d-stage { position: absolute; inset: 0; height: auto; border-radius: 0; box-shadow: none }
body.full3d .v7map .world-tags { z-index: 2 }
.hud { position: absolute; inset: 78px 20px 20px; pointer-events: none; z-index: 3; display: grid; grid-template-columns: minmax(300px, 380px) 1fr minmax(280px, 340px); grid-template-rows: 1fr auto; gap: 16px }
.hud > * { pointer-events: auto }
.hud-next { grid-column: 1; grid-row: 1; align-self: start; padding: 22px 22px 18px; border-radius: 24px }
.hud-next h1 { font-size: 1.6rem; letter-spacing: -.035em; margin: 4px 0 10px; line-height: 1.25 }
.hud-eyebrow { margin: 0; font-size: .8rem; font-weight: 700; color: #4E5968 }
.hud-mission { display: flex; flex-direction: column; gap: 2px; background: rgba(238, 244, 255, .9); border-radius: 16px; padding: 12px 14px; margin: 0 0 14px }
.hud-mission span { font-size: .8rem; font-weight: 700; color: var(--lp-blue) } .hud-mission b { font-size: 1.08rem } .hud-mission small { color: #6B7684 }
.hud-next .btn.huge { width: 100%; min-height: 56px } .hud-next .overall { margin-top: 12px }
.hud-track { grid-column: 1 / 3; grid-row: 2; align-self: end; justify-self: start; list-style: none; margin: 0; padding: 10px 12px; border-radius: 20px; display: flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none }
.hud-track::-webkit-scrollbar { display: none }
.hud-track button { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; font: inherit; cursor: pointer; padding: 4px 6px; border-radius: 12px; min-width: 64px; color: #8B95A1 }
.hud-track button:hover { background: rgba(238, 244, 255, .9) }
.hud-track b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #E5E8EB; color: #6B7684; font-size: .82rem }
.hud-track span { font-size: .72rem; font-weight: 700; white-space: nowrap }
.hud-track .done b { background: #12B886; color: #fff } .hud-track .done span { color: #0B1220 }
.hud-track .now b { background: var(--lp-blue); color: #fff; box-shadow: 0 0 0 4px rgba(47, 107, 255, .2) } .hud-track .now span { color: var(--lp-blue) }
.hud-tools { grid-column: 3; grid-row: 2; align-self: end; justify-self: end; display: flex; gap: 4px; padding: 6px; border-radius: 16px }
.hud-tools button, .hud-tools a { border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 700; color: #333D4B; padding: 9px 12px; border-radius: 12px; cursor: pointer; text-decoration: none; white-space: nowrap }
.hud-tools button:hover, .hud-tools a:hover { background: #F2F4F6 }
.v7map .hud .map3d-panel { position: static; grid-column: 3; grid-row: 1; align-self: start; width: auto; max-height: calc(100svh - 200px); padding: 16px 18px 18px }
.hud-hint { position: absolute; left: 50%; top: 0; transform: translateX(-50%); margin: 0; font-size: .8rem; color: #4E5968; background: rgba(255, 255, 255, .7); padding: 4px 12px; border-radius: 999px; pointer-events: none }
body.full3d #journey-map, body.full3d #journey-map ~ * { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px }
body.full3d #journey-map { margin-top: 20px }
@media (max-width: 900px) {
  body.full3d .v7map { height: auto; min-height: 0 }
  body.full3d .v7map .map3d-stage { position: relative; height: 58svh; min-height: 380px; margin-top: 60px }
  .hud { position: relative; inset: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 12px; margin-top: -24px }
  .hud-next { order: -1 } .hud-track { width: 100% } .hud-tools { justify-content: center; width: 100% } .hud-hint { display: none }
  .v7map .hud .map3d-panel { position: fixed; left: 10px; right: 10px; bottom: 76px; max-height: 60svh; z-index: 30 }
}
@media (max-width: 900px) {
  .hud { display: flex !important; width: 100%; box-sizing: border-box } .hud > * { width: 100%; box-sizing: border-box }
  body.full3d .v7map .map3d-stage { height: 52svh; min-height: 340px; margin-top: 56px }
  .hud-next h1 { font-size: 1.35rem } .hud-mission { margin-bottom: 10px }
}

/* 해설서: 왼쪽 목차 막대 + 근본 철학 접기 */
.guide-rail { left: max(14px, calc((100vw - 1240px) / 2 - 150px)) }
.guide-rail span { opacity: 1; transform: none } .guide-rail a { font-size: .8rem }
@media (max-width: 1580px) { .guide-rail span { opacity: 0 } .guide-rail:hover span, .guide-rail a.on span { opacity: 1 } .guide-rail:hover { background: rgba(255, 255, 255, .94); box-shadow: var(--shadow-2); border-radius: 14px; padding: 8px 12px 8px 8px; margin-left: -8px } }
@media (max-width: 1100px) { .guide-rail { display: none } }
details.fold { border: 1px solid #F1E5C5; background: #FFFDF6; border-radius: 22px; margin: 24px 0; padding: 0 }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; font-weight: 800; font-size: 1.1rem }
details.fold > summary::-webkit-details-marker { display: none }
.fold-hint b { font-size: .85rem; color: #6B7684; background: #F2F4F6; padding: 6px 12px; border-radius: 999px } .fold-hint .off { display: none }
details.fold[open] .fold-hint .on { display: none } details.fold[open] .fold-hint .off { display: inline }
.fold-body { padding: 0 20px 18px }
@media print { details.fold:not([open]) { display: none } .toc-rail { display: none } }
/* 중간 폭(900~1240): 위 바 한 줄 유지, HUD 좁게 */
@media (max-width: 1240px) { .bar { flex-wrap: nowrap; gap: 8px } #main-nav a { padding-left: 8px; padding-right: 8px; font-size: .9rem } .level-chip .lv-bar, .level-chip .lv-name { display: none } .who-badge { display: none } }
@media (max-width: 1100px) and (min-width: 901px) { #main-nav > a > span[aria-hidden] { display: none } .hud { grid-template-columns: minmax(270px, 320px) 1fr minmax(250px, 300px) } .hud-track button { min-width: 52px } .hud-track span { font-size: .66rem } .hud-tools button, .hud-tools a { padding: 8px 9px; font-size: .82rem } }

/* ═════════ 전자계약 (v8) ═════════ */
.contracts .c-legal-note { background: #FFF8E6; border: 1px solid #F5D98B; border-radius: 12px; padding: 10px 14px; font-size: 14px }
.c-status { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; vertical-align: middle; background: #EEF1F6; color: #4E5968 }
.c-status.s-draft { background: var(--wait-bg); color: var(--wait) } .c-status.s-sent { background: #EAF0FF; color: #2346D8 }
.c-status.s-completed { background: var(--ok-bg); color: var(--ok) } .c-status.s-declined, .c-status.s-void, .c-status.s-expired { background: var(--bad-bg); color: var(--bad) }
.c-alert { border-radius: 14px; padding: 14px 18px; margin: 14px 0; background: #EAF0FF; border: 1px solid #C9D6FF }
.c-alert.ok { background: var(--ok-bg); border-color: #b5e3c7 } .c-alert.bad { background: var(--bad-bg); border-color: #f5c2bd }
.c-alert h2 { font-size: 17px; margin: 0 0 6px }
.c-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 14px 0 }
.c-tpl { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .15s var(--ease), box-shadow .15s }
.c-tpl:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,40,90,.10); border-color: #C9D6FF }
.c-tpl-emoji { font-size: 28px } .c-tpl strong { font-size: 16px } .c-tpl small { color: var(--brand); font-weight: 600 } .c-tpl-who { font-size: 13px; color: var(--sub) }
.c-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: 12px; overflow: hidden }
.c-table th, .c-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top }
.c-table th { background: #F5F7FB; font-weight: 700; font-size: 13px }
.c-structure { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 10px 0 }
.c-structure summary { cursor: pointer; font-weight: 700 } .c-structure .c-table { margin: 12px 0 } .c-role-notes { font-size: 14px; color: var(--sub) }
.c-howto { background: #F5F8FF; border-radius: 14px; padding: 12px 16px; margin: 12px 0 } .c-howto summary { cursor: pointer; font-weight: 700 }
.c-split { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; gap: 20px; align-items: start }
.c-form fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; background: #fff }
.c-form legend { font-weight: 800; padding: 0 6px }
.c-field { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 } .c-field[hidden] { display: none }
.c-field label { font-weight: 600; font-size: 14px }
.c-field input, .c-field select, .c-field textarea, .c-ov textarea, .c-link, .c-gate input, .c-sign input, .c-decline textarea { font: inherit; padding: 9px 11px; border: 1px solid #CDD5E3; border-radius: 10px; background: #fff; width: 100%; box-sizing: border-box }
.c-field input:focus, .c-field select:focus { outline: 3px solid #BFD0FF; border-color: var(--brand) }
.c-hint { color: var(--sub); font-size: 12.5px } .c-money { color: var(--brand); font-size: 12.5px; font-weight: 600 }
.c-adv { margin: 12px 0 } .c-adv summary { cursor: pointer; font-weight: 700 } .c-ov { margin: 10px 0 } .c-ov > label { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; gap: 8px } .c-off { font-weight: 400 }
.c-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: sticky; bottom: 0; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); padding: 12px 14px; z-index: 3; border-radius: 14px 14px 0 0; box-shadow: 0 -6px 20px rgba(20,40,90,.08) }
.c-missing { flex-basis: 100%; margin: 0; font-weight: 700; color: var(--wait) } .c-missing.ok { color: var(--ok) }
.c-days { font-size: 14px }
.c-preview { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; border-radius: 16px; background: #E9EDF4; padding: 14px }
.c-preview-label { margin: 0 0 8px; font-weight: 700 }
/* 계약서 본문 — 종이 느낌 */
.c-doc { background: #fff; color: #111; max-width: 800px; margin: 0 auto; padding: 48px 56px; border-radius: 4px; box-shadow: 0 2px 14px rgba(0,0,0,.08); font-family: 'Pretendard', 'Noto Serif KR', 'Nanum Myeongjo', serif; line-height: 1.75; position: relative }
.c-doc-head { text-align: center; margin-bottom: 24px } .c-doc-head h1 { font-size: 26px; letter-spacing: .3em; margin: 6px 0 0 }
.c-doc-no { font-size: 12px; color: #666; text-align: right; margin: 0 }
.c-pre { margin: 0 0 18px } .c-clause h2 { font-size: 15.5px; margin: 18px 0 4px } .c-body { white-space: pre-wrap; margin: 0; font-size: 15px }
.c-note { margin: 6px 0 0; font-size: 13.5px; background: #F5F8FF; border-radius: 10px; padding: 6px 12px; font-family: system-ui, sans-serif }
.c-note summary { cursor: pointer; color: var(--brand); font-weight: 600 } .c-note p { margin: 6px 0 2px; color: #333 }
.c-closing { margin-top: 26px } .c-date { text-align: center; font-weight: 700; margin: 18px 0 }
.c-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px }
.c-party { border-top: 2px solid #111; padding-top: 8px } .c-party h3 { margin: 0 0 6px; font-size: 16px }
.c-party dl { display: grid; grid-template-columns: 76px 1fr; gap: 2px 8px; margin: 0; font-size: 13.5px } .c-party dt { color: #555 } .c-party dd { margin: 0 }
.c-sig { position: relative; min-height: 86px; border: 1px dashed #bbb; border-radius: 6px; margin-top: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px }
.c-sig img { max-height: 70px; max-width: 100% } .c-sig .c-seal { position: absolute; right: 10px; top: 6px; max-height: 64px; opacity: .9 } .c-sig small { font-size: 11px; color: #555 } .c-sig-empty { color: #999; font-size: 13px }
.c-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 14px 0; flex-wrap: wrap; counter-reset: s }
.c-steps li { flex: 1 1 120px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--sub); counter-increment: s }
.c-steps li::before { content: counter(s) '. ' } .c-steps li.done { background: var(--ok-bg); color: var(--ok); border-color: #b5e3c7 } .c-steps li.done::before { content: '✓ ' } .c-steps li.now { background: #EAF0FF; color: #2346D8; border-color: #9DB4FF; box-shadow: 0 0 0 3px #DCE5FF }
.c-send, .c-us-sign, .c-done, .c-sign-box, .c-audit { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 14px 0 }
.c-secret { background: #FFF8E6; border-radius: 12px; padding: 10px 14px } .c-code { font-size: 26px; letter-spacing: .25em; font-weight: 800; background: #fff; padding: 2px 10px; border-radius: 8px }
.c-link { max-width: 560px; font-family: ui-monospace, monospace; font-size: 13px } .c-hash { font-size: 12px; background: #EEF1F6; padding: 1px 6px; border-radius: 6px }
.c-tools { margin: 12px 0 } .btn.danger { color: var(--bad) }
.c-ev-d { color: var(--sub); word-break: break-all }
/* 서명판 */
.c-sign { display: flex; flex-direction: column; gap: 12px; max-width: 640px }
.c-consents { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px } .c-consents legend { font-weight: 800; margin-bottom: 6px }
.c-consents label { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; padding: 10px 12px; border-radius: 12px; background: #F5F8FF; cursor: pointer } .c-consents input { width: 20px; height: 20px; margin-top: 2px; flex: none }
.c-name { display: flex; flex-direction: column; gap: 4px; font-weight: 600 }
.c-pad-wrap p { margin: 0 0 6px; font-weight: 600 } .c-pad { width: 100%; border: 2px dashed #9DB4FF; border-radius: 14px; background: #fff linear-gradient(transparent calc(100% - 38px), #DCE5FF calc(100% - 38px), #DCE5FF calc(100% - 36px), transparent calc(100% - 36px)); cursor: crosshair; display: block }
.c-sign-err { color: var(--bad); font-weight: 700; min-height: 1.2em; margin: 0 }
.c-decline { margin-top: 14px } .c-decline summary { cursor: pointer; color: var(--sub) }
/* 상대방 화면 셸 */
.c-shell { background: var(--bg); margin: 0 } .c-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap }
.c-top .brand { display: flex; gap: 8px; align-items: center; text-decoration: none; color: inherit } .c-top-org { font-size: 13px; color: var(--sub) }
.c-shell main { max-width: 900px; margin: 0 auto; padding: 20px 16px 60px } .c-foot { text-align: center; font-size: 12px; color: var(--sub); padding: 20px; border-top: 1px solid var(--line) }
.c-gate { max-width: 440px; margin: 40px auto; background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 8px 30px rgba(20,40,90,.08) }
.c-gate h1 { font-size: 22px } .c-gate form { display: flex; flex-direction: column; gap: 10px } .c-gate #c-code-in { font-size: 28px; letter-spacing: .4em; text-align: center }
.c-sign-head { margin-bottom: 16px }
/* 사본 (인쇄) — 워터마크 */
.c-copy { background: #E9EDF4; margin: 0; padding: 20px 0 60px; position: relative }
.c-copy-bar { text-align: center; margin-bottom: 16px }
.c-wm { position: fixed; inset: -30%; display: flex; flex-wrap: wrap; gap: 90px 70px; align-content: flex-start; transform: rotate(-28deg); pointer-events: none; z-index: 5; opacity: .11; user-select: none }
.c-wm span { font: 700 15px system-ui, sans-serif; color: #1E2A78; white-space: nowrap }
.c-draft-stamp { position: fixed; top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font: 900 54px system-ui; color: rgba(200,30,30,.18); border: 6px solid rgba(200,30,30,.18); padding: 4px 20px; z-index: 6; pointer-events: none; margin: 0 }
.c-cert { background: #fff; max-width: 800px; margin: 24px auto 0; padding: 32px 56px; border-radius: 4px; box-shadow: 0 2px 14px rgba(0,0,0,.08); font-size: 13.5px; page-break-before: always; break-before: page }
.c-cert h2 { text-align: center; font-size: 19px } .c-cert dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 10px } .c-cert dt { font-weight: 700 } .c-cert dd { margin: 0; word-break: break-all } .c-cert code { font-size: 12px }
@media print {
  .no-print, .c-note { display: none !important }
  .c-copy { background: #fff; padding: 0 } .c-doc, .c-cert { box-shadow: none; padding: 0; max-width: none }
  .c-wm { position: fixed; opacity: .09; -webkit-print-color-adjust: exact; print-color-adjust: exact }
  .c-clause { break-inside: avoid } .c-parties { break-inside: avoid }
  @page { size: A4; margin: 18mm 16mm }
}
@media (max-width: 900px) {
  .c-split { grid-template-columns: 1fr } .c-preview { position: static; max-height: none }
  .c-doc { padding: 24px 18px } .c-parties { grid-template-columns: 1fr } .c-cert { padding: 20px } .c-cert dl { grid-template-columns: 1fr }
  .c-list th:nth-child(5), .c-list td:nth-child(5) { display: none }
  .c-table { font-size: 13px; display: block; overflow-x: auto }
}

/* 플랫폼 보안 안내서 */
.c-sec-link { background: #F0F7F3; border: 1px solid #C7E6D4; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px }
.c-sec .c-sec-meta { text-align: center; color: #4a5568; font-size: 13px }
.c-sec h2 { font-size: 16px; margin: 22px 0 8px } .c-sec .c-table th { width: 30%; text-align: left; vertical-align: top; background: #F6F8FC }
.c-sec .c-table td, .c-sec .c-table th { padding: 8px 10px; border: 1px solid #E3E8F2; font-size: 14px; line-height: 1.6 } .c-sec .c-table { border-collapse: collapse; width: 100% }
.c-sec-foot { margin-top: 22px; font-size: 13px; color: #4a5568 } .c-sec-bar { max-width: 800px; margin: 0 auto 12px; display: flex; justify-content: space-between; align-items: center }
@media print { .c-sec-part { break-inside: avoid } }

/* ═════════ 계정 메뉴 (20차): 이름을 누르면 열림 ═════════ */
.who-menu { position: relative }
.who-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 999px; min-height: 40px; transition: background .2s }
.who-menu > summary::-webkit-details-marker { display: none }
.who-menu > summary:hover, .who-menu[open] > summary { background: #EEF2FB }
.who-menu > summary:focus-visible { outline: 3px solid #2F6BFF; outline-offset: 2px }
.who-caret { font-size: .7rem; color: #8B95A1 }
.who-menu .who-avatar { position: relative; overflow: hidden }
.who-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block }
.who-avatar.big { width: 44px; height: 44px; font-size: 1.1rem }
.who-pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, 92vw); background: #fff; border-radius: 18px; box-shadow: 0 12px 40px rgba(15, 23, 42, .18); padding: 8px; z-index: 60; white-space: normal; font-weight: 400 }
.who-head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid #EEF1F5; margin-bottom: 4px }
.who-id { min-width: 0; display: flex; flex-direction: column }
.who-id strong { font-size: .98rem; color: #191F28; overflow: hidden; text-overflow: ellipsis }
.who-id small { font-size: .8rem; color: #6B7684; overflow: hidden; text-overflow: ellipsis }
.who-id .who-role { color: #2F6BFF; font-weight: 700 }
.who-pop ul { list-style: none; margin: 0; padding: 4px 0 }
.who-pop ul + ul { border-top: 1px solid #EEF1F5 }
.who-pop li a, .who-pop li label { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: #191F28; cursor: pointer }
.who-pop li a:hover, .who-pop li label:hover { background: #F2F4F6 }
.who-pop li a > span:first-child, .who-pop li label > span:first-child { font-size: 1.1rem; width: 1.4em; text-align: center }
.who-pop li strong { display: block; font-size: .92rem; font-weight: 600 } .who-pop li small { display: block; color: #6B7684; font-size: .78rem; line-height: 1.3 }
.who-pop .who-sub strong { font-weight: 500; font-size: .88rem }
.who-pop .org-switch { margin-top: 4px; max-width: 100% }
.who-logout { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px; border-top: 1px solid #EEF1F5; color: #D92D20; font-weight: 700; text-decoration: none; border-radius: 0 0 12px 12px }
.who-logout small { margin-left: auto; color: #8B95A1; font-weight: 400; font-size: .76rem }
.who-logout:hover { background: #FEF3F2 }
@media (max-width: 1100px) { .who-caret { display: none } }
@media print { .who-pop { display: none } }

/* ═════════ 예비 사이트 (21차): AUTH_MODE=backup 에서만 보임 ═════════ */
.bk-bar { background: #FFF4D6; color: #6B4E00; font-size: .85rem; text-align: center; padding: 6px 12px; position: relative; z-index: 30 }
.bk-bar a { color: #1E2A78; font-weight: 700; margin-left: 6px }
.bk-note { background: #FFF4D6; color: #6B4E00; border-radius: 12px; padding: 10px 14px; font-size: .9rem; line-height: 1.5; margin: 8px 0 4px }
.bk-note b { margin-right: 4px }
.bk-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px }
.bk-list li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, .08) }
.bk-list li span { display: flex; flex-direction: column; min-width: 0 } .bk-list small { color: #6B7684; overflow: hidden; text-overflow: ellipsis }
.bk-list .bk-out { grid-column: 1 / -1; width: 100%; font-size: 13px; padding: 8px; border: 1px solid #C9D3E4; border-radius: 10px }
body.full3d .bk-bar ~ #site-header { top: 31px }

/* 22차: 위 바는 항상 한 줄 (긴 이름이어도 줄바꿈 X) + 3D 지도 패널은 실제 머리말 높이만큼 아래에서 시작 */
.bar { flex-wrap: nowrap !important }
.bar > * { flex-shrink: 0 } #main-nav { flex-shrink: 1; min-width: 0 } .who { min-width: 0; flex-shrink: 1 }
.who-menu > summary { max-width: 100% } .who-name { max-width: 7.5em }
@media (max-width: 1360px) { .who-name { max-width: 5.5em } }
@media (min-width: 901px) { body.full3d .hud { top: calc(var(--hdr-h, 65px) + 13px) } body.full3d .bk-bar ~ main .hud { top: calc(var(--hdr-h, 65px) + 44px) } }