/* 비주얼 노벨 화면
 *
 * 모바일 세로 기준으로 짜고 데스크톱에서는 가운데로 모은다. 사주 트래픽은
 * 거의 전부 모바일이라 반대로 하면 주된 사용자를 부차적으로 다루게 된다.
 *
 * 그림이 아직 없다. 캐릭터 자리에는 아트바이블에서 정한 색으로 실루엣만
 * 세운다 — 자리와 크기가 미리 맞아 있어야 나중에 PNG를 그 자리에 끼운다.
 */

:root {
  --ground: #0e0f12;
  --panel: rgba(18, 20, 25, .93);
  --panel-line: rgba(255, 255, 255, .09);
  --ink: #ece9e3;
  --ink-soft: #a49f96;
  --ink-dim: #6e6a63;
  --key: #b23a32;          /* 캐릭터마다 JS가 덮어쓴다 */
  --body: #1b2333;
  --soft: #8e9aae;

  --serif: 'Nanum Myeongjo', 'AppleMyungjo', 'Noto Serif KR', 'Batang',
           '바탕', serif;
  --sans: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕',
          system-ui, sans-serif;

  /* 아트바이블: 입지 1200×1800 중 하단 620px이 대화창에 가린다 */
  --box-h: 34vh;

  /* 브라우저가 직접 그리는 것들(입력칸 기본색, 스크롤바, 체크박스)을
     어두운 화면에 맞춘다. 이게 없으면 기본값이 밝은 화면 기준이라
     흰 바탕에 흰 글씨가 나온다. */
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.7;
  word-break: keep-all; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: relative;
  max-width: 30rem; height: 100%; margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 0%,
      color-mix(in srgb, var(--body) 70%, transparent) 0%,
      transparent 70%),
    var(--ground);
  transition: background .8s ease;
}

/* ── 캐릭터 자리 ───────────────────────────────────────────── */
/* PNG가 들어오면 .silhouette를 <img>로 바꾸기만 하면 된다. */
#cast {
  /* 대화창 높이가 노드마다 다르다. JS가 실제 높이를 --cast-bottom에 넣어
     캐릭터가 패널 뒤로 잠기지 않게 한다 — 그림이 들어오면 얼굴이 가리는 문제가 된다. */
  position: absolute; left: 50%; bottom: var(--cast-bottom, 34vh);
  transform: translateX(-50%);
  width: min(62%, 15rem); height: 46vh;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease, bottom .35s ease;
}
#cast.on { opacity: 1; }

/* 실제 입지. 두 장을 겹쳐 두고 교차 페이드로 표정을 바꾼다. */
.portrait {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom;
  opacity: 0; transition: opacity .45s ease;
}
.portrait.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .portrait { transition: none; }
  /* 움직임을 꺼 달라고 한 사람에게 영상을 틀지 않는다 */
  #clip { display: none; }
}

/* 장면형(scene) — 배경까지 그려진 한 장이라 화면을 꽉 채운다.
   위를 기준으로 맞춰야 세로가 짧은 기기에서 얼굴부터 잘리지 않는다. */
#stage.scene #cast {
  inset: 0; left: 0; bottom: auto;
  width: 100%; height: 100%;
  transform: none; opacity: 1;
}
#stage.scene .portrait { object-fit: cover; object-position: top center; }
#stage.scene #shape { display: none; }

/* 그림 아래쪽을 어둡게 깔아 대화창과 이어 붙인다. 경계선이 그대로 보이면
   그림 위에 창을 얹은 티가 난다.

   z-index가 반드시 있어야 한다. 이 ::after는 #stage의 마지막 자식으로
   생성되므로, 지정하지 않으면 대화창보다 나중에 그려져 글자와 버튼 위를
   덮는다. 아래로 갈수록 진해지는 그라데이션이라 화면 하단이 통째로
   묻혀 버린다. */
#stage.scene::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  height: calc(var(--cast-bottom, 34vh) + 14vh);
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--ground) 55%, transparent) 45%,
    var(--ground) 100%);
  pointer-events: none;
}

.silhouette {
  width: 100%; height: 100%;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--soft) 55%, transparent) 0%,
    var(--body) 55%);
  clip-path: polygon(50% 0%, 68% 9%, 74% 26%, 70% 40%,
                     88% 52%, 96% 100%, 4% 100%, 12% 52%,
                     30% 40%, 26% 26%, 32% 9%);
  /* 어두운 배경에 잠기지 않게 — 아트바이블의 림 라이트 요구와 같은 역할 */
  filter: drop-shadow(0 0 1px color-mix(in srgb, var(--soft) 60%, transparent));
}
.silhouette.seated { clip-path: polygon(
  50% 6%, 66% 14%, 71% 30%, 67% 42%,
  92% 58%, 100% 100%, 0% 100%, 8% 58%,
  33% 42%, 29% 30%, 34% 14%); }

.placeholder-tag {
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: .1em; color: var(--ink-dim);
  white-space: nowrap;
}

/* ── 대화창 ────────────────────────────────────────────────── */
#box {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;                 /* 그림 위 어둠 그라데이션보다 위에 */
  /* 상한을 62%로 묶는다. 이보다 커지면 결제 화면에서 캐릭터 얼굴이
     입 언저리에서 잘린다 — 후킹이 걸리는 자리라 얼굴이 살아 있어야 한다.
     넘치는 내용은 창 안에서 스크롤된다. */
  min-height: var(--box-h); max-height: 62%;
  background: var(--panel);
  border-top: 1px solid var(--panel-line);
  backdrop-filter: blur(14px);
  padding: 1.15rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}

/* 만화 컷 구간 — 그림이 주인공이다.
   패널 대신 자막처럼 깔아 컷이 최대한 보이게 한다. 내용만큼만 차지하므로
   지문 한 줄이면 얇게, 선택지가 붙으면 그만큼만 자란다. */
#box.caption {
  min-height: 0;
  background: linear-gradient(to top,
    var(--ground) 55%,
    color-mix(in srgb, var(--ground) 82%, transparent) 80%,
    transparent 100%);
  border-top: none;
  backdrop-filter: none;
  padding-top: 3.5rem;
}
#box.caption #speaker { display: none; }

#speaker {
  font-family: var(--serif); font-size: 1.05rem;
  color: var(--key); letter-spacing: .06em;
  margin-bottom: .45rem; min-height: 1.4rem;
}
#speaker:empty::before { content: ''; }

#line {
  font-size: 1.02rem; line-height: 1.85; white-space: pre-wrap;
  flex: 1; margin-bottom: .8rem;
}
#line.narration { color: var(--ink-soft); font-family: var(--serif); }

#advance {
  align-self: flex-end; font-size: .8rem; color: var(--ink-dim);
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: .3 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  #advance { animation: none; opacity: .6 }
}

/* ── 선택지 ────────────────────────────────────────────────── */
#choices { display: grid; gap: .5rem; margin-top: .3rem; }
button.choice {
  width: 100%; text-align: left;
  padding: .8rem .95rem;
  font: inherit; font-size: .95rem; color: var(--ink);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--panel-line); border-radius: 3px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
button.choice:hover, button.choice:focus-visible {
  background: color-mix(in srgb, var(--key) 14%, transparent);
  border-color: var(--key); outline: none;
}

/* ── 입력 ──────────────────────────────────────────────────── */
.form { display: grid; gap: .7rem; margin-top: .2rem; }
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.row.two { grid-template-columns: repeat(2, 1fr); }

input, select, textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--panel-line); border-radius: 3px;
  padding: .62rem .7rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--key);
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.7; }
label.field { font-size: .75rem; color: var(--ink-dim); display: block;
              margin-bottom: .25rem; letter-spacing: .04em; }
.hint { font-size: .78rem; color: var(--ink-soft); }
.count { font-size: .75rem; color: var(--ink-soft); text-align: right; }

/* 오류는 흐리면 안 된다. 여기서 막히면 결제까지 못 간다. */
.err { font-size: .85rem; color: #ff8b7d; line-height: 1.5; }
.err:empty { display: none; }

/* ── 두 갈래 토글 (양력/음력, 남/여) ─────────────────────── */
.toggle { display: flex; gap: .4rem; }
button.seg {
  flex: 1; font: inherit; font-size: .92rem;
  color: var(--ink-soft);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--panel-line); border-radius: 3px;
  padding: .6rem .4rem; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
button.seg:hover { border-color: var(--ink-dim); }
button.seg.sel {
  color: #fff; font-weight: 600;
  background: color-mix(in srgb, var(--key) 30%, transparent);
  border-color: var(--key);
}

/* ── 체크박스 ────────────────────────────────────────────── */
label.check {
  display: flex; align-items: center; gap: .55rem;
  font-size: .9rem; color: var(--ink); cursor: pointer;
  padding: .5rem .1rem;
}
label.check input[type=checkbox] {
  width: 1.15rem; height: 1.15rem; margin: 0; flex: none;
  accent-color: var(--key); cursor: pointer;
}
label.check.hidden { display: none; }

/* 시각을 모른다고 하면 시·분 칸을 죽인다 */
.row.off { opacity: .35; pointer-events: none; }

button.primary {
  width: 100%; font: inherit; font-size: .98rem; font-weight: 600;
  color: #fff; background: var(--key);
  border: none; border-radius: 3px; padding: .82rem;
  cursor: pointer;
}
button.primary:disabled { opacity: .4; cursor: not-allowed; }
button.ghost {
  width: 100%; font: inherit; font-size: .88rem; color: var(--ink-dim);
  background: none; border: none; padding: .5rem; cursor: pointer;
}

/* ── 명식표 ────────────────────────────────────────────────── */
.chart { margin-top: .3rem; }
.chart h4 {
  font-size: .74rem; letter-spacing: .1em; color: var(--ink-dim);
  margin: 1rem 0 .5rem; font-weight: 600;
}
.chart h4:first-child { margin-top: 0; }

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.pillar {
  text-align: center; padding: .6rem .2rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--panel-line); border-radius: 3px;
}
.pillar .pos { font-size: .68rem; color: var(--ink-dim); }
.pillar .han {
  font-family: var(--serif); font-size: 1.55rem; line-height: 1.25;
  margin: .12rem 0;
}
.pillar .kr { font-size: .74rem; color: var(--ink-soft); }

.bars { display: grid; gap: .3rem; }
.bar { display: grid; grid-template-columns: 2.2rem 1fr 1.6rem;
       gap: .5rem; align-items: center; font-size: .8rem; }
.bar .track { height: 6px; background: rgba(255,255,255,.07);
              border-radius: 3px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--soft); border-radius: 3px; }
.bar .fill.zero { background: var(--key); }
.bar .n { text-align: right; color: var(--ink-soft);
          font-variant-numeric: tabular-nums; }

.tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag {
  font-size: .76rem; padding: .22rem .55rem;
  background: rgba(255,255,255,.05); border: 1px solid var(--panel-line);
  border-radius: 2px; color: var(--ink-soft);
}
.tag.key { color: var(--key); border-color: var(--key); }

.scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.score { text-align: center; padding: .55rem .2rem;
         background: rgba(255,255,255,.04);
         border: 1px solid var(--panel-line); border-radius: 3px; }
.score b { display: block; font-size: 1.35rem; font-family: var(--serif);
           font-weight: 400; font-variant-numeric: tabular-nums; }
.score span { font-size: .7rem; color: var(--ink-dim); }

/* ── 결제 ──────────────────────────────────────────────────── */
.price { display: flex; align-items: baseline; gap: .6rem; margin: .2rem 0 .1rem; }
.price .now { font-size: 1.7rem; font-weight: 700;
              font-variant-numeric: tabular-nums; }
.price .was { font-size: .9rem; color: var(--ink-dim);
              text-decoration: line-through; }
.price .off { font-size: .8rem; color: var(--key); font-weight: 600; }

.toc { max-height: 8rem; overflow-y: auto; display: grid; gap: .05rem;
       margin: .6rem 0; }
.toc div { font-size: .82rem; color: var(--ink-soft);
           padding: .22rem 0; border-bottom: 1px solid rgba(255,255,255,.045); }
.toc div::before { content: '· '; color: var(--ink-dim); }

.dev {
  margin-top: .5rem; padding: .55rem .7rem; border-radius: 2px;
  background: rgba(178,58,50,.1); border: 1px solid rgba(178,58,50,.3);
  font-size: .76rem; color: var(--ink-soft);
}

/* ── 진행률 ────────────────────────────────────────────────── */
.progress { margin: .8rem 0; }
.progress .track { height: 3px; background: rgba(255,255,255,.08);
                   border-radius: 2px; overflow: hidden; }
.progress .fill { height: 100%; background: var(--key);
                  transition: width .5s ease; }
.progress .meta { display: flex; justify-content: space-between;
                  font-size: .78rem; color: var(--ink-dim);
                  margin-top: .4rem; font-variant-numeric: tabular-nums; }

/* ── 리포트 ────────────────────────────────────────────────── */
#report { padding: 1.5rem 1.25rem 4rem; max-width: 34rem; margin: 0 auto;
          overflow-y: auto; height: 100%; }
#report h2 { font-family: var(--serif); font-weight: 400;
             font-size: 1.3rem; margin: 2.4rem 0 .8rem;
             padding-top: 1.2rem; border-top: 1px solid var(--panel-line); }
#report h2:first-of-type { border-top: none; padding-top: 0; margin-top: .5rem; }
#report p { margin: 0 0 1rem; line-height: 1.9; }
#report strong { color: #fff; font-weight: 650; }

.topbar { display: flex; justify-content: space-between; align-items: center;
          font-size: .78rem; color: var(--ink-dim); margin-bottom: 1rem; }
.topbar a { color: var(--key); text-decoration: none; }

a.download {
  display: block; text-align: center; text-decoration: none;
  margin: 1.2rem 0 .4rem; padding: .8rem;
  font-size: .95rem; font-weight: 600; color: #fff;
  background: var(--key); border-radius: 3px;
}
a.download:hover { filter: brightness(1.08); }

/* ── 상품 고르기 ───────────────────────────────────────────── */
#menu { padding: 2.5rem 1rem 4rem; max-width: 30rem; margin: 0 auto;
        height: 100%; overflow-y: auto; }
#menu h1 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem;
           margin: 0 0 .4rem; }
#menu h1 { line-height: 1.35; text-wrap: balance; }
#menu .sub { color: var(--ink-soft); font-size: .88rem; margin: 0 0 1.6rem;
             line-height: 1.7; white-space: pre-line; }

/* 두 칸으로 깔되 첫 상품만 한 줄을 다 쓴다. 다섯이 똑같은 크기로 늘어서면
   어디부터 봐야 할지 모른다. */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

a.card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--panel-line);
  border-radius: 5px; overflow: hidden;
  transition: border-color .18s, transform .18s;
}
a.card:hover, a.card:focus-visible {
  border-color: var(--c); transform: translateY(-2px); outline: none;
}
a.card.feat { grid-column: 1 / -1; flex-direction: row; }

/* 썸네일 — 그림이 없는 캐릭터는 팔레트 색이 자리를 지킨다 */
.thumb {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--c) 30%, var(--cbody, #1b1d22)),
    var(--cbody, #14161a));
}
a.card.feat .thumb { width: 42%; flex: none; aspect-ratio: auto; }
.thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .4s ease;
}
.thumb.has img { opacity: 1; }
.thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--ground) 75%, transparent) 0%, transparent 45%);
}
.badge {
  position: absolute; top: .45rem; right: .45rem; z-index: 1;
  font-size: .66rem; letter-spacing: .04em;
  padding: .16rem .42rem; border-radius: 2px;
  background: color-mix(in srgb, var(--c) 80%, black); color: #fff;
}

.cbody { padding: .7rem .75rem .8rem; display: flex; flex-direction: column;
         gap: .18rem; flex: 1; }
a.card.feat .cbody { padding: 1rem 1.05rem; justify-content: center; }
/* 읽는 사람의 속말 — 카드에서 가장 큰 글자 */
a.card .q {
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.45;
  color: var(--ink); margin-bottom: .5rem; text-wrap: balance;
}
a.card.feat .q { font-size: 1.32rem; margin-bottom: .65rem; }

a.card .who { font-size: .84rem; color: var(--c); font-weight: 600; }
a.card.feat .who { font-size: .95rem; }
a.card .who small { display: block; font-family: var(--sans);
                    font-size: .7rem; color: var(--ink-dim); margin-top: .12rem; }
/* 무엇을 보는 사람인지 — 이름 바로 옆에 */
a.card .who .lab {
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  color: var(--c); vertical-align: middle;
  margin-left: .35rem; padding: .13rem .38rem;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-radius: 2px; letter-spacing: .02em;
}
a.card.feat .who .lab { font-size: .74rem; margin-left: .45rem; }
a.card .tl { font-size: .78rem; color: var(--ink-soft); line-height: 1.45;
             margin: .3rem 0 .45rem; }
a.card.feat .tl { font-size: .87rem; }
a.card .p { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
a.card .p b { font-size: 1rem; font-variant-numeric: tabular-nums; }
a.card .p s { font-size: .72rem; color: var(--ink-dim); }
a.card .p em { font-size: .72rem; font-style: normal; color: var(--c);
               font-weight: 600; }
a.card .meta { font-size: .7rem; color: var(--ink-dim); margin-top: .2rem;
               font-variant-numeric: tabular-nums; }

/* ── 후기 ──────────────────────────────────────────────────── */
.reviews { margin-top: 2.8rem; }
.reviews h2 {
  font-family: var(--serif); font-weight: 400; font-size: 1.15rem;
  margin: 0 0 .9rem; padding-top: 1.4rem;
  border-top: 1px solid var(--panel-line);
}
.rv {
  background: rgba(255,255,255,.035);
  border: 1px solid var(--panel-line); border-radius: 4px;
  padding: .85rem .95rem; margin-bottom: .55rem;
}
.rvtop { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.rvtop .stars { color: #e2b34a; font-size: .82rem; letter-spacing: .06em; }
.rvtop .tag {
  font-size: .68rem; color: var(--ink-dim);
  border: 1px solid var(--panel-line); border-radius: 2px;
  padding: .1rem .38rem;
}
.rv p { margin: 0 0 .5rem; font-size: .86rem; line-height: 1.7;
        color: var(--ink); }
.rv .nick { font-size: .74rem; color: var(--ink-dim); }
.rv .stars { color: #e2b34a; font-size: .9rem; letter-spacing: .06em;
             margin-bottom: .4rem; }

/* ── 후기 쓰기 (리포트 끝) ─────────────────────────────────── */
.writerv {
  margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--panel-line);
  display: grid; gap: .6rem;
}
.writerv h3 { font-family: var(--serif); font-weight: 400;
              font-size: 1.15rem; margin: 0; }
.writerv .hint { margin: 0; }
.starpick { display: flex; gap: .2rem; }
button.st {
  font: inherit; font-size: 1.9rem; line-height: 1;
  background: none; border: none; cursor: pointer;
  color: var(--panel-line); padding: 0 .1rem;
  transition: color .12s, transform .12s;
}
button.st.on { color: #e2b34a; }
button.st:hover { transform: scale(1.12); }

.hidden { display: none !important; }

/* ── 결제 화면 ───────────────────────────────────────────── */
.flabel { font-size: .85rem; font-weight: 600; margin: .9rem 0 .2rem; }
.fhint  { font-size: .76rem; color: var(--ink-dim); line-height: 1.5;
          margin-bottom: .35rem; }

/* 동의.
 *
 * 체크박스를 label로 감싸 글자 아무 데나 눌러도 켜지게 한다. 모바일에서
 * 12px짜리 네모를 정확히 누르라고 하면 그 자리에서 이탈한다. */
.agrees { margin: 1rem 0 .2rem; border: 1px solid var(--panel-line);
          border-radius: 10px; overflow: hidden; }
.agree  { display: flex; align-items: center; gap: .55rem; cursor: pointer;
          padding: .7rem .8rem; font-size: .82rem; }
.agree + .agree { border-top: 1px solid var(--panel-line); }
.agree input { width: 1.05rem; height: 1.05rem; flex: none; margin: 0;
               accent-color: var(--key); }
.agree .txt { flex: 1; color: var(--ink-soft); line-height: 1.45; }
.agree.allrow { background: rgba(255, 255, 255, .04); }
.agree.allrow .txt { color: var(--ink); font-weight: 600; font-size: .88rem; }
.agree .more { background: none; border: none; padding: .15rem .1rem;
               font-size: .74rem; color: var(--ink-dim); cursor: pointer;
               text-decoration: underline; flex: none; }
.agree .more:hover { color: var(--ink-soft); }

/* 사업자 정보 — 전자상거래법상 표시 의무. 눈에 띌 필요는 없지만
   찾으려는 사람에게는 보여야 한다. */
.biz { margin-top: 1.6rem; padding-top: .9rem;
       border-top: 1px solid var(--panel-line);
       display: grid; gap: .18rem; }
.bizrow { display: flex; gap: .6rem; font-size: .7rem; line-height: 1.5; }
.bizrow .k { color: var(--ink-dim); flex: none; min-width: 5.6rem; }
.bizrow .v { color: var(--ink-soft); }

/* 약관 전문 */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex;
         align-items: flex-end; justify-content: center;
         background: rgba(0, 0, 0, .66); padding: 0; }
.sheetbox { width: min(640px, 100%); max-height: 86vh; display: flex;
            flex-direction: column; gap: .6rem; padding: 1.1rem 1.1rem 1.4rem;
            background: var(--panel); border-radius: 14px 14px 0 0;
            border: 1px solid var(--panel-line); border-bottom: none; }
.doc { overflow-y: auto; font-size: .82rem; line-height: 1.72;
       color: var(--ink-soft); -webkit-overflow-scrolling: touch; }
.doc h3 { font-size: 1.05rem; color: var(--ink); margin: 0 0 .7rem; }
.doc h4 { font-size: .88rem; color: var(--ink); margin: 1.1rem 0 .3rem; }
.doc p  { margin: 0 0 .55rem; white-space: pre-wrap; }
button.ghost { background: none; border: 1px solid var(--panel-line);
               color: var(--ink-soft); border-radius: 8px; padding: .6rem;
               font-size: .84rem; cursor: pointer; flex: none; }
button.ghost:hover { color: var(--ink); }

@media (min-width: 700px) {
  .sheet { align-items: center; }
  .sheetbox { border-radius: 14px; border-bottom: 1px solid var(--panel-line); }
}

/* 결제 화면은 내용이 길어 칸을 넓게 쓴다 */
#box.wide { max-height: 86%; }

/* 약관 본문 */
.doc .dli { position: relative; padding-left: .8rem; margin: 0 0 .3rem; }
.doc .dli::before { content: '·'; position: absolute; left: .1rem;
                    color: var(--ink-dim); }
.doc .dtable { display: grid; gap: .5rem; margin: .5rem 0 .8rem; }
.doc .drow { padding: .55rem .7rem; border-radius: 8px;
             background: rgba(255, 255, 255, .04);
             display: grid; gap: .2rem; }
.doc .dfield { display: flex; gap: .5rem; font-size: .78rem; line-height: 1.55; }
.doc .dfield .dk { color: var(--ink-dim); flex: none; min-width: 4.6rem; }
.doc .dfield .dv { color: var(--ink-soft); }
.doc .drow .dfield:first-child .dv { color: var(--ink); font-weight: 600; }

/* 간판.
 *
 * 그림이 오기 전까지는 글자가 대신 선다. 둘 다 같은 자리를 쓰므로
 * 파일을 올려도 아래 배치가 흔들리지 않는다. */
.brand { display: flex; justify-content: center; align-items: center;
         margin: -.6rem 0 .4rem; }
/* 정사각형 로고다. 안에 이름·부제·태그라인이 다 들어 있어서 작게 넣으면
   아무것도 안 읽힌다. 화면 폭에 맞춰 크게 두되 위아래 여백은 로고 자체의
   여백이 대신하므로 바깥 여백은 줄인다. */
.brand img { width: min(210px, 56%); height: auto;
             object-fit: contain; display: block; }
.brand:not(.has) img { display: none; }
.brand .wordmark { text-align: center; font-family: var(--serif);
                   padding: 2.2rem 0 1.6rem; }
.brand .wm   { font-size: 1.9rem; letter-spacing: .2em; color: var(--ink);
               text-indent: .2em; }
.brand .wsub { font-size: .95rem; letter-spacing: .5em; color: var(--ink-soft);
               text-indent: .5em; margin-top: .3rem; }
.brand .wtag { font-size: .72rem; letter-spacing: .16em; color: var(--ink-dim);
               text-indent: .16em; margin-top: .9rem; }

/* ── 접수 화면 ───────────────────────────────────────────── */
.placed-mark { text-align: center; font-size: 2rem; color: var(--key);
               line-height: 1; padding: 1.6rem 0 .4rem; }
.placed-h { font-family: var(--serif); font-size: 1.45rem; text-align: center;
            margin: 0 0 1.4rem; color: var(--ink); }
.placed-p { font-size: .87rem; line-height: 1.8; color: var(--ink-soft);
            margin: 0 0 1rem; }
.placed-label { font-size: .78rem; font-weight: 600; color: var(--key);
                letter-spacing: .1em; margin: 1.8rem 0 .5rem;
                padding-top: 1.4rem; border-top: 1px solid var(--panel-line); }
.placed-mail { display: flex; gap: .7rem; align-items: baseline;
               padding: .8rem .9rem; margin: 0 0 1rem; border-radius: 9px;
               background: rgba(255, 255, 255, .05); }
.placed-mail .k { font-size: .74rem; color: var(--ink-dim); flex: none; }
.placed-mail .v { font-size: .9rem; color: var(--ink); font-weight: 600;
                  word-break: break-all; }
.placed-note { font-size: .74rem; color: var(--ink-dim); line-height: 1.7;
               margin: 1.2rem 0 0; }

/* 보관함 주소. 읽기 전용이지만 눌러서 고를 수 있어야 한다 —
   모바일에서 복사가 막히면 직접 선택하는 길이 남아야 한다. */
/* input과 button 모두 기본이 width:100%라 그대로 두면 서로 밀어낸다.
   min-width:0이 있어야 주소칸이 내용보다 좁게 줄어들 수 있다. */
.linkbox { display: flex; gap: .5rem; margin: 0 0 1.1rem; }
.linkbox input { flex: 1 1 auto; width: auto; min-width: 0;
                 font-size: .78rem; }
.linkbox button { flex: 0 0 auto; width: auto; padding: .6rem 1rem; }

a.primary-link { display: block; text-align: center; text-decoration: none;
                 background: var(--key); color: #fff; border-radius: 9px;
                 padding: .85rem; font-size: .92rem; font-weight: 600; }

.keep { font-size: .76rem; line-height: 1.8; color: var(--ink-dim);
        display: grid; gap: .5rem; margin: .9rem 0 0;
        padding: .9rem 1rem; border-radius: 9px;
        background: rgba(255, 255, 255, .04); }