/* 시안 B — 종이 카드 서랍. 글꼴은 손글씨체 하나로 통일한다. */
:root {
  --bg: #f4efe6; --ink: #1d1a16; --muted: #7d7567; --line: rgba(29, 26, 22, .18);
  --card: #fffdf8; --chip: rgba(29, 26, 22, .06);
  --c1: #cfe6f8; --c2: #ffdcbd; --c3: #d3edd4; --c4: #e8d8fb;
  --c5: #ffe88a; --c6: #ffc8d2; --c7: #dcd9cf; --c8: #bcd0ff;
  --sun: #ffc233; --clay: #d9603b; --sea: #2545d6; --on-tone: #1d1a16;
  --hand: 'Gaegu', 'IBM Plex Sans KR', system-ui, sans-serif;
  --sans: var(--hand); --mono: var(--hand);
  --top: 60px; --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #171512; --ink: #f3ede0; --muted: #a79f8f; --line: rgba(243, 237, 224, .2); --card: #24211c; --chip: rgba(243, 237, 224, .09); }
}
:root[data-theme="dark"] { --bg: #171512; --ink: #f3ede0; --muted: #a79f8f; --line: rgba(243, 237, 224, .2); --card: #24211c; --chip: rgba(243, 237, 224, .09); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
:root.calm { scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--hand); font-size: 20px; line-height: 1.4; overflow-x: hidden; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; } ul { padding: 0; list-style: none; } em { font-style: normal; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.eyebrow { font-size: 17px; letter-spacing: .06em; color: var(--muted); }
h1 em, h2 em, .hero-txt2 em { color: var(--clay); }

/* 머리 */
.top { position: fixed; inset: 0 0 auto 0; height: var(--top); z-index: 30; display: flex; align-items: center; gap: 20px; padding: 0 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1.5px solid var(--ink); }
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; white-space: nowrap; }
.brand b { font-size: 28px; } .brand span { font-size: 22px; font-weight: 700; }
.nav { display: flex; gap: 4px; margin-inline: auto; overflow-x: auto; scrollbar-width: none; }
.nav a { padding: 4px 14px; border-radius: 99px; font-size: 21px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.nav a:hover { background: var(--sun); color: var(--on-tone); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; } .icon-btn:hover { background: var(--chip); }
.progress { position: absolute; left: 0; bottom: -3px; height: 3px; width: 100%; background: var(--clay); transform-origin: left; transform: scaleX(0); }

/* 01 첫 화면 */
.hero { height: 260vh; }
.pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.hero-txt { position: absolute; left: max(24px, calc(50% - 600px)); top: 50%; translate: 0 -46%; width: min(520px, 46%); display: grid; gap: 22px; will-change: transform, opacity; }
.hero-txt h1 { font-size: clamp(54px, 7.6vw, 118px); line-height: .92; }
.hero-txt2 { position: absolute; left: 0; right: 0; top: calc(var(--top) + 6vh); text-align: center; font-size: clamp(44px, 6.4vw, 96px); font-weight: 700; line-height: 1; opacity: 0; will-change: transform, opacity; }
.search { display: flex; align-items: center; height: 60px; padding-left: 20px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 14px; overflow: hidden; }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: 22px; }
.search input::-webkit-search-cancel-button { display: none; }
.search button { align-self: stretch; padding: 0 22px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 22px; }
.search.small { height: 50px; padding: 0 14px; }
.scrollhint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 18px; color: var(--muted); }
.deck { position: absolute; inset: 0; pointer-events: none; }
.pc { position: absolute; left: 0; top: 0; width: clamp(150px, 17vw, 230px); padding: 10px 10px 14px; background: var(--tone); color: var(--on-tone); border: 1.5px solid #1d1a16;
  border-radius: 10px; text-decoration: none; pointer-events: auto; box-shadow: 3px 4px 0 rgba(29, 26, 22, .9); will-change: transform; }
.pc:hover { z-index: 5; } .pc:hover .pc-img img { scale: 1.07; }
.pc-img { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; border: 1.5px solid #1d1a16; background: rgba(255, 255, 255, .6); }
.pc-img img, .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .5s var(--ease); }
.ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 44px; }
.pc small { display: block; margin-top: 8px; font-size: 16px; opacity: .75; }
.pc b { display: block; font-size: clamp(21px, 2vw, 28px); line-height: 1.05; }
.pc::after { content: ''; position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border: 1.5px dashed #1d1a16; border-radius: 50%; opacity: .45; }

/* 구간 머리 */
section.rows, section.catalog, section.info { padding: clamp(70px, 10vw, 140px) 0; }
.sec-head h2, .trip-head h2 { margin-top: 6px; font-size: clamp(44px, 6vw, 88px); line-height: 1; }

/* 02 줄 메뉴 */
.rowlist { margin-top: 36px; border-top: 1.5px solid var(--ink); }
.row { position: relative; border-bottom: 1.5px solid var(--ink); transition: background-color .35s; }
.row-head { position: relative; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 14px 8px; text-align: left; }
.row-no { font-size: 20px; color: var(--muted); }
.row-name { font-size: clamp(38px, 5.2vw, 72px); font-weight: 700; line-height: 1; transition: translate .4s var(--ease); }
.row-count { font-size: 20px; padding: 2px 14px; border: 1.5px solid currentColor; border-radius: 99px; }
.row-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 8px; opacity: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='8'%3E%3Cpath d='M0 4q9-7 18 0t18 0' fill='none' stroke='%23d9603b' stroke-width='2'/%3E%3C/svg%3E") repeat-x; }
.row:hover .row-head::after, .row.open .row-head::after { opacity: 1; animation: wave .8s linear infinite; }
@keyframes wave { to { background-position-x: 36px; } }
.row.open { background: var(--tone); color: var(--on-tone); --ink: #1d1a16; --muted: #6b6558; --card: #fffdf8; --bg: #fffdf8; }
.row.open .row-name { translate: 14px 0; }
.row-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.row.open .row-body { grid-template-rows: 1fr; }
.row-in { overflow: hidden; }
.gm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px 8px 22px 90px; }
.gm-sem { display: flex; gap: 6px; margin-right: 8px; }
.gm-sem button, .subj { padding: 4px 18px; border: 1.5px solid var(--ink); border-radius: 99px; font-size: 23px; font-weight: 700; background: var(--card); text-decoration: none; transition: translate .2s var(--ease), box-shadow .2s var(--ease); }
.gm-sem button.on { background: var(--ink); color: var(--bg); }
.gm-hint { font-size: 19px; color: var(--muted); }
.gm-list { display: contents; }
.gm-list li { animation: rise .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.subj { display: inline-flex; align-items: center; gap: 8px; }
.subj.has:hover { translate: -2px -2px; box-shadow: 3px 4px 0 var(--ink); }
.subj b { color: var(--on-acc, #fff) !important; min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--clay); color: #fff; font-size: 17px; }
.subj.none { border-style: dashed; font-weight: 400; background: none; opacity: .55; }
.subj.none i { font-style: normal; font-size: 16px; }

/* 03 둘러보기 (가로 이동) */
.trip { background: var(--sea); color: #fff; --muted: rgba(255, 255, 255, .75); }
.trip h2 em { color: var(--sun); }
.trip .pin { display: grid; grid-template-rows: auto 1fr auto; padding-top: calc(var(--top) + 3vh); }
.trip-head { padding: 0 max(24px, calc(50% - 600px)); }
.track { display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); padding: 0 max(24px, calc(50% - 600px)); width: max-content; will-change: transform; }
.stop { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 22px; width: clamp(300px, 46vw, 640px); text-decoration: none; color: inherit; }
.stop-no { grid-row: 1 / 3; font-size: clamp(90px, 12vw, 190px); font-weight: 700; line-height: .7; color: transparent; -webkit-text-stroke: 2px #fff; }
.stop-img { display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 2px solid #fff; background: var(--tone); box-shadow: 8px 10px 0 rgba(0, 0, 0, .28); rotate: var(--r, 0deg); transition: rotate .4s var(--ease), translate .4s var(--ease); }
.stop:hover .stop-img { rotate: 0deg; translate: 0 -6px; }
.stop-img img { width: 116%; max-width: none; height: 100%; object-fit: cover; display: block; transform: translateX(var(--px, 0)); }
.stop-txt { grid-column: 2; padding-top: 12px; }
.stop-txt b { display: block; font-size: clamp(30px, 3.4vw, 48px); line-height: 1; }
.stop-txt span { font-size: 20px; color: var(--muted); }
.trip-bar { margin: 0 max(24px, calc(50% - 600px)) 26px; height: 3px; background: rgba(255, 255, 255, .3); }
.trip-bar i { display: block; height: 100%; background: var(--sun); transform-origin: left; transform: scaleX(0); }

/* 04 전체 도구 */
.cat-grid { margin-top: 36px; display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.facets { position: sticky; top: calc(var(--top) + 18px); display: grid; gap: 14px; max-height: calc(100vh - var(--top) - 36px); overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.facet-box summary { display: none; }
.fgroup { border-top: 1.5px solid var(--ink); padding: 8px 0 10px; }
.fgroup h4 { margin: 0 0 4px; font-size: 18px; color: var(--muted); font-weight: 400; }
.fopt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 2px 4px; font-size: 21px; text-align: left; border-radius: 6px; }
.fopt:hover { background: var(--chip); }
.fopt i { width: 16px; height: 16px; border: 1.5px solid var(--ink); border-radius: 4px; flex: none; }
.fopt.on i { background: var(--clay); box-shadow: inset 0 0 0 2px var(--card); }
.fopt.on { font-weight: 700; }
.fopt span { margin-left: auto; font-size: 17px; color: var(--muted); }
.fopt.zero { opacity: .4; }
.fgroup.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; } .fgroup.two h4 { grid-column: 1 / -1; }
.count { font-size: 22px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.count button { margin-left: 12px; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }
.tickets { margin-top: 20px; display: grid; gap: 16px; }
.ticket { position: relative; display: grid; grid-template-columns: 220px 1fr; background: var(--card); border: 1.5px solid var(--ink); border-radius: 14px; overflow: hidden;
  transition: translate .3s var(--ease), box-shadow .3s var(--ease); }
.ticket:hover { translate: -3px -3px; box-shadow: 6px 7px 0 var(--ink); }
.ticket-open { display: contents; text-decoration: none; }
.thumb { position: relative; display: block; background: var(--tone); overflow: hidden; }
.ticket .thumb { border-right: 1.5px dashed var(--ink); min-height: 140px; }
.ticket:hover .thumb img { scale: 1.06; }
.ticket-txt { display: block; padding: 16px 64px 16px 22px; }
.ticket-txt small { font-size: 17px; color: var(--clay); font-weight: 700; }
.ticket-txt b { display: block; font-size: 36px; line-height: 1.05; }
.ticket-txt > span { display: block; font-size: 20px; color: var(--muted); }
.tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { padding: 0 10px; border-radius: 99px; background: var(--chip); font-size: 17px; color: var(--ink); }
.star { position: absolute; right: 14px; top: 12px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; color: var(--muted); }
.star:hover { background: var(--chip); } .star.on { color: #f2a900; }
.ticket .new { position: absolute; left: 10px; top: 10px; padding: 0 10px; border-radius: 99px; background: var(--clay); color: var(--on-acc, #fff); font-size: 16px; rotate: -5deg; }
.empty { padding: 60px 0; text-align: center; font-size: 30px; color: var(--muted); }

/* 05 안내 · 바닥 */
.info-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid var(--ink); }
.note { padding: 22px 22px 26px 0; border-bottom: 1.5px solid var(--ink); }
.note + .note { padding-left: 22px; border-left: 1.5px solid var(--ink); }
.note > b { font-size: 20px; color: var(--clay); }
.note h3 { font-size: 34px; line-height: 1.1; } .note p { margin-top: 8px; }
.soon-btn { display: inline-block; margin-top: 14px; padding: 2px 14px; border: 1.5px dashed currentColor; border-radius: 99px; font-size: 18px; opacity: .7; }
.foot { position: relative; background: var(--sun); color: #1d1a16; padding: 60px 0 26px; overflow: hidden; }
.wordmark { font-size: clamp(90px, 25vw, 380px); font-weight: 700; line-height: .78; white-space: nowrap; will-change: transform; }
.foot-row { position: relative; margin-top: 30px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 19px; }
.text-btn { text-decoration: underline; text-underline-offset: 3px; }
.pixels { position: absolute; inset: 0; pointer-events: none; }
.px { position: absolute; width: 7px; height: 7px; background: #fff; will-change: transform;
  box-shadow: 7px 0 #fff, -7px 0 #fff, 0 7px #fff, 0 -7px #fff, 0 14px #2f8f4e, 0 21px #2f8f4e; }
.px:nth-child(2n) { background: var(--clay); box-shadow: 7px 0 #ff9bb0, -7px 0 #ff9bb0, 0 7px #ff9bb0, 0 -7px #ff9bb0, 0 14px #2f8f4e, 0 21px #2f8f4e; }

/* 자세히 보기 창(공통 sheet.css)의 글자 크기 */
.sheet h2 { font-size: 52px; } .sheet .lead { font-size: 21px; }
.facts dt, .sheet h4 { font-size: 16px; letter-spacing: .04em; } .facts dd { font-size: 21px; font-weight: 700; }
.btn { font-size: 21px; font-weight: 700; } .qr p { font-size: 18px; } .qr p b { font-size: 26px; } .toast { font-size: 18px; }
.sheet .thumb { min-height: 0; }

[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
[data-reveal].in { opacity: 1; transform: none; }
.calm [data-reveal] { transform: none; transition-duration: .2s; }
.calm .row-head::after { animation: none !important; }
::view-transition-group(*) { animation-duration: .4s; animation-timing-function: var(--ease); }

@media (max-width: 900px) {
  .cat-grid { grid-template-columns: 1fr; gap: 20px; }
  .facets { position: static; max-height: none; }
  .facet-box summary { display: block; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 12px; font-weight: 700; cursor: pointer; }
  .facet-box[open] summary { margin-bottom: 10px; }
  .info-grid { grid-template-columns: 1fr; } .note + .note { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .top { padding: 0 14px; gap: 8px; } .brand span { display: none; } .nav a { font-size: 19px; padding: 4px 9px; }
  .wrap { width: calc(100% - 32px); }
  .hero { height: auto; } .pin { position: static; height: auto; overflow: visible; }
  .hero-txt { position: static; translate: none; width: auto; padding: calc(var(--top) + 36px) 16px 20px; }
  .hero-txt2, .scrollhint { display: none; }
  .deck { position: static; display: flex; gap: 12px; overflow-x: auto; padding: 10px 16px 30px; scroll-snap-type: x mandatory; }
  .pc { position: static; flex: none; width: 170px; scroll-snap-align: start; }
  .row-head { grid-template-columns: 34px 1fr auto; } .gm { padding-left: 8px; }
  .trip .pin { display: block; padding: calc(var(--top) + 20px) 0 30px; }
  .track { width: auto; overflow-x: auto; padding: 24px 16px; scroll-snap-type: x mandatory; }
  .stop { flex: none; width: 82vw; scroll-snap-align: center; } .trip-bar { display: none; }
  .ticket { grid-template-columns: 110px 1fr; } .ticket-txt { padding: 12px 50px 12px 14px; } .ticket-txt b { font-size: 28px; }
}

/* 둘러보기 배치 보정 */
.trip .pin { grid-template-columns: minmax(0, 1fr); }
.trip-head, .track { padding-inline: max(24px, calc(50vw - 600px)); }
.trip-bar { margin-inline: max(24px, calc(50vw - 600px)); }
.stop { display: block; width: clamp(280px, 36vw, 520px); }
.stop-no { position: absolute; left: -.18em; top: -.42em; z-index: 2; font-size: clamp(80px, 9vw, 150px); line-height: 1; -webkit-text-stroke: 0; color: var(--sun); text-shadow: 3px 4px 0 rgba(0, 0, 0, .35); }
.stop-txt { display: block; padding-top: 18px; }
.ticket .thumb img, .ticket .thumb .ph { position: absolute; inset: 0; }
.ticket .thumb { min-height: 150px; }
@media (max-width: 760px) { .track { padding: 40px 16px 24px; } .stop { width: 78vw; } .ticket .thumb { min-height: 120px; } }

/* ───────── 테마(글꼴 + 색) ─────────
   뼈대와 움직임은 그대로 두고 글꼴과 색만 바꾼다. data-skin이 없으면 처음의 손글씨 테마. */
.top-actions { display: flex; align-items: center; gap: 8px; }
body { font-family: var(--body, var(--hand)); }
h1, h2, h3, .hero-txt2, .row-name, .pc b, .stop-txt b, .stop-no, .ticket-txt b, .wordmark, .brand b, .sheet h2, .qr p b {
  font-family: var(--disp, var(--hand)); font-weight: var(--disp-w, 700); letter-spacing: var(--disp-ls, 0);
}

:root[data-skin="clean"] {
  --disp: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; --body: var(--disp); --disp-w: 800; --disp-ls: -.035em;
  --bg: #f5f6f8; --ink: #12161f; --muted: #667085; --line: rgba(18, 22, 31, .14); --card: #fff; --chip: rgba(18, 22, 31, .06);
  --sun: #ffd43b; --clay: #2f5bff; --sea: #12161f;
  --c1: #dbe8ff; --c2: #ffe6cc; --c3: #d9f2e1; --c4: #ebe1ff; --c5: #fff0b3; --c6: #ffd9e0; --c7: #e4e7ec; --c8: #cfe0ff;
}
:root[data-skin="candy"] {
  --disp: 'Jua', 'Noto Sans KR', sans-serif; --body: 'Noto Sans KR', sans-serif; --disp-w: 400; --disp-ls: 0;
  --bg: #fff6ec; --ink: #3a2b2b; --muted: #8a7676; --line: rgba(58, 43, 43, .16); --card: #fff; --chip: rgba(58, 43, 43, .06);
  --sun: #ffd166; --clay: #ff5d7a; --sea: #12a594;
  --c1: #c9ecff; --c2: #ffd9b8; --c3: #c8f2d4; --c4: #e6d6ff; --c5: #ffe99a; --c6: #ffc6d6; --c7: #efe6dc; --c8: #c7d8ff;
}
/* 깔끔·말랑 테마의 어두운 화면 */
@media (prefers-color-scheme: dark) {
  :root:is([data-skin="clean"], [data-skin="candy"]):not([data-theme="light"]) {
    --bg: #14161b; --ink: #f1f2f4; --muted: #9aa0ad; --line: rgba(255, 255, 255, .18); --card: #1f2229; --chip: rgba(255, 255, 255, .08);
  }
}
:root:is([data-skin="clean"], [data-skin="candy"])[data-theme="dark"] {
  --bg: #14161b; --ink: #f1f2f4; --muted: #9aa0ad; --line: rgba(255, 255, 255, .18); --card: #1f2229; --chip: rgba(255, 255, 255, .08);
}
:root[data-skin="clean"] .trip h2 em, :root[data-skin="clean"] .trip-bar i { color: var(--sun); }
:root[data-skin="clean"] .stop-no { color: var(--sun); }

/* 손글씨체는 같은 크기에서 작게 보여 글자를 키워 두었다. 다른 글꼴에서는 본문 크기를 되돌린다. */
:root[data-skin] body { font-size: 17px; line-height: 1.55; }
:root[data-skin] .eyebrow { font-size: 13px; letter-spacing: .12em; }
:root[data-skin] .brand b { font-size: 22px; } :root[data-skin] .brand span { font-size: 15px; }
:root[data-skin] .nav a { font-size: 16px; padding: 6px 14px; }
:root[data-skin] .hero-txt h1 { line-height: 1.04; font-size: clamp(48px, 6.6vw, 104px); }
:root[data-skin] .hero-txt2 { line-height: 1.1; font-size: clamp(38px, 5.4vw, 80px); }
:root[data-skin] .sec-head h2, :root[data-skin] .trip-head h2 { line-height: 1.1; font-size: clamp(38px, 5vw, 72px); }
:root[data-skin] .search input, :root[data-skin] .search button { font-size: 17px; }
:root[data-skin] .scrollhint { font-size: 14px; }
:root[data-skin] .pc small { font-size: 12px; } :root[data-skin] .pc b { font-size: clamp(16px, 1.55vw, 21px); line-height: 1.2; }
:root[data-skin] .row-no, :root[data-skin] .row-count { font-size: 15px; }
:root[data-skin] .row-name { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.12; }
:root[data-skin] .gm-sem button, :root[data-skin] .subj { font-size: 17px; padding: 6px 16px; }
:root[data-skin] .gm-hint { font-size: 15px; } :root[data-skin] .subj b { font-size: 12px; } :root[data-skin] .subj.none i { font-size: 12px; }
:root[data-skin] .stop-txt b { line-height: 1.15; font-size: clamp(26px, 2.8vw, 40px); } :root[data-skin] .stop-txt span { font-size: 16px; }
:root[data-skin] .fgroup h4 { font-size: 13px; } :root[data-skin] .fopt { font-size: 16px; padding: 4px; } :root[data-skin] .fopt span { font-size: 13px; }
:root[data-skin] .count { font-size: 16px; }
:root[data-skin] .ticket-txt small { font-size: 13px; } :root[data-skin] .ticket-txt b { font-size: 28px; line-height: 1.2; }
:root[data-skin] .ticket-txt > span { font-size: 15px; } :root[data-skin] .tags span { font-size: 13px; padding: 2px 10px; }
:root[data-skin] .ticket .new { font-size: 12px; padding: 2px 10px; }
:root[data-skin] .star { font-size: 20px; }
:root[data-skin] .note > b { font-size: 14px; } :root[data-skin] .note h3 { font-size: 26px; line-height: 1.2; } :root[data-skin] .soon-btn { font-size: 13px; padding: 4px 12px; }
:root[data-skin] .wordmark { line-height: .95; font-size: clamp(80px, 21vw, 320px); }
:root[data-skin] .foot-row { font-size: 14px; }
:root[data-skin] .empty { font-size: 20px; }
:root[data-skin] .sheet h2 { font-size: 40px; line-height: 1.15; } :root[data-skin] .sheet .lead { font-size: 17px; }
:root[data-skin] .facts dt, :root[data-skin] .sheet h4 { font-size: 12px; letter-spacing: .1em; } :root[data-skin] .facts dd { font-size: 17px; }
:root[data-skin] .btn { font-size: 16px; } :root[data-skin] .qr p { font-size: 15px; } :root[data-skin] .qr p b { font-size: 20px; } :root[data-skin] .toast { font-size: 15px; }

/* ───────── 테마별 카드(폴라로이드) 모양과 액자 색 ───────── */
/* 깔끔: 각진 흰 액자, 가는 테두리, 부드러운 그림자, 도구 색은 작은 네모 표시로만 */
:root[data-skin="clean"] .pc { background: var(--card); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; padding: 12px 12px 16px;
  box-shadow: 0 18px 34px -18px rgba(18, 22, 31, .55); }
:root[data-skin="clean"] .pc-img { border: 0; border-radius: 0; background: var(--chip); }
:root[data-skin="clean"] .pc::after { width: 14px; height: 14px; right: 12px; bottom: 14px; border: 0; border-radius: 0; background: var(--clay); opacity: 1; }
/* 말랑: 크게 둥근 파스텔 액자, 굵은 테두리와 또렷한 그림자 */
:root[data-skin="candy"] .pc { border: 2.5px solid var(--ink); border-radius: 26px; padding: 12px 12px 16px; box-shadow: 5px 6px 0 var(--ink); }
:root[data-skin="candy"] .pc-img { border: 2.5px solid var(--ink); border-radius: 16px; }
:root[data-skin="candy"] .pc::after { border: 0; background: #fff; opacity: .8; width: 22px; height: 22px; }

/* 테마 고르기: 색 단추 세 개 (깔끔 · 말랑 · 손글씨). 단추 모양이 그 테마의 카드 모양을 닮았다. */
.skin { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.skin button { width: 22px; height: 22px; border: 1.5px solid var(--ink); background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); transition: scale .2s var(--ease); }
.skin button:hover { scale: 1.15; }
.skin button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.skin [data-skin="clean"] { --a: #f5f6f8; --b: #2f5bff; border-radius: 2px; }
.skin [data-skin="candy"] { --a: #fff6ec; --b: #ff5d7a; border-radius: 50%; }
.skin [data-skin="hand"] { --a: #f4efe6; --b: #d9603b; border-radius: 46% 54% 42% 58% / 56% 44% 56% 44%; }
@media (max-width: 760px) { :root[data-skin] .nav a { font-size: 15px; padding: 6px 8px; } .skin { gap: 6px; } .skin button { width: 20px; height: 20px; } }

/* 줄 메뉴: 물결선과 아래 단추가 겹치지 않게 간격을 둔다 */
.gm { padding-top: 18px; }

/* 둘러보기: 이름 아래 학년·과목을 작게 */
.stop-txt span { display: block; margin-top: 4px; font-size: 17px; }
:root[data-skin] .stop-txt span { font-size: 14px; letter-spacing: .02em; }