/* 로고: 2026-10-27 글꼴 글자(금색 그라데이션) → 브랜드 워드마크 SVG(brand/logo-appbar-dark.svg, 원본 luen-docs/brand).
   그래서 옛 로고 글꼴(LuenLogo, fonts/serif.otf)은 지웠다(2026-10-27, git 기록으로 복구 가능).
   본문·제목 글꼴 Noto Sans KR · Noto Serif KR 은 fonts/fonts.css 에서 자체 호스팅한다. */
:root{color-scheme:dark;--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--bg:#0d0b09;--panel:#16130f;--line:#2b241b;--gold:#c9a46a;--gold2:#e2c590;--text:#f2ece3;--sub:#a99f92}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{word-break:keep-all;overflow-wrap:anywhere;background:#050403;color:var(--text);font-family:"Noto Sans KR","Noto Sans CJK KR",sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1}
a{color:var(--gold2)}

/* 접근성: 화면에는 숨기고 화면 낭독기에는 읽히게(홈 h1, 요금 '크레딧 상품' h2) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 접근성: 본문 바로가기 — 키보드 Tab 첫 번째에서만 보인다 */
/* 높이 44px 은 글꼴과 무관하게 min-height 로 보장. 평소에는 화면 밖, 포커스 때는 문서 흐름 안(헤더 위)에 나타나
   로고·메뉴를 덮지 않는다(헤더가 잠깐 아래로 밀리는 것은 키보드 포커스 때만). */
.skip{position:absolute;left:max(8px,var(--safe-l));top:-80px;z-index:10;display:inline-flex;align-items:center;min-height:44px;min-width:44px;background:var(--panel);color:var(--gold2);border:1px solid var(--gold);border-radius:8px;padding:0 14px;font-size:14px;text-decoration:none}
.skip:focus{position:static;align-self:flex-start;margin:max(4px,env(safe-area-inset-top,0px)) 0 0 max(8px,var(--safe-l))}
/* 접근성: 키보드 포커스 표시 */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
/* 좌우 여백은 노치·다이내믹 아일랜드가 있는 가로 화면에서 안전 영역(safe-area)보다 작아지지 않게 max() 로 잡는다 */
.wrap{max-width:1180px;margin:0 auto;padding:0 max(24px,var(--safe-r)) 0 max(24px,var(--safe-l))}
.wrap.narrow{max-width:560px}

/* 머리 */
.top{max-width:1180px;width:100%;margin:0 auto;padding:20px max(24px,var(--safe-r)) 12px max(24px,var(--safe-l));display:flex;align-items:center;justify-content:space-between;gap:16px}
/* 헤더 로고 = 앱바판 워드마크(루엔, 갈피끈 ㄹ). 높이만 정하고 너비는 비율대로(220:112).
   링크 전체는 터치 영역 44px 이상. 보호 영역(글자 높이의 1/4 ≈ 7px)은 오른쪽 메뉴와의 gap 16px 로 충분.
   사이트 색 체계는 0단계에서 바꾸지 않는다 — 로고 색(종이빛 #F1EADF·밝힌 와인 #C97A86)은 바탕 #050403 에서 17.1:1·6.4:1 */
.logo{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none;flex:0 0 auto}
.logo img{display:block;height:36px;width:auto}
.top nav{display:flex;gap:22px}
/* 터치 영역 44px 이상(WCAG 2.5.5·모바일 엄지 기준): 글자는 그대로 두고 높이만 키운다 */
.top nav a{color:var(--sub);text-decoration:none;font-size:14px;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.top nav a.on,.top nav a:hover{color:var(--gold2)}

/* 홈 */
body:has(.home){background:#050403 url('img/bg-desktop.jpg') center top/cover fixed no-repeat}
.hero{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-top:-8px;margin-bottom:18px}
.note{color:var(--sub);font-size:13px}
.note.age{color:var(--gold2)}
.grid{max-width:1180px;margin:0 auto;padding:0 max(24px,var(--safe-r)) 60px max(24px,var(--safe-l));display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.person{display:flex;flex-direction:column;gap:18px}
.profile{aspect-ratio:1/1;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.profile img{width:100%;height:100%;object-fit:cover;display:block}
.intro{padding:2px 4px 6px;border-bottom:1px solid var(--line)}
.nm{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
h2{font-family:"Noto Serif KR",serif;font-size:26px;font-weight:700;letter-spacing:.02em}
.type{font-size:12.5px;color:var(--gold2);border:1px solid rgba(201,164,106,.55);border-radius:999px;padding:3px 10px 4px;font-weight:500}
.kw{display:flex;flex-wrap:wrap;gap:6px}.kw i{font-style:normal;font-size:12px;color:rgba(255,255,255,.72);background:rgba(255,255,255,.07);border-radius:999px;padding:3px 9px 4px}
.intro p{color:#d8d0c4;font-size:15px;line-height:1.7;padding-bottom:14px}
.scenes{display:flex;flex-direction:column;gap:40px}
.scene img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:14px;border:1px solid var(--line)}
.cap{padding:12px 4px 0;display:flex;flex-direction:column;gap:5px}
.genre{font-size:12px;color:var(--gold2);letter-spacing:.04em}
.title{font-family:"Noto Serif KR",serif;font-size:20px;font-weight:700;line-height:1.35}
.line{font-size:14px;color:#e6dccd;line-height:1.5;margin-top:4px}
.about{padding-top:10px;padding-bottom:70px}
.about h2{font-family:"Noto Serif KR",serif;font-size:22px;margin-bottom:14px}
.about ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:22px;color:#d8d0c4;font-size:15px;line-height:1.7}
.about li::before{content:"·";color:var(--gold);margin-right:8px}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;background:linear-gradient(180deg,#e9cf9c,#c9a46a);color:#1a140c;font-weight:700;font-size:15px;text-decoration:none;border:0;border-radius:999px;padding:12px 26px;cursor:pointer;font-family:inherit}
.btn:disabled{opacity:.5;cursor:wait}
.btn.wide{width:100%;padding:15px}

/* 문서·요금 */
.doc{padding-top:20px;padding-bottom:70px}
.doc h1{font-family:"Noto Serif KR",serif;font-size:30px;margin-bottom:14px}
.doc h2{font-size:19px;margin:0 0 12px;font-family:"Noto Sans KR",sans-serif;letter-spacing:0}
/* 만 19세 이상 고지(요금·결제 화면) */
.agebar{display:inline-block;font-size:13px;color:var(--gold2);border:1px solid rgba(201,164,106,.55);border-radius:999px;padding:4px 12px;margin:-14px 0 22px}
/* 시험 결제 표시(포트원 시험 채널일 때 결제 화면에만) */
.testbar{font-size:14px;line-height:1.6;color:var(--text);background:rgba(240,165,143,.12);border:1px solid #f0a58f;border-radius:10px;padding:10px 12px;margin:0 0 18px}
.lead{color:#d8d0c4;line-height:1.7;margin-bottom:28px;font-size:15px}
/* 상품 카드: 한 칸 최소 13em — 기본 글자(16px)에선 980px 이상에서 지금처럼 4칸, 글자를 키우면(200%) 칸 수가 줄어든다.
   가격(.num)은 줄바꿈하지 않으므로 4칸을 고집하면 글자 200%·884px 가로 화면에서 카드가 화면 밖으로 넘친다(2026-11-02 실측) */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13em),1fr));gap:18px;margin-bottom:34px}
.pack{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 20px;display:flex;flex-direction:column;gap:14px}
.pack h3{font-size:16px;font-weight:500;color:var(--gold2)}
.price{font-size:28px;font-weight:700}
.price small{font-size:12px;color:var(--sub);font-weight:400;margin-left:6px}
.pack dl{display:grid;grid-template-columns:1fr auto;gap:6px 10px;font-size:14px;color:#d8d0c4}
.pack dd{text-align:right}
.est{font-size:12.5px;color:var(--sub);line-height:1.5}
.pack .btn{text-align:center;margin-top:auto}
.box{background:rgba(22,19,15,.7);border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:22px}
.box ul{margin:14px 0 0 18px;color:#d8d0c4;font-size:14px;line-height:1.8}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top;line-height:1.6}
.tbl thead th{color:var(--sub);font-weight:500}
.tbl.kv th{width:150px;color:var(--sub);font-weight:500}
/* 숫자 조각(금액·시각·전화 조각) 줄바꿈 금지 — 글자 200%에서 '3,' / '300원' 처럼 숫자 중간이 끊기지 않게.
   body 의 keep-all 로는 WebKit 의 쉼표 뒤 줄바꿈을 못 막는다(luen-qa number-split). 한 줄에 들어가는 짧은 조각에만 쓴다 —
   전화·시각 범위처럼 긴 묶음은 pages.py num_span() 이 '-'·'~' 뒤에 <wbr> 를 두고 조각마다 감싼다(통째 nowrap 은 320px 가로 넘침) */
.num{white-space:nowrap}
/* 결제번호(최대 64자): 통째 nowrap 은 375px·글자 200%에서 가로로 넘친다 — js/payment-result.js 가 하이픈 뒤에 <wbr> 를 넣어
   '-' 다음에서 먼저 끊기게 하고, 한 조각이 칸보다 넓을 때만 anywhere 로 끊는다(가로 넘침 방지 최후 수단) */
.pid{overflow-wrap:anywhere}

/* 결제 */
.pay{display:flex;flex-direction:column;gap:16px}
.pay label{min-width:0;display:flex;flex-direction:column;gap:7px;font-size:14px;color:#d8d0c4}
/* 모바일 키보드가 올라와도 입력칸이 화면 위·아래 가장자리에 붙지 않게(scroll-margin). 글자 16px 은 iOS 자동 확대 방지 */
/* 글자 크기를 크게 키워도 선택칸이 옵션 글자 폭만큼 늘어나 화면 밖으로 나가지 않게 width·min-width 고정 */
.pay input:not([type=checkbox]),.pay select{scroll-margin:96px 0;min-height:48px;width:100%;min-width:0;max-width:100%;background:#120f0c;border:1px solid #3a3125;color:var(--text);border-radius:10px;padding:12px;font-size:16px;font-family:inherit}
/* 상품 선택칸: 브라우저 기본 모양(iOS 는 높이·화살표가 다름)을 끄고 48px 로 맞춘다. 화살표는 label 의 ::after(장식, 낭독 안 됨).
   select 요소는 그대로라 키보드·화면 낭독기 동작은 기본과 같다. */
.pay select{appearance:none;height:48px;padding:0 44px 0 12px;line-height:46px;cursor:pointer}
.pay label:has(> select){position:relative}
.pay label:has(> select)::after{content:"";position:absolute;right:18px;bottom:21px;width:8px;height:8px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(45deg);pointer-events:none}
.sum{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.sum div{display:flex;justify-content:space-between;gap:12px}
.sum span{color:var(--sub)}
.sum .total{border-top:1px solid var(--line);padding-top:10px;font-size:17px}
.agree{display:flex;flex-direction:column;gap:0}
.agree{border:0;min-width:0}
.agree legend{font-size:14px;color:var(--text);font-weight:500;margin-bottom:10px}
.ckwrap{display:flex;flex-direction:column;gap:0;margin-bottom:6px}
/* 개인정보 수집·이용 동의 요약(항목·목적·보유 기간·거부 권리) */
.ckdetail{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-left:26px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--sub);line-height:1.6}
.ckdetail dt{color:#d8d0c4}
/* 동의 줄 전체가 눌리는 영역(label). 한 줄이어도 44px 이상 */
.pay label.ck{flex-direction:row;align-items:flex-start;gap:10px;line-height:1.6;min-height:44px;padding:11px 0}
.ck input{margin-top:2px;width:20px;height:20px;flex:0 0 auto;accent-color:var(--gold)}
.msg{color:#f0a58f;font-size:14px;min-height:1em}
.fine{font-size:12.5px;color:var(--sub);line-height:1.6}

/* 약관 */
.legal{max-width:860px;color:#d8d0c4;font-size:14.5px;line-height:1.85}
.legal h2{color:var(--text);font-size:17px;margin:30px 0 8px}
.legal p,.legal ol,.legal ul{margin-bottom:10px}
.legal ol,.legal ul{padding-left:22px}
.legal .tbl{margin:8px 0 14px}
.legal small{font-size:13px;color:var(--sub)}
.legal .date{color:var(--sub);font-size:13px;margin-bottom:24px}

/* 푸터 */
.foot{border-top:1px solid var(--line);background:#080706;padding:20px 0 calc(36px + var(--safe-b));font-size:12.5px;color:#8f8679;line-height:1.9}
.foot i{font-style:normal;color:#3d352a;margin:0 6px}
.flinks{display:flex;column-gap:18px;row-gap:0;flex-wrap:wrap;margin-bottom:4px}
.flinks a{color:#bdb3a5;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.copy{margin-top:8px}

/* 가로 화면처럼 높이가 낮으면 키보드가 남긴 공간이 좁아 큰 scroll-margin 이 오히려 입력칸을 밀어 올려 가린다 */
@media (max-height:500px){.pay input:not([type=checkbox]),.pay select{scroll-margin:8px 0}}
@media (max-width:980px){.packs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
 /* iOS Safari 는 background-attachment:fixed 를 무시하고 배경을 페이지 전체 높이에 맞춰 크게 늘린다 → 모바일은 위쪽에 폭 맞춤으로 둔다 */
 body:has(.home){background:#050403 url('img/bg-mobile.jpg') center top/100% auto scroll no-repeat}
 .wrap{padding-left:max(16px,var(--safe-l));padding-right:max(16px,var(--safe-r))}
 .top{padding:12px max(16px,var(--safe-r)) 4px max(16px,var(--safe-l));flex-direction:column;align-items:flex-start;gap:2px}
 .logo img{height:28px}
 .top nav{flex-wrap:wrap;column-gap:16px;row-gap:0}
 .hero{align-items:flex-start;margin-top:0}
 .note{font-size:12px}
 .grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;gap:14px;padding:0 0 40px;max-width:none}
 .grid::before,.grid::after{content:"";flex:0 0 2px}
 .person{flex:0 0 calc((100vw - 44px)/2.254);scroll-snap-align:start;gap:12px}
 h2{font-size:20px}.type{font-size:12px;padding:2px 8px 3px}.nm{flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:6px}.kw i{font-size:12px;padding:2px 7px 3px}
 .intro p{font-size:12.5px;line-height:1.6;padding-bottom:10px}
 .scenes{gap:28px}.scene img{border-radius:12px}
 .cap{padding:8px 2px 0;gap:3px}.title{font-size:13px}.line{font-size:12px;margin-top:2px}.genre{font-size:12px}
 .packs{grid-template-columns:1fr}
 .tbl.kv th{width:96px}
 /* 모바일 본문 글자 15px(권장 15~16px). 홈 캐릭터 카드(2.25장 보기)는 원본 디자인 크기를 유지한다 — 디자이너 판단 */
 .legal,.tbl,.box ul,.pay label{font-size:15px}
 .ckdetail{margin-left:0;grid-template-columns:1fr;gap:0 0}
 .ckdetail dd{margin-bottom:6px}
 .doc h1{font-size:24px}
}
/* 아주 좁은 화면(폭 240px 이하 — 320·344px 휴대폰에서 페이지 확대 200% 등): 표 제목 칸 고정 폭(96px)과 상자 안쪽 여백을 줄인다.
   숫자 조각(.num)은 줄바꿈하지 않으므로 값 칸이 그 폭 아래로 줄지 못한다 — 줄이지 않으면 고객센터 표가 화면 밖으로 넓어진다
   (2026-11-02 실측: 폭 160px 에서 본문 174px). 요금 카드도 같은 이유로 여백과 가격 글자(28→22px)를 줄인다(가격 '28,500원' 이 카드보다 넓어짐).
   표 칸·본문 좌우 여백도 줄인다 — 차감표 '12 크레딧' 묶음 때문에 표가 더 줄지 못해 WebKit 160px 에서 5px 넘쳤다 */
@media (max-width:240px){.tbl.kv th{width:auto}.box,.pack{padding:16px 12px}.price{font-size:22px}.tbl th,.tbl td{padding:8px 4px}.wrap{padding-left:max(12px,var(--safe-l));padding-right:max(12px,var(--safe-r))}}