/* 시송나라 사용자 앱 — Nocturne Hanji 스타일 (DESIGN.md 기준). 글자 크기는 rem 이라 「A+」 로 함께 커진다. */
:root {
  --bg: #121316; --card: #1A1C22; --card2: #21242C;
  --line: #423C33; --line2: #5A4F3E; --line3: #8C734B;
  --gold: #D4AF37; --amber: #E07A2C; --moon: #E6B15C;
  --ink: #FDFBF7; --ink2: #F3F0EA; --muted: #C2BCB2;
  --serif: "Noto Serif KR", "Noto Serif", serif;
  --sans: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}
html { font-size: 16px; }
html.size2 { font-size: 18px; }
html.size3 { font-size: 20px; }
* { box-sizing: border-box; }
body { margin: 0; background: #0B0C0E; color: var(--ink); font-family: var(--sans); -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.shell { max-width: 30rem; min-height: 100vh; margin: 0 auto; background: var(--bg); display: flex; flex-direction: column; position: relative; }
.appbar { position: sticky; top: 0; z-index: 5; height: 4.5rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; background: var(--bg); }
.brand { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--gold); }
.bigger { width: 3.5rem; height: 3.5rem; border-radius: 4px; background: var(--card); border: 1.5px solid var(--line2); color: var(--gold); font-size: 1.25rem; font-weight: 700; cursor: pointer; }

.view { flex: 1; padding: .75rem 1.25rem 7rem; }
.view > h1.title:first-child { margin-top: 0; }
.eyebrow { font-size: 1rem; font-weight: 600; color: var(--moon); letter-spacing: .02em; }
h1.title { margin: .4rem 0 .5rem; font-family: var(--serif); font-size: 2.125rem; line-height: 1.4; font-weight: 700; }
.sub { font-size: 1.125rem; line-height: 1.6; color: var(--muted); margin: 0; }
h2.sec { margin: 2rem 0 .75rem; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }

.seg { display: flex; margin-top: 1.25rem; border: 1.5px solid var(--line2); border-radius: 4px; background: var(--card); }
.seg button { flex: 1; min-width: 0; min-height: 3.5rem; padding: .25rem .125rem; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 1.0625rem; line-height: 1.3; word-break: keep-all; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--card2); color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--gold); }
.stylebar { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; padding: .875rem 1rem; border: 1.5px solid var(--line2); border-radius: 4px; background: var(--card); }
.stylebar .grow { flex: 1; min-width: 0; }
.stylename { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.chip.pick { display: flex; align-items: center; background: var(--gold); border-color: var(--ink2); color: #121316; font-weight: 700; }
.backlink { display: inline-flex; align-items: center; min-height: 3rem; margin-bottom: .5rem; font-size: 1.125rem; font-weight: 700; color: var(--gold); }
.sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; margin-top: .875rem; }
.scard { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1.5px solid var(--gold); border-radius: 8px; overflow: hidden; background: #FBF8F1; color: #1B1B1F; cursor: pointer; }
.scard.sel { border-width: 3px; box-shadow: 0 0 0 2px var(--amber); }
.scard.wide { width: 100%; margin-top: 1.25rem; padding: 1rem 1.125rem; }
.sthumb { position: relative; display: block; height: 6.5rem; }
.sthumb .hid { position: absolute; left: .5rem; bottom: .5rem; padding: .2rem .45rem; border-radius: 4px; background: var(--bg); color: var(--amber); border: 1px solid var(--amber); font-size: .8125rem; font-weight: 700; }
.sthumb .chk { position: absolute; right: .5rem; top: .5rem; width: 2rem; height: 2rem; border-radius: 4px; background: var(--gold); color: #121316; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.sname { display: block; padding: .75rem .75rem 0; font-family: var(--serif); font-size: 1.1875rem; font-weight: 700; line-height: 1.4; }
.sdesc { display: block; padding: .25rem .75rem 0; font-size: .9375rem; line-height: 1.5; color: #4F4938; }
.scnt { display: block; padding: .5rem .75rem .75rem; font-size: .875rem; font-weight: 600; color: #8A4B00; }
.scard.wide .sname, .scard.wide .sdesc { padding-left: 0; padding-right: 0; }
.howto { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.5rem; margin-top: .75rem; padding: 0 1rem; border: 1.5px solid #BDB59F; border-radius: 4px; background: transparent; color: #4F4938; font-size: 1.0625rem; font-weight: 700; cursor: pointer; }
.howbox { margin-top: .75rem; padding: 1rem 1rem .25rem; border: 1px solid #D9D2C0; border-radius: 4px; background: #F5F0E3; }
.howhead { font-family: var(--serif); font-size: 1.1875rem; font-weight: 700; color: #1B1B1F; margin-bottom: .75rem; }
.howrow { display: flex; gap: .75rem; padding: .625rem 0 .875rem; border-top: 1px solid #D9D2C0; }
.howrow:first-of-type { border-top: 0; }
.howrow b { font-family: var(--serif); font-size: 1.125rem; color: #1B1B1F; }
/* 만드는 중에도 아래 메뉴(GNB)는 계속 보인다(기획자 10-12). 위에는 뒤로 + 단계 막대. */
.stephead { font-size: 1.0625rem; color: var(--muted); margin: .25rem 0 .5rem; }
.stepbar { display: flex; gap: .375rem; margin-bottom: 1rem; }
.stepbar span { flex: 1; height: .5rem; border-radius: 2px; background: var(--line2); }
.stepbar span.on { background: var(--gold); }
.field { margin-top: 1.25rem; }
.field > label { display: block; font-size: 1.1875rem; font-weight: 700; }
/* 입력 칸 안은 흰 바탕 + 짙은 글씨 */
.input, .area { width: 100%; margin-top: .5rem; padding: 0 1rem; min-height: 3.75rem; border-radius: 4px; border: 1.5px solid var(--gold); background: #FFFFFF; color: #1B1B1F; font-size: 1.25rem; font-family: inherit; }
.input::placeholder, .area::placeholder { color: #7A7360; }   /* 흐릿하지만 읽을 수 있게(흰 바탕 대비 약 4.8:1) */
.input:focus, .area:focus { outline: 3px solid var(--amber); border-color: var(--amber); }
.area { margin-top: 0; padding: .875rem 1rem; min-height: 14rem; line-height: 1.7; resize: none; overflow: hidden; }   /* 글이 길어지면 칸이 따라 커진다 */
.check { display: flex; gap: .875rem; align-items: flex-start; margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--line2); border-radius: 4px; background: var(--card); font-size: 1.0625rem; line-height: 1.6; cursor: pointer; }
.check input { flex: none; width: 1.75rem; height: 1.75rem; margin: .1rem 0 0; accent-color: var(--gold); }
.soonpanel { padding: 1rem; border: 1.5px dashed var(--line2); border-radius: 4px; }
.soonpanel .search { margin-top: .75rem; }
.phototap { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 5rem; margin-top: .875rem; padding: .875rem 1rem; border: 2px solid var(--gold); border-radius: 4px; background: var(--card2); color: var(--gold); text-align: left; cursor: pointer; font-size: 1.1875rem; }
.phototap b { color: var(--ink); font-size: 1.25rem; }
.phototap small { color: var(--muted); font-size: 1rem; }
.photoprev { display: block; width: 100%; max-height: 16rem; margin-top: .875rem; object-fit: contain; border: 1px solid var(--line2); border-radius: 4px; background: #000; }
.webfor { margin-top: .875rem; padding: .75rem 1rem; border: 1px solid var(--line2); border-radius: 4px; background: var(--card); }
.found { margin-top: .625rem; padding: 1rem; border: 1px solid #D9D2C0; border-radius: 4px; background: #FFFFFF; color: #1B1B1F; font-family: var(--serif); font-size: 1.1875rem; line-height: 1.8; }   /* 칸 안 스크롤 없이 전체를 펼쳐 보인다 */
.found .gap { height: .875rem; }
.found .unc { background: #FFE9B8; box-shadow: -4px 0 0 var(--amber); padding-left: .25rem; }
.srcs { margin: .375rem 0 0; padding-left: 1.25rem; font-size: 1.0625rem; line-height: 1.9; }
.srcs a { color: #6E4B00; text-decoration: underline; word-break: break-all; }
.musts { margin: .5rem 0 0; padding-left: 1.25rem; font-size: 1.125rem; line-height: 1.75; color: #1B1B1F; }
.musts li { margin-bottom: .375rem; }
.steps .card .big { align-self: center; }
.recbox { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1.5px solid var(--amber); border-radius: 4px; background: var(--card); }
.recdot { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #E5484D; animation: pulse 1s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: .35; } 100% { opacity: 1; } }
.rectime { font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.level { height: .75rem; margin-top: .75rem; border-radius: 2px; background: var(--line2); overflow: hidden; }
.level > div { height: 100%; width: 0; background: var(--gold); transition: width .08s linear; }
.btn.rec { background: #C23B3B; border-color: #FDFBF7; color: #fff; min-height: 4.5rem; font-size: 1.375rem; }
.btn.recstop { background: #FDFBF7; color: #1B1B1F; border-color: var(--gold); min-height: 4.5rem; font-size: 1.375rem; }
.sthumb, .srow-img { background-size: cover; background-position: center; }
.slist { display: flex; flex-direction: column; gap: .875rem; margin-top: 1rem; }
.srow { padding: .75rem; border: 1.5px solid var(--gold); border-radius: 8px; background: #FBF8F1; color: #1B1B1F; }
.srow.sel { border-width: 3px; box-shadow: 0 0 0 2px var(--amber); }
.srow-top { display: flex; gap: .875rem; align-items: center; }
.srow-img { flex: none; width: 5.5rem; height: 4.125rem; border-radius: 4px; background-color: #3A3226; }
.srow-txt { display: flex; flex-direction: column; min-width: 0; }
.srow-txt .sname, .srow-txt .sdesc { padding: 0; }
.rectag { display: inline-block; margin-left: .375rem; padding: .1rem .5rem; border-radius: 4px; background: #1B1B1F; color: var(--gold); font-family: var(--sans); font-size: .9375rem; font-weight: 700; vertical-align: .1rem; }
.srow-btns { display: flex; gap: .625rem; margin-top: .75rem; }
.srow-btns button { flex: 1; min-height: 3.25rem; border-radius: 4px; font-size: 1.125rem; font-weight: 700; cursor: pointer; }
.b-prev { background: #FBF8F1; color: #6E4B00; border: 1.5px solid var(--line3); }
.b-pick { background: var(--gold); color: #121316; border: 1px solid #1B1B1F; }
.b-pick.on { background: #1B1B1F; color: var(--gold); border-color: var(--gold); }
.srow-img { position: relative; }
.ordn { position: absolute; left: .25rem; top: .25rem; width: 1.625rem; height: 1.625rem; border-radius: 4px; background: #1B1B1F; color: var(--gold); font-weight: 700; font-size: 1.0625rem; display: flex; align-items: center; justify-content: center; }
.sheet-bg { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .72); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 30rem; max-height: 92vh; overflow-y: auto; padding: 1rem 1.25rem 1.25rem; border-radius: 12px 12px 0 0; background: #FBF8F1; color: #1B1B1F; }
.sheet img, .sheet video { display: block; width: 100%; border-radius: 4px; border: 1px solid #D9D2C0; background: #000; }
.sheet .btn { margin-top: .5rem; }
.sheet .sname, .sheet .sdesc { color: #1B1B1F; }
.sheet .note { color: #4F4938; }
.sheet .btn.alt { background: #FBF8F1; color: #6E4B00; border-color: var(--line3); }
.msteps { margin-top: .75rem; }
.mstep { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-top: 1px solid #D9D2C0; font-size: 1.1875rem; color: var(--c-sub); }
.mstep:first-child { border-top: 0; }
.mstep .mmark { flex: none; width: 2rem; height: 2rem; border-radius: 4px; border: 1.5px solid #BDB59F; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.mstep.now { color: var(--c-ink); font-weight: 700; }
.mstep.now .mmark { background: var(--gold); border-color: #1B1B1F; color: #121316; }
.mstep.done { color: #4F4938; }
.mstep.done .mmark { background: #1B1B1F; border-color: #1B1B1F; color: var(--gold); }
.pvvid { display: block; width: 100%; margin: .5rem 0 .25rem; border-radius: 4px; border: 1px solid var(--line2); background: #000; }
.chips { display: flex; gap: .625rem; margin-top: 1rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 3rem; padding: 0 1.125rem; border-radius: 4px; background: var(--card); border: 1.5px solid var(--line2); color: var(--ink); font-size: 1.125rem; cursor: pointer; }
.chip.on { background: var(--gold); border-color: var(--ink2); color: #121316; font-weight: 700; }

/* 카드 = Stitch 승인 화면대로 아이보리(밝은) 바탕 + 짙은 글씨 + 가는 금색 테두리. 페이지 바탕만 어둡다. */
.card { --c-ink: #1B1B1F; --c-sub: #4F4938; --c-line: #D9D2C0; --c-poet: #8A4B00;
        background: #FBF8F1; color: var(--c-ink); border: 1.5px solid var(--gold); border-radius: 8px; overflow: hidden; margin-top: 1.25rem; }
.card.pad { padding: 1.25rem; }
.card.hl { border: 2px solid var(--gold); }
.card.dash { --c-ink: var(--ink); --c-sub: var(--muted); background: transparent; color: var(--ink); border: 1.5px dashed var(--line2); }
.thumb { position: relative; height: 11.5rem; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .9375rem; }
.badge { position: absolute; left: .75rem; top: .75rem; padding: .35rem .6rem; border-radius: 4px; background: var(--bg); border: 1px solid var(--gold); color: var(--gold); font-size: 1rem; font-weight: 700; }
.badge.song { border-color: var(--amber); color: var(--amber); }
.tagex { position: absolute; right: .75rem; top: .75rem; padding: .25rem .5rem; border-radius: 4px; background: var(--bg); color: var(--muted); font-size: .875rem; border: 1px solid var(--line2); }
.meta { display: flex; justify-content: space-between; gap: .75rem; font-size: 1.0625rem; }
.meta .poet { color: var(--c-poet, var(--moon)); font-weight: 700; }
.meta .sty { color: var(--c-sub, var(--muted)); }
.reciter { margin-top: .25rem; font-size: 1.0625rem; color: var(--c-sub, var(--muted)); }
.ctitle { margin: .4rem 0 0; font-family: var(--serif); font-size: 1.625rem; line-height: 1.5; font-weight: 600; color: var(--c-ink, var(--ink)); }
.cbody { padding: 1.125rem 1.25rem 1.25rem; }
.card .note { color: var(--c-sub, var(--muted)); }
.card .lbl { color: var(--c-poet, var(--moon)); }
.card .big { color: var(--c-ink, var(--ink)); }
.card .kv { border-top-color: var(--c-line, var(--line)); }
.card .kv span:last-child { color: var(--c-sub, var(--muted)); }
.card .btn.alt { background: #FBF8F1; color: #6E4B00; border-color: var(--line3); }
.card .btn.off { background: transparent; border: 1.5px dashed #99907C; color: var(--c-sub, var(--muted)); }
.card .tag { color: var(--c-sub, var(--muted)); border-color: #BDB59F; }
.card .tag.open { color: #6E4B00; border-color: var(--gold); background: #F7EBC1; }

.btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 3.5rem; margin-top: 1rem; border-radius: 4px; background: var(--gold); border: 1px solid var(--ink2); color: #121316; font-size: 1.125rem; font-weight: 700; cursor: pointer; }
.btn.alt { background: var(--card); border: 1.5px solid var(--line3); color: var(--gold); }
.btn.off { background: transparent; border: 1.5px dashed var(--line2); color: var(--muted); cursor: default; }
.lbl { font-size: 1rem; font-weight: 600; color: var(--moon); }
.big { margin-top: .375rem; font-size: 1.25rem; line-height: 1.6; font-weight: 500; }
.note { font-size: 1.0625rem; line-height: 1.6; color: var(--muted); margin: .375rem 0 0; }
.row { display: flex; align-items: center; gap: .75rem; }
.row .grow { flex: 1; min-width: 0; }
.tag { flex: none; padding: .5rem .75rem; border-radius: 4px; border: 1px solid var(--line2); font-size: 1rem; font-weight: 600; color: var(--muted); }
.tag.open { border-color: var(--gold); color: var(--gold); }
.num { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 4px; background: var(--gold); color: #121316; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.125rem; }
.steps .card { display: flex; gap: .875rem; padding: 1.125rem 1.25rem; }
.steps b { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.search { width: 100%; min-height: 3.75rem; margin-top: 1rem; padding: 0 1rem; border-radius: 4px; border: 1.5px solid var(--gold); background: #FFFFFF; color: #1B1B1F; font-size: 1.25rem; font-family: inherit; }
.search::placeholder { color: #6B6454; }
.search:disabled { background: #EDE8DA; }
.kv { display: flex; justify-content: space-between; padding: 1rem 0; border-top: 1px solid var(--line); font-size: 1.125rem; }
.kv:first-child { border-top: 0; }
.kv span:last-child { color: var(--muted); }
.warn { margin-top: 1rem; padding: 1rem; border: 1px solid var(--amber); border-radius: 4px; color: var(--ink2); }

.tabs { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 30rem; height: 5.25rem; display: flex; background: var(--bg); border-top: 1px solid var(--line); z-index: 10; }
/* 아래 탭 글자는 「A+」 로 커지지 않게 px 고정(글자가 커지면 4칸에 안 들어감) */
/* 하단 메뉴(첨부 모양): 검정 바탕 · 칸 테두리 없음 · 선택된 탭만 금색 면 + 짙은 글씨 */
.tabs { padding: .375rem .5rem; gap: .375rem; align-items: stretch; }
.tabs a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; border: 0; border-radius: 6px; color: #F3F0EA; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; word-break: keep-all; }
.tabs a.on { background: var(--gold); color: #121316; font-weight: 700; }
.tabs a.on svg { stroke: #121316; stroke-width: 2.3; }
.tabs a.on svg .fillme { fill: #121316; }
.tabs svg { width: 1.625rem; height: 1.625rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ytsteps{margin:.5rem 0 1rem 1.25rem;padding:0;line-height:1.7;font-size:1.05rem}
.ytbox .btn{margin-top:.75rem}
/* 유튜브 상자는 밝은 카드라 체크 줄도 밝은 바탕·어두운 글씨로 */
.ytbox .check{background:#fff;color:#1B1B1F;border-color:#E3B84F;margin-top:.875rem}
.ytbox .check small{color:#5B5B63;font-size:.9375rem}

/* 사진 안내(쉽게 만드는 법 · 유튜브 공개하는 법) */
.gstep { margin-top: 1.75rem; }
.ghead { display: flex; gap: .75rem; align-items: center; }
.ghead b { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
.gstep .note { margin: .5rem 0 0; font-size: 1.0625rem; line-height: 1.7; }
.gimg { display: block; width: 100%; height: auto; margin-top: .75rem; border: 1px solid var(--line2); border-radius: 6px; background: var(--card); }

/* 정보마당 첫 화면: 큰 코너 상자 2×2 */
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; margin-top: 1.25rem; }
.corner { display: flex; flex-direction: column; justify-content: space-between; gap: .75rem; min-height: 10.5rem; padding: 1.125rem 1rem; border: 2px solid var(--gold); border-radius: 6px; background: #FBF8F1; color: #1B1B1F; text-decoration: none; }
.corner b { font-family: var(--serif); font-size: 1.3125rem; font-weight: 700; line-height: 1.35; }
.corner .csub { font-size: 1rem; color: #5B5B63; line-height: 1.5; }
.corner .copen { align-self: flex-end; font-weight: 700; font-size: 1.0625rem; color: #7A5A00; }
.corner:active { background: #F2E7C8; }

/* 정보마당 첫 화면: 안내 한 칸(가로 막대) + 대회 소식 목록 */
.corner.bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5.5rem; margin-top: .875rem; }
.corner.bar .bt { display: flex; flex-direction: column; gap: .25rem; }
.corner.bar .copen { align-self: center; flex: none; }
.subsec { margin: 1.25rem 0 0; font-size: 1.1875rem; font-weight: 700; color: var(--gold); }
.crow { display: flex; gap: .75rem; align-items: center; margin-top: .625rem; padding: .875rem 1rem; border: 1.5px solid var(--gold); border-radius: 6px; background: #FBF8F1; color: #1B1B1F; }
.crow[hidden] { display: none; }
.crow .cinfo { flex: 1; min-width: 0; }
.crow .ctitle { margin: 0; font-size: 1.1875rem; color: #1B1B1F; line-height: 1.4; }
.crow .note { margin: .25rem 0 0; color: #5B5B63; font-size: 1rem; }
.crow .clink { flex: none; font-weight: 700; color: #7A5A00; font-size: 1.0625rem; text-decoration: none; }
.crow.ex { opacity: .85; }

.crow { display: block; }
.crow .chead { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.crow .ctitle { margin: .5rem 0 0; }
.crow .note { margin: .375rem 0 0; line-height: 1.55; }
.crow.ex .cinfo { display: block; }

/* 별표 묶음 머리글 */
.starhead { display: flex; gap: .875rem; align-items: center; margin-top: 2rem; padding: .875rem 1rem; border: 2px solid var(--gold); border-radius: 6px; background: #1d1b14; }
.starhead .star { flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--gold); color: #121316; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; }
.starhead h2 { margin: 0; font-family: var(--serif); font-size: 1.375rem; color: var(--gold); }
.starhead .note { margin: .25rem 0 0; }

/* 대회 종류 표시(접수 상태 위) · 마감된 대회는 흐리게 */
.ckind { display: inline-block; margin-bottom: .5rem; padding: .125rem .625rem; border-radius: 4px; font-size: 1rem; font-weight: 700; background: #1B1B1F; color: #fff; }
.ckind.dika { background: #7A5A00; }
.crow.isclosed { border-color: var(--line2); opacity: .75; }

/* 마이페이지: 내 영상 카드 */
.mv { margin-top: .75rem; }
.mvhead { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.mvdate { color: #5B5B63; font-size: 1rem; }
.mv .ctitle { margin: .5rem 0 0; color: #1B1B1F; }
.mv .note { margin: .375rem 0 0; color: #5B5B63; }
.mvbtn { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.mvbtn .btn { margin-top: 0; }

/* 마이페이지: 이용권 · 폰 저장 · 알림 */
.big.tk { font-size: 1.75rem; }
.rules { margin: .75rem 0 0; padding-left: 1.25rem; color: #3B3B42; font-size: 1.0625rem; line-height: 1.65; }
.rules li { margin-top: .375rem; }
.mvsaved { color: #2E6B2E !important; font-weight: 700; min-height: 1.4rem; }
.toast { position: fixed; left: 50%; bottom: 6rem; transform: translateX(-50%); z-index: 200; max-width: 90%; padding: .875rem 1.125rem; border-radius: 6px; background: #1B1B1F; color: #fff; border: 1.5px solid var(--gold); font-size: 1.0625rem; line-height: 1.5; }

/* 낭송대행요청 신청서 */
.field .area { min-height: 12rem; }
.warn[hidden] { display: none; }

/* 푸터(사업자 정보·약관 링크) · 정보마당의 약관 줄 */
.foot { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--sub, #b8b3a3); font-size: 1rem; line-height: 1.7; }
.foot-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.foot-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; padding: .375rem 0; }
.foot-biz { margin-top: .75rem; }
.foot-biz summary { cursor: pointer; padding: .5rem 0; font-weight: 600; }
.foot-biz dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: .5rem 0 0; }
.foot-biz dt { color: var(--text, #e3e2e6); }
.foot-biz dd { margin: 0; }
.foot-copy { margin: .75rem 0 0; font-size: .9375rem; }
.legal-list { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.legal-row { display: flex; justify-content: space-between; align-items: center; min-height: 3.5rem; padding: .75rem 1rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); font-size: 1.125rem; }
.legal-row:last-child { border-bottom: 0; }
.legal-row:active { background: rgba(255,255,255,.06); }

/* 이용권 구매하기 */
.buy-card { text-align: center; }
.buy-name { font-family: var(--serif); font-size: 1.375rem; font-weight: 700; }
.buy-price { margin: .375rem 0 .125rem; font-size: 2rem; font-weight: 700; color: #7A5A00; }
.buy-sub { font-size: 1.0625rem; color: #5B5B63; }
.buy-rules { margin: 0; padding-left: 1.25rem; line-height: 1.7; font-size: 1.0625rem; }
.buy-rules li { margin: .25rem 0; }

/* 이용권 구매하기 — 사용 안내(가격 위) + 고급 이용권(고딕 아치 문양) */
.how { margin-top: .5rem; }
.how-head { margin-top: 1rem; }
.how-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.how-step { display: flex; gap: .875rem; align-items: flex-start; padding: 1rem 1rem; margin-bottom: .75rem; border: 1px solid var(--line2); border-radius: 8px; background: linear-gradient(180deg, rgba(212,175,55,.07), rgba(212,175,55,0)); }
.how-no { flex: 0 0 auto; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); font-family: var(--serif); font-size: 1.25rem; font-weight: 700; }
.how-step b { display: block; font-size: 1.1875rem; line-height: 1.45; }
.how-step p { margin: .25rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--muted, #cfc8b8); }
.how-note { margin: .5rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--muted, #cfc8b8); padding-left: .25rem; }

.tkt-list { display: grid; gap: 1.25rem; margin-top: .75rem; }
.tkt { --g1: #f2ca50; --g2: #b8912b; --g3: #6f5714; position: relative; overflow: hidden; text-align: center; padding: 1.75rem 1.5rem 2.5rem;
  border-radius: 14px; color: #f3ead2;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(242,202,80,.16), rgba(242,202,80,0) 60%),
    repeating-linear-gradient(45deg, rgba(242,202,80,.045) 0 2px, rgba(0,0,0,0) 2px 14px),
    repeating-linear-gradient(-45deg, rgba(242,202,80,.045) 0 2px, rgba(0,0,0,0) 2px 14px),
    linear-gradient(160deg, #26200f 0%, #17140c 55%, #231c0c 100%);
  border: 1.5px solid var(--g2);
  box-shadow: inset 0 0 0 4px #17140c, inset 0 0 0 5.5px var(--g2), 0 10px 26px rgba(0,0,0,.45); }
.tkt-2 { --g1: #ffe58a; --g2: #cfa535; }
.tkt-3 { --g1: #fff0b0; --g2: #e3bd45; box-shadow: inset 0 0 0 4px #17140c, inset 0 0 0 5.5px var(--g2), inset 0 0 0 9px #17140c, inset 0 0 0 10px var(--g3), 0 12px 30px rgba(242,202,80,.18); }
.tkt-n { position: absolute; top: 56%; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bg, #121316); border: 1.5px solid var(--g2); z-index: 2; }
.tkt-nl { left: -.8rem; } .tkt-nr { right: -.8rem; }
.tkt-cs { position: absolute; width: 1.75rem; height: 1.75rem; z-index: 1; }
.tkt-cs.tl { top: .7rem; left: .7rem; } .tkt-cs.tr { top: .7rem; right: .7rem; transform: scaleX(-1); }
.tkt-cs.bl { bottom: .7rem; left: .7rem; transform: scaleY(-1); } .tkt-cs.br { bottom: .7rem; right: .7rem; transform: scale(-1, -1); }
.tkt-c { width: 100%; height: 100%; fill: none; stroke: var(--g1); stroke-width: 1.6; }
.tkt-c .thin { stroke-width: .9; opacity: .65; } .tkt-c .gem { fill: var(--g1); stroke: none; }
.tkt-brand { font-family: var(--serif); font-size: .9375rem; letter-spacing: .18em; color: var(--g1); }
.tkt-brand span { font-size: .5rem; vertical-align: middle; opacity: .8; }
.tkt-title { margin-top: .25rem; font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; color: #fff6dc; }
.tkt-seal { position: relative; width: 8.5rem; height: 9.5rem; margin: .75rem auto .25rem; }
.tkt-arch { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(242,202,80,.07); stroke: var(--g1); stroke-width: 2; stroke-linejoin: round; }
.tkt-arch .in { fill: none; stroke: var(--g2); stroke-width: 1.4; } .tkt-arch .in2 { fill: none; stroke: var(--g3); stroke-width: 1.2; }
.tkt-arch .gem { fill: var(--g1); stroke: none; }
.tkt-count { position: absolute; inset: 1.4rem 0 0; display: flex; align-items: baseline; justify-content: center; gap: .15rem; padding-top: .9rem; }
.tkt-count b { font-family: var(--serif); font-size: 3.75rem; line-height: 1; font-weight: 700; background: linear-gradient(180deg, var(--g1), var(--g2) 70%, var(--g3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--g1); }
.tkt-count small { font-family: var(--serif); font-size: 1.375rem; color: var(--g1); }
.tkt-sub { font-size: 1.0625rem; color: #d8cfb6; }
.tkt-perf { margin: 1rem -.25rem .9rem; border-top: 2px dashed var(--g3); }
.tkt-price { font-family: var(--serif); font-size: 2.25rem; font-weight: 700; color: var(--g1); line-height: 1.2; }
.tkt-per { margin-top: .125rem; font-size: 1rem; color: #cfc6ac; min-height: 1.5rem; }
.tkt-best { display: inline-block; margin-top: .5rem; padding: .2rem .8rem; border-radius: 999px; background: linear-gradient(90deg, var(--g2), var(--g1)); color: #2b2100; font-weight: 700; font-size: .9375rem; }
.tkt-btn { margin-top: .9rem; padding: .9rem 1rem; border: 1.5px dashed var(--g2); border-radius: 6px; color: #d8cfb6; font-size: 1.125rem; font-weight: 700; }
.tkt-count b.two { font-size: 2.875rem; }

/* 확인 창(모달) */
.cm-bg { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.78); display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.cm { width: 100%; max-width: 26rem; padding: 1.5rem 1.25rem 1.25rem; border-radius: 14px; text-align: center; color: #f3ead2;
  background: linear-gradient(160deg, #26200f 0%, #17140c 60%, #231c0c 100%); border: 1.5px solid #b8912b; box-shadow: inset 0 0 0 4px #17140c, inset 0 0 0 5.5px #b8912b, 0 14px 40px rgba(0,0,0,.6); }
.cm-seal { color: #f2ca50; font-size: 1.25rem; letter-spacing: .5em; }
.cm h2 { margin: .5rem 0 .5rem; font-family: var(--serif); font-size: 1.5rem; line-height: 1.4; color: #fff6dc; }
.cm p { margin: .5rem 0; font-size: 1.1875rem; line-height: 1.65; }
.cm-note { color: #d8cfb6; font-size: 1.0625rem !important; }
.cm .btn { margin-top: .875rem; }
.cm, .cm h2, .cm p { word-break: keep-all; }

/* 이용권 티켓 — 가로형(높이를 절반으로) */
.tkt-list { gap: .875rem; }
.tkt { display: grid; grid-template-columns: 6rem 1fr; align-items: center; column-gap: 1rem; text-align: left; padding: 1rem 1.25rem 1rem 1rem; }
.tkt-seal { width: 6rem; height: 7rem; margin: 0; }
.tkt-count { inset: .9rem 0 0; padding-top: .5rem; }
.tkt-count b { font-size: 2.5rem; }
.tkt-count b.two { font-size: 2rem; }
.tkt-count small { font-size: 1rem; }
.tkt-info { position: relative; padding-left: 1rem; border-left: 2px dashed var(--g3); min-width: 0; }
.tkt-brand { font-size: .75rem; letter-spacing: .12em; }
.tkt-title { margin-top: .125rem; font-size: 1rem; }
.tkt-price { margin-top: .25rem; font-size: 1.75rem; }
.tkt-per { margin-top: 0; font-size: .9375rem; min-height: 0; }
.tkt-best { display: inline-block; margin: .25rem 0 0; padding: .05rem .5rem; font-size: .8125rem; }
.tkt-btn { margin-top: .5rem; padding: .5rem .75rem; font-size: 1rem; text-align: center; }
.tkt-n { top: auto; }
.tkt-nl { left: 6.1rem; top: -.8rem; } .tkt-nr { left: 6.1rem; right: auto; bottom: -.8rem; }
.tkt-cs { width: 1.25rem; height: 1.25rem; }
.tkt-cs.tl { top: .4rem; left: .4rem; } .tkt-cs.tr { top: .4rem; right: .4rem; }
.tkt-cs.bl { bottom: .4rem; left: .4rem; } .tkt-cs.br { bottom: .4rem; right: .4rem; }
.tkt-perf, .tkt-sub { display: none; }
/* 영상 편수를 가장 크게: 제목(영상 N편 만들기) 다음에 가격 */
.tkt-brand { font-size: .6875rem; }
.tkt-title { margin-top: .125rem; font-size: 1.375rem; font-weight: 700; color: #fff6dc; }
.tkt-price { margin-top: .125rem; font-size: 2rem; }
.tkt-per { font-size: .9375rem; line-height: 1.5; }
.tkt-count small { font-size: 1.125rem; }
.tkt-per, .tkt-title, .tkt-price { word-break: keep-all; }