/* 법적 페이지 3종 공용 — index.html 과 같은 시각 언어.
   모눈 배경·모노·얇은 선·눈썹 라벨은 쓰지 않는다. 구분은 공백과 색 단차로 한다.
   ⛔ 조항 번호(01·02…)는 남긴다 — 장식이 아니라 다른 문서가 「CGV §06」처럼 가리키는 참조다. */
:root{
  --paper:#ffffff; --ink:#15171b; --soft:#4a515c;
  --tint:#f1f4f8; --field:#15509e; --hi:#15509e; --hi-soft:#e8eef8; --ok:#0f7a5a;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --t-head:clamp(30px,4.2vw,54px);
  --t-sub:clamp(22px,1.9vw,26px);
  --t-lead:clamp(19px,1.4vw,21px);
  --t-body:17px;
  --t-small:15px;
  --padx:max(20px,env(safe-area-inset-left,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;
     font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--padx);padding-right:var(--padx)}
a{color:inherit}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.logo{font-weight:700;font-size:var(--t-lead);letter-spacing:-.03em;text-decoration:none}
.logo i{font-style:normal;color:var(--hi)}
.hcta{font:inherit;font-weight:600;font-size:var(--t-body);background:var(--ink);color:#fff;border:0;
      border-radius:0;padding:14px 20px;cursor:pointer;text-decoration:none;display:inline-block;
      min-height:44px;transition:background .15s}
.hcta:hover{background:var(--hi)}
.hcta:focus-visible,.back:focus-visible,footer a:focus-visible{outline:2px solid var(--hi);outline-offset:2px}

main{padding-block:clamp(36px,5vw,64px) clamp(72px,9vw,120px)}
.back{font-size:var(--t-body);color:var(--hi);text-decoration:underline;text-underline-offset:3px;
      display:inline-block;margin-bottom:28px}
/* 눈썹 라벨은 쓰지 않는다 */
.eyebrow{display:none}
h1{font-size:var(--t-head);line-height:1.02;letter-spacing:-.035em;font-weight:700;margin:0 0 12px;
   text-wrap:balance;max-width:18ch}
.maj{font-size:var(--t-small);color:var(--soft);margin:0 0 56px}

/* 본문 — 읽기 폭을 좁게 묶는다 */
.doc{max-width:68ch}
.doc h2{font-size:var(--t-sub);font-weight:700;letter-spacing:-.025em;line-height:1.2;margin:56px 0 14px;
        padding-top:0;border-top:0;display:flex;gap:14px;align-items:baseline}
.doc h2 .n{font-size:var(--t-small);color:var(--hi);flex:none;font-weight:600}
.doc h3{font-size:var(--t-lead);font-weight:600;margin:32px 0 8px;letter-spacing:-.015em}
.doc p{margin:0 0 14px;font-size:var(--t-body);line-height:1.7;color:var(--ink)}
.doc p b,.doc li b{color:var(--ink);font-weight:600}
.doc ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.doc li{font-size:var(--t-body);line-height:1.6;color:var(--ink);padding-left:26px;position:relative}
.doc li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:2px;background:var(--hi)}
.doc a{color:var(--hi)}

/* 눈에 띄어야 하는 상자 — 테두리 대신 채운 면 */
.box{background:var(--tint);border:0;border-radius:0;padding:20px 22px;margin:0 0 18px}
.box .t{font-size:var(--t-small);color:var(--soft);margin-bottom:10px;font-weight:600}
.box p:last-child{margin-bottom:0}
.box.hi{background:var(--hi-soft)}
.box.hi p{color:var(--ink)}

/* 식별 정보 */
.ident{font-size:var(--t-body);line-height:1.95;color:var(--ink);background:var(--tint);
       border:0;border-radius:0;padding:20px 22px;margin:0 0 18px;overflow-wrap:anywhere}

/* 가격표 — 진짜 표라 선을 둬도 된다 */
.ptable{width:100%;border-collapse:collapse;font-size:var(--t-body);margin:0 0 18px}
.ptable td{padding:14px 0;border-bottom:1px solid #e3e7ed;color:var(--ink)}
.ptable td:first-child{padding-right:18px}
.ptable td:last-child{text-align:right;white-space:nowrap;color:var(--ink)}

/* 푸터 — index.html 과 같은 마감 */
footer{background:var(--ink);color:rgba(255,255,255,.72);font-size:var(--t-small);line-height:1.8;
       overflow:hidden;position:relative}
footer .wrap{padding-block:72px 0}
.ftop{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start}
.fid{max-width:46ch}
/* 🪤 height:auto 로 속성 높이를 지우면 지연 로딩 이미지의 «크기 없음» 경고가 뜬다.
      비율을 명시해 두면 레이아웃이 밀리지 않고 경고도 사라진다. */
.flogo{display:block;width:132px;height:auto;aspect-ratio:264/201;margin-bottom:22px;opacity:.9}
.fid p{margin:0;color:rgba(255,255,255,.72)}
.fid a{color:#fff;text-decoration:underline;text-underline-offset:3px}
footer .links{display:flex;gap:22px;flex-wrap:wrap}
footer a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.34)}
footer a:hover{color:#fff;border-bottom-color:#fff}
footer a[aria-current="page"]{color:#fff;border-bottom-color:#fff}
.fname{margin:48px 0 0;font-weight:700;font-size:clamp(72px,19vw,260px);line-height:.8;letter-spacing:-.05em;
       color:rgba(255,255,255,.1);white-space:nowrap;transform:translateY(16%);user-select:none}
.mono{font-size:var(--t-small)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
