/* v8 — 명품 하우스 홈 문법(디올식) 바탕 + 2026-10-30 대구 전용 시안: 어두운 바탕(#141414)·금색 강조(#C9A45C)·Noto Serif KR 제목·모바일 하단 고정 메뉴바·사진 1:1 크롭·표 형식 비교 목록. 접두사 gni- 유지. 공용 CSS 1개로 통합(원래는 페이지마다 <style> 복제). */
:root{
  --gni-paper:#141414;--gni-ink:#F3F0EA;--gni-ink-2:#C9C2B4;--gni-grey:#9C958A;--gni-line:#33302A;--gni-mist:#1B1B1B;
  --gni-slot:#262320;--gni-slot-label:#A8A196;
  --gni-gold:#C9A45C;--gni-gold-light:#D9BA82;--gni-on-gold:#141414;
  --gni-face:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --gni-latin:"Manrope",var(--gni-face);   /* 디올 실측: 한글 = Noto Sans KR, 메뉴·라벨 영문 = Hellix(유료) -> 무료 Manrope */
  --gni-serif:"Bodoni Moda","Didot","Times New Roman",var(--gni-face);
  --gni-serif-kr:"Noto Serif KR","Bodoni Moda","Times New Roman",serif;  /* 2026-10-30: 제목 전용 — 본문은 그대로 Noto Sans KR */
  --gni-edge:16px;--gni-read:640px;--gni-hit:48px;--gni-hit-min:44px;
  /* v8.2 공통 값 — 여백 체계 4·8·12·16·24·32·48·64·96·128, 움직임·포커스·밑줄·라벨·자간 */
  --gni-s1:4px;--gni-s2:8px;--gni-s3:12px;--gni-s4:16px;--gni-s5:24px;--gni-s6:32px;--gni-s7:48px;--gni-s8:64px;--gni-s9:96px;--gni-s10:128px;
  --gni-dur:.2s;--gni-ease:ease;--gni-hover:.64;--gni-press:.48;
  --gni-focus-w:2px;--gni-focus-off:3px;--gni-ul:5px;--gni-ul-w:1px;--gni-label:12px;--gni-track-mark:.06em;--gni-track-giant:.02em;--gni-top-h:64px;--gni-tab-h:60px;
}
@media (min-width:1024px){:root{--gni-edge:40px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gni-paper);color:var(--gni-ink);font-family:var(--gni-face);font-size:14px;font-weight:400;line-height:1.7;letter-spacing:normal;overflow-x:hidden}
body,p,h1,h2,h3,li,dd,dt,a,span{word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,p{margin:0}
a{color:inherit}
a:focus-visible{outline:var(--gni-focus-w) solid currentColor;outline-offset:var(--gni-focus-off)}
.gni-frame{padding:0 var(--gni-edge)}
.gni-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gni-tag{font-family:var(--gni-latin);font-size:var(--gni-label);letter-spacing:normal;text-transform:none;font-weight:500;line-height:1.4;color:var(--gni-grey)}

/* 업소 정보 입력 전/후 전환(?rented=1) */
.gni-only-rented{display:none!important}
.gni-is-rented .gni-only-rented{display:flex!important}
.gni-is-rented .gni-only-vacant{display:none!important}

.gni-19{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid currentColor;
  color:inherit;font-weight:500;font-size:9px;line-height:1;flex:none;letter-spacing:0}

.gni-key{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--gni-hit);min-width:var(--gni-hit-min);
  padding:var(--gni-s3) var(--gni-s6);font-family:var(--gni-latin);font-size:14px;font-weight:500;line-height:1.2;letter-spacing:normal;text-decoration:none;border:0;background:var(--gni-gold);color:var(--gni-on-gold);cursor:pointer}
.gni-key svg{width:16px;height:16px;flex:none}
.gni-link{display:inline-flex;align-items:center;min-height:var(--gni-hit-min);font-family:var(--gni-latin);font-size:14px;font-weight:500;letter-spacing:normal;text-decoration:underline;text-decoration-color:var(--gni-gold);text-underline-offset:var(--gni-ul);text-decoration-thickness:var(--gni-ul-w)}

/* 머리글 — 왼쪽 메뉴, 가운데 세리프 대문자 워드마크, 오른쪽 비움(업소 정보 입력 후 전화) */
.gni-top{position:sticky;top:0;z-index:20;background:var(--gni-paper);border-bottom:1px solid var(--gni-line)}
.gni-top .gni-frame{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:var(--gni-top-h)}
.gni-mark{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--gni-hit-min);text-decoration:none;line-height:1;min-width:0;text-align:center}
.gni-mark b{font-family:var(--gni-serif);font-size:15px;font-weight:500;letter-spacing:var(--gni-track-mark);text-transform:uppercase;white-space:nowrap;color:var(--gni-gold-light)}
.gni-mark small{display:none;font-family:var(--gni-latin);font-size:var(--gni-label);color:var(--gni-grey);font-weight:400;letter-spacing:normal;margin-top:var(--gni-s2)}
.gni-menu{display:none}
.gni-menubtn{grid-column:1;grid-row:1;justify-self:start;display:inline-flex;align-items:center;justify-content:center;min-height:var(--gni-hit-min);min-width:var(--gni-hit-min);margin-left:-12px;color:inherit;text-decoration:none}
.gni-menubtn svg{width:20px;height:20px}
.gni-top .gni-key{display:none!important}
@media (min-width:1024px){
  .gni-top .gni-frame{min-height:72px}
  .gni-menu{grid-column:1;grid-row:1;display:flex;gap:2px;justify-self:start}
  .gni-menu a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gni-hit-min);min-height:var(--gni-hit-min);padding:0 var(--gni-s3);text-decoration:none;font-family:var(--gni-latin);font-size:14px;font-weight:500;letter-spacing:normal}
  .gni-menu a:first-of-type{margin-left:calc(var(--gni-s3) * -1)}
  .gni-menu a:hover,.gni-menu a[aria-current]{text-decoration:underline;text-decoration-color:var(--gni-gold);text-underline-offset:var(--gni-ul);text-decoration-thickness:var(--gni-ul-w)}
  .gni-mark b{font-size:22px}
  .gni-mark small{display:block}
  .gni-menubtn{display:none}
  .gni-is-rented .gni-top .gni-key{grid-column:3;grid-row:1;justify-self:end;display:inline-flex!important;min-height:var(--gni-hit-min);padding:8px 20px;font-size:13px}
}

/* 홈 — 머리글이 첫 사진 위에 투명하게 얹힘(2026-10-30: 맨 위 검정 19세 띠를 없애고 히어로 안 작은 글씨로 옮겨, 머리글은 판매 띠 높이만큼만 내려옴) */
.gni-home .gni-top{position:absolute;left:0;right:0;top:0;background:transparent;border-bottom:1px solid transparent;color:#FFFFFF;text-shadow:0 0 14px rgba(0,0,0,.4)}
.gni-home .gni-top .gni-frame{min-height:var(--gni-top-h)}
@media (min-width:1024px){
  .gni-home .gni-top .gni-frame{min-height:72px}
  .gni-home .gni-top .gni-mark{visibility:hidden}      /* PC 홈은 화면 한가운데 큰 워드마크가 대신함 */
}

/* 사진 칸 — 바탕보다 한 단계 밝은 짙은 칸 + 오른쪽 아래 작은 라벨 1줄. 사진이 오면 칸 안에 <img> 넣고 .gni-ph 와 라벨을 뗀다 */
.gni-slot{position:relative;display:block;overflow:hidden;background:var(--gni-slot);width:100%}
.gni-slot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gni-slot .gni-label{position:absolute;right:12px;bottom:10px;z-index:2;font-family:var(--gni-latin);font-size:10px;font-weight:400;letter-spacing:normal;color:var(--gni-slot-label);line-height:1;white-space:nowrap}
/* 2026-10-30: 대구 전용 — 사진은 원본 그대로 두고 자르는 비율만 1:1로 통일(다른 지역 사이트와 구분) */
.gni-r34,.gni-r45,.gni-r32{aspect-ratio:1/1}

/* 홈 큰 칸 — 모바일: 히어로 큰 칸 1개 + 그 아래 두 칸이 나란히(정사각) / PC 반 화면 1:1 두 칸 */
.gni-panels{display:grid;grid-template-columns:1fr;row-gap:0;margin:0;padding:0;list-style:none}
.gni-panel{position:relative;overflow:hidden;color:#FFFFFF;text-align:center}
.gni-panel .gni-slot{aspect-ratio:1/1}
.gni-panel .gni-slot:not(.gni-ph)::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 40%,rgba(0,0,0,.12) 60%,rgba(0,0,0,.32) 80%,rgba(0,0,0,.6) 100%)}
.gni-panel .gni-label{color:var(--gni-slot-label)}
/* 사진 전(자리표시) — 단색 칸 위 글자는 밝은 잉크색. 사진이 들어와 .gni-ph 가 빠지면 흰 글자 + 은은한 덮개로 바뀐다 */
.gni-panel:has(.gni-ph){color:var(--gni-ink)}
.gni-panel:has(.gni-ph) .gni-cap .gni-tag{color:var(--gni-grey)}
.gni-panel:has(.gni-ph) .gni-phone{background:var(--gni-gold);color:var(--gni-on-gold)}
.gni-home:has(.gni-hero .gni-ph) .gni-top{color:var(--gni-ink);text-shadow:none}
.gni-home:has(.gni-hero .gni-ph) .gni-giant{color:var(--gni-ink);text-shadow:none}
.gni-panel .gni-label--d{display:none}
.gni-cap{position:absolute;inset:0;z-index:3;padding:0 var(--gni-edge) 40px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.gni-cap .gni-tag{font-size:11px;color:rgba(255,255,255,.6);margin-bottom:var(--gni-s1);letter-spacing:normal;text-transform:none}
.gni-cap h1,.gni-cap h2{font-size:23px;line-height:1.3;font-weight:400;letter-spacing:normal}
.gni-cap h1{font-family:var(--gni-serif-kr);font-weight:700}
.gni-cap h2{font-family:var(--gni-latin)}
.gni-cap h1 em{font-style:normal}
.gni-cap .gni-link{margin-top:var(--gni-s2);font-weight:500;text-underline-offset:var(--gni-ul)}
.gni-cap .gni-link::after{content:"";position:absolute;inset:0;z-index:2}   /* 칸 전체를 눌러도 이동 */
.gni-cap .gni-act{display:flex;flex-direction:column;align-items:center}
.gni-cap .gni-phone{position:relative;z-index:4;background:var(--gni-gold);color:var(--gni-on-gold);margin:var(--gni-s4) 0 0}
.gni-cap .gni-act .gni-link{position:static}
.gni-panel--wide .gni-slot{aspect-ratio:1/1}
.gni-giant{display:none}
/* 2026-10-30: 모바일 첫 화면 — 히어로 아래 두 칸을 나란히 2열(정사각) 배치, 그 다음부터는 다시 전체 폭 1칸씩 */
@media (max-width:1023px){
  .gni-panels{display:grid;grid-template-columns:1fr 1fr}
  .gni-panel:first-child{grid-column:1 / -1}
  .gni-panel:nth-child(2),.gni-panel:nth-child(3){grid-column:span 1}
  .gni-panel:nth-child(n+4){grid-column:1 / -1}
  .gni-panel:nth-child(2) .gni-cap,.gni-panel:nth-child(3) .gni-cap{padding-bottom:20px}
  .gni-panel:nth-child(2) .gni-cap h2,.gni-panel:nth-child(3) .gni-cap h2{font-size:17px}
  .gni-panel:nth-child(2) .gni-cap .gni-link,.gni-panel:nth-child(3) .gni-cap .gni-link{font-size:12px;min-height:36px}
}
@media (min-width:1024px){
  .gni-panels{grid-template-columns:1fr 1fr;column-gap:0;row-gap:0}
  .gni-panel .gni-slot{aspect-ratio:1/1}
  .gni-panel--wide{grid-column:1 / -1}
  .gni-panel .gni-label--m{display:none}
  .gni-panel .gni-label--d{display:block}
  .gni-cap{padding-bottom:64px}
  .gni-cap h1,.gni-cap h2{font-size:32px;line-height:1.31;font-weight:400}
  .gni-cap .gni-link{font-size:14px}
  .gni-giant{display:block;position:absolute;left:50%;top:31.25vw;transform:translate(-50%,-50%);margin:0;z-index:5;
    font-family:var(--gni-serif);font-weight:500;font-variation-settings:"opsz" 96;font-size:clamp(34px,3vw,48px);letter-spacing:var(--gni-track-giant);line-height:1;white-space:nowrap;color:#FFFFFF;
    text-shadow:0 0 40px rgba(0,0,0,.5);pointer-events:none;user-select:none}
}
.gni-home main{position:relative}

/* 홈 히어로 안 작은 글씨 — 19세 성인 안내(2026-10-30: 맨 위 검정 띠를 없애고 이 자리로 옮김) */
.gni-hero-age{display:flex;align-items:center;gap:6px;font-size:10px;line-height:1.3;color:rgba(255,255,255,.72);margin-bottom:var(--gni-s2);white-space:nowrap}
.gni-hero-age .gni-19{width:15px;height:15px;font-size:7px}
.gni-panel:has(.gni-ph) .gni-hero-age{color:var(--gni-grey)}
@media (min-width:1024px){.gni-hero-age{font-size:11px}}

/* 업소 정보 입력 후 전화 띠 — 가운데 정렬, 넓은 여백 */
.gni-call{padding:96px 0 24px;text-align:center}
.gni-call .gni-frame{display:grid;gap:var(--gni-s6);justify-items:center}
.gni-call h2{font-size:24px;line-height:1.35;font-weight:400;letter-spacing:normal}
.gni-call p{margin-top:var(--gni-s3);color:var(--gni-grey);font-size:14px}
.gni-is-rented .gni-call.gni-only-rented{display:block!important}

/* 하위 페이지 — 가운데 정렬 머리, 본문 폭 640px, 차분한 본문 */
.gni-page{max-width:calc(var(--gni-read) + var(--gni-edge)*2);margin:0 auto;padding:64px var(--gni-edge) 0}
.gni-page > header{margin-bottom:48px;text-align:center}
.gni-page h1{font-family:var(--gni-serif-kr);font-weight:700;font-size:26px;line-height:1.3;letter-spacing:normal;margin-top:var(--gni-s4)}
.gni-page .gni-intro{margin-top:var(--gni-s5);font-size:16px;line-height:1.8;color:var(--gni-ink-2);text-align:left}
.gni-page .gni-intro + .gni-intro{margin-top:var(--gni-s3)}
.gni-page .gni-slot{margin:0 0 var(--gni-s8)}
.gni-sec{margin-top:var(--gni-s9)}
.gni-sec > .gni-tag,.gni-sec > h2{text-align:center}
.gni-sec h2{font-family:var(--gni-serif-kr);font-weight:700;font-size:20px;line-height:1.35;letter-spacing:normal;margin-top:var(--gni-s3);margin-bottom:var(--gni-s6)}
.gni-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--gni-line)}
.gni-list > li{display:grid;grid-template-columns:44px 1fr;gap:0 var(--gni-s3);padding:var(--gni-s5) 0;border-bottom:1px solid var(--gni-line)}
.gni-list .gni-no{font-family:var(--gni-serif);font-size:20px;line-height:1.3;color:var(--gni-gold-light)}
.gni-list h2,.gni-list h3{font-family:var(--gni-serif-kr);font-weight:700;font-size:16px;line-height:1.5;letter-spacing:normal;margin:0}
.gni-list p{font-size:15px;line-height:1.75;color:var(--gni-ink-2);margin-top:4px}
.gni-list .gni-tag{display:block;margin-bottom:var(--gni-s2)}
.gni-list--plain > li{grid-template-columns:1fr}
.gni-list--qa > li{padding:var(--gni-s6) 0}
.gni-list--qa p{font-size:16px;line-height:1.8;margin-top:var(--gni-s3)}
.gni-fact b{display:block;font-size:16px;font-weight:500}
.gni-fact span{display:block;font-size:12px;color:var(--gni-grey);margin-top:2px}
.gni-src{margin-top:20px;font-size:12px;color:var(--gni-grey);line-height:1.7}
.gni-next{margin-top:var(--gni-s9);padding-top:8px;border-top:1px solid var(--gni-gold);display:flex;justify-content:center}
.gni-next a{display:inline-flex;align-items:center;min-height:var(--gni-hit);min-width:var(--gni-hit-min);font-family:var(--gni-latin);font-size:14px;font-weight:500;text-decoration:underline;text-decoration-color:var(--gni-gold);text-underline-offset:var(--gni-ul);text-decoration-thickness:var(--gni-ul-w)}
@media (min-width:1024px){.gni-page{padding-top:var(--gni-s9)}.gni-page h1{font-size:32px;line-height:1.31}.gni-sec h2{font-size:24px}}

/* 표 형식(비교·FAQ·체크 표) — 어두운 바탕에 맞춘 공통 표 스타일. 가로 넘침 없이 칸 안에서 줄바꿈 */
.gni-page table,.gni-ctable{width:100%;margin:var(--gni-s6) 0;border-collapse:collapse;table-layout:fixed;font-size:14px;line-height:1.6}
.gni-page table caption{text-align:left;margin-bottom:var(--gni-s3);color:var(--gni-grey);font-size:var(--gni-label)}
.gni-page th,.gni-page td,.gni-ctable th,.gni-ctable td{padding:var(--gni-s3) var(--gni-s3);border:1px solid var(--gni-line);text-align:left;vertical-align:top;word-break:keep-all;overflow-wrap:break-word}
.gni-page thead th,.gni-ctable thead th{background:var(--gni-mist);font-family:var(--gni-latin);font-weight:500;font-size:12px;color:var(--gni-gold-light);letter-spacing:.02em}
.gni-ctable td:first-child,.gni-ctable th:first-child{width:30%;font-family:var(--gni-serif-kr);font-weight:700;color:var(--gni-ink)}
.gni-ctable tbody td{color:var(--gni-ink-2)}
@media (max-width:1023px){
  .gni-page table,.gni-ctable{font-size:13px}
  .gni-ctable td:first-child,.gni-ctable th:first-child{width:34%}
}

/* 바닥글 — 2026-10-30: 흰 판이 아니라 바탕보다 한 단계 어두운 칸, 글자는 밝은 색 */
.gni-foot{margin-top:var(--gni-s10);padding:16px;background:var(--gni-mist);font-size:14px;line-height:1.7;color:var(--gni-grey)}
.gni-home .gni-foot{margin-top:0}
.gni-is-rented .gni-home .gni-foot{margin-top:var(--gni-s9)}
.gni-foot > .gni-frame{background:var(--gni-paper);padding:var(--gni-s6) var(--gni-s4) 40px}
.gni-foot nav{display:grid;grid-template-columns:1fr;margin-bottom:var(--gni-s6);padding-bottom:20px;border-bottom:1px solid var(--gni-line)}
.gni-foot nav a{display:flex;align-items:center;min-height:var(--gni-hit-min);min-width:var(--gni-hit-min);font-family:var(--gni-latin);font-size:14px;color:var(--gni-grey);text-decoration:none}
.gni-foot nav a:first-child{font-size:15px;color:var(--gni-ink);margin-bottom:4px}
.gni-foot nav a.gni-navmark{font-family:var(--gni-serif);font-size:15px;font-weight:500;letter-spacing:var(--gni-track-mark);text-transform:uppercase;white-space:nowrap;color:var(--gni-gold-light)}
.gni-foot nav a:hover{color:var(--gni-ink);text-decoration:underline;text-decoration-color:var(--gni-gold);text-underline-offset:var(--gni-ul);text-decoration-thickness:var(--gni-ul-w)}
.gni-youth{display:flex;gap:var(--gni-s3);align-items:flex-start;max-width:var(--gni-read);margin-bottom:24px;color:var(--gni-ink-2)}
.gni-youth .gni-19{margin-top:3px}
.gni-foot dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 24px;max-width:var(--gni-read)}
.gni-foot dt{font-family:var(--gni-latin);font-weight:500;color:var(--gni-ink-2)}
.gni-foot dd{margin:0}
.gni-foot .gni-fine{font-size:12px;max-width:var(--gni-read);padding-bottom:var(--gni-s6);border-bottom:1px solid var(--gni-line)}
.gni-footmark{margin-top:40px;text-align:center;font-family:var(--gni-serif);font-size:18px;font-weight:400;letter-spacing:var(--gni-track-mark);text-transform:uppercase;white-space:nowrap;color:var(--gni-gold-light);line-height:1}
@media (min-width:1024px){
  .gni-foot{margin-top:160px;padding:24px}
  .gni-foot > .gni-frame{padding:var(--gni-s7) var(--gni-s7) var(--gni-s8);display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
  .gni-foot nav{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:0 32px}
  .gni-foot nav a:first-child{margin-bottom:0}
  .gni-foot .gni-fine{grid-column:1 / -1;max-width:none}
  .gni-footmark{grid-column:1 / -1;font-size:24px;margin-top:48px}
}

/* 목업 전용 칩(공개본에 넣지 않음) */
.gni-chip{position:fixed;right:12px;bottom:68px;z-index:50;padding:6px 10px;border-radius:999px;background:var(--gni-mist);border:1px solid var(--gni-line);
  color:var(--gni-grey);font-size:11px;line-height:1.3;max-width:calc(100vw - 24px);margin:0}
@media (min-width:1024px){.gni-chip{bottom:12px}}

/* 업소 정보 입력 후에만: 모바일 하단 고정 전화 */
.gni-dock{position:fixed;left:0;right:0;bottom:0;z-index:51;gap:8px;align-items:center;padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:var(--gni-mist);border-top:1px solid var(--gni-line)}
.gni-dock .gni-key{flex:1}
.gni-dock .gni-19{width:var(--gni-hit);height:var(--gni-hit);font-size:13px}
@media (min-width:1024px){.gni-is-rented .gni-dock.gni-only-rented{display:none!important}}

/* 2026-10-30: 모바일 하단 고정 메뉴 바(사이트 전체 둘러보기) — 업소 전화가 뜨면 그 아래로 내려가 겹치지 않는다 */
.gni-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:var(--gni-mist);border-top:1px solid var(--gni-line);
  padding-bottom:env(safe-area-inset-bottom)}
.gni-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--gni-tab-h);
  font-family:var(--gni-latin);font-size:11px;font-weight:500;color:var(--gni-grey);text-decoration:none;letter-spacing:normal}
.gni-tabbar a svg{width:18px;height:18px;flex:none}
.gni-tabbar a[aria-current]{color:var(--gni-gold-light)}
.gni-tabbar a:active{opacity:var(--gni-press)}
@media (min-width:1024px){.gni-tabbar{display:none}}
/* 하단 바에 본문·바닥글이 가리지 않게 — 모바일에서는 항상 아래 여백을 둔다(업소 전화 띠가 뜨면 그만큼 더) */
@media (max-width:1023px){
  body{padding-bottom:calc(var(--gni-tab-h) + env(safe-area-inset-bottom))}
  .gni-is-rented body{padding-bottom:calc(var(--gni-tab-h) + 64px + env(safe-area-inset-bottom))}
  .gni-is-rented .gni-tabbar{bottom:calc(64px + env(safe-area-inset-bottom))}
}
@media (min-width:1024px){body{padding-bottom:0!important}}

/* v8.1 UI·UX 다듬기 */
button{font:inherit}
button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.gni-menubtn{background:none;border:0;padding:0;cursor:pointer}
.gni-menuclose{display:none}
@media (max-width:1023px){
  /* 휴대폰 메뉴 — 버튼을 누르면 주 메뉴가 전체 화면 짙은 판으로 펼쳐짐(Escape·Close로 닫힘) */
  .gni-menu-open body{overflow:hidden}
  .gni-menu-open .gni-top{z-index:70}
  .gni-menu-open .gni-menu{display:flex;flex-direction:column;position:fixed;inset:0;z-index:70;background:var(--gni-paper);color:var(--gni-ink);text-shadow:none;
    padding:calc(8px + env(safe-area-inset-top)) var(--gni-edge) calc(24px + env(safe-area-inset-bottom));overflow-y:auto}
  .gni-menu-open .gni-menuclose{display:inline-flex;align-self:flex-start;align-items:center;justify-content:center;min-height:var(--gni-hit-min);min-width:var(--gni-hit-min);
    margin:0 0 24px -4px;padding:0 4px;background:none;border:0;color:inherit;cursor:pointer;font-family:var(--gni-latin);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:var(--gni-ul);text-decoration-thickness:var(--gni-ul-w)}
  .gni-menu a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--gni-line);text-decoration:none;font-family:var(--gni-latin);font-size:20px;font-weight:500;letter-spacing:normal}
  .gni-menu a:first-of-type{border-top:1px solid var(--gni-line)}
  .gni-menu a[aria-current]{text-decoration:underline;text-decoration-color:var(--gni-gold);text-underline-offset:var(--gni-ul);text-decoration-thickness:var(--gni-ul-w)}
}
/* 홈 머리글 — 윗부분 옅은 덮개(사진 위 메뉴·아이콘 대비), 히어로를 지나면 하위 페이지처럼 짙은 머리글로 고정 */
.gni-home .gni-top{background:linear-gradient(rgba(0,0,0,.4),transparent)}
.gni-home:has(.gni-hero .gni-ph) .gni-top{background:transparent}
.gni-home .gni-top.is-stuck{position:fixed;top:0;background:var(--gni-paper);color:var(--gni-ink);text-shadow:none;border-bottom:1px solid var(--gni-line)}
.gni-home .gni-top.is-stuck .gni-mark{visibility:visible}
/* 하위 페이지 — 머리 아래 여백, 라벨 크기, 출구 번호, 하단 빈 공간 */
.gni-page > header .gni-tag{font-size:var(--gni-label)}
.gni-list .gni-no{font-variant-numeric:lining-nums tabular-nums;line-height:24px;color:var(--gni-ink-2)}
.gni-fact b{font-variant-numeric:lining-nums tabular-nums}
@media (min-width:1024px){.gni-page > header{margin-bottom:64px}.gni-page + .gni-foot{margin-top:var(--gni-s10)}}
/* 바닥글 — 휴대폰 메뉴 2열, 맨 위로 링크 */
.gni-foot nav{grid-template-columns:1fr 1fr}
.gni-foot nav a:first-child{grid-column:1 / -1}
.gni-totop{margin-top:32px;text-align:center}
.gni-totop + .gni-footmark{margin-top:24px}
@media (min-width:1024px){.gni-totop{grid-column:1 / -1;margin-top:40px}.gni-totop + .gni-footmark{margin-top:var(--gni-s6)}}
/* v8.2 디테일(2026-10-20) — 검수 25항: 상태 표시·움직임·글자 마무리 */
html{scroll-behavior:smooth}
a,button,.gni-top{transition:color var(--gni-dur) var(--gni-ease),background-color var(--gni-dur) var(--gni-ease),opacity var(--gni-dur) var(--gni-ease),text-decoration-color var(--gni-dur) var(--gni-ease)}
.gni-top{transition-property:color,background-color,opacity,text-decoration-color,border-color}
/* 홈 고정 머리글 — 짙은 바탕을 밑판으로 깔아 서서히 나타나게(높이는 투명 테두리로 고정 전후 동일) */
.gni-home .gni-top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gni-paper);opacity:0;transition:opacity var(--gni-dur) var(--gni-ease);pointer-events:none}
.gni-home .gni-top.is-stuck{background:transparent}
.gni-home .gni-top.is-stuck::before{opacity:1}
/* 누름·hover */
@media (hover:hover){.gni-link:hover,.gni-next a:hover{opacity:var(--gni-hover)}}
a:active,button:active{opacity:var(--gni-press)}
.gni-key:active{background:var(--gni-gold-light)}
[aria-disabled=true]{cursor:default}
[aria-disabled=true]:active{opacity:1}
/* 포커스 — 사진 위 금색 버튼은 흰 테두리, 바닥글은 금색 테두리 */
.gni-panel:not(:has(.gni-ph)) .gni-cap .gni-phone:focus-visible{outline-color:#fff}
.gni-foot a:focus-visible{outline-color:var(--gni-gold)}
/* 마지막 줄 외톨이 방지 */
h1,h2,h3{text-wrap:balance}
p,dd{text-wrap:pretty}
@media (max-width:1023px){
  .gni-menu-open .gni-menuclose{margin-top:2px}
  .gni-youth,.gni-foot dl,.gni-foot .gni-fine{max-width:none}               /* 바닥글 오른쪽 끝을 구분선과 맞춤 */
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}html{scroll-behavior:auto}}
/* 태블릿(768~1023) 첫 화면/머리 아래 사진 칸 — 비율은 그대로, 높이만 화면-머리글 이하로 제한 */
@media (min-width:768px) and (max-width:1023px){.gni-hero .gni-slot,.gni-page > header + .gni-slot{max-height:calc(100vh - 93px);max-height:calc(100svh - 93px)}}
/* v8.4 비율 반영 — 디자인 평가 제안 2~7. 크기·두께·여백·비율만, 구조는 그대로 */
.gni-home .gni-top{background-repeat:no-repeat!important}
.gni-panel .gni-slot:not(.gni-ph)::after{background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,.18) 50%,rgba(0,0,0,.6) 100%)}
.gni-mark b{font-size:17px}
@media (min-width:1024px){
  .gni-mark b{font-size:22px}
  .gni-giant{font-size:clamp(48px,3.9vw,60px)}
  .gni-cap h1,.gni-cap h2{font-size:28px;line-height:1.31}
  .gni-foot{padding:0;background:var(--gni-paper)}
  .gni-foot > .gni-frame{padding-left:var(--gni-edge);padding-right:var(--gni-edge)}
  .gni-footmark{font-size:32px}
}

/* 사진과 사진 사이 간격 — 칸 사이 8px, 한 줄 전체 칸은 반 칸 두 개+간격과 높이를 정확히 맞춘다(1:1 기준으로 재계산) */
.gni-panels{row-gap:8px;container-type:inline-size}
@media (max-width:1023px){.gni-panels{column-gap:8px}}
@media (min-width:1024px){
  .gni-panels{column-gap:8px;row-gap:8px}
  .gni-panel--wide .gni-slot{aspect-ratio:auto;height:calc((100cqw - 8px) / 2)}
}
/* 2026-10-26 판매 문의서 칸 — 이 쪽에만, 기존 gni- 토큰만 씀(보내기 버튼은 기존 .gni-key). 2026-10-30: 어두운 바탕에 맞춰 입력칸 색만 조정 */
.gni-form{margin-top:var(--gni-s7)}
.gni-form label{display:block;margin:0 0 var(--gni-s1);font-size:14px;line-height:1.5;color:var(--gni-ink)}
.gni-form input[type=text],.gni-form textarea{display:block;width:100%;min-height:var(--gni-hit);margin:0 0 var(--gni-s5);padding:var(--gni-s2) var(--gni-s3);border:1px solid var(--gni-line);border-radius:0;background:var(--gni-mist);color:var(--gni-ink);font:inherit;font-size:16px;line-height:1.5}
.gni-form textarea{min-height:160px;resize:vertical}
.gni-form input:focus-visible,.gni-form textarea:focus-visible{outline:var(--gni-focus-w) solid var(--gni-gold);outline-offset:var(--gni-focus-off)}
.gni-form .gni-agree{display:flex;gap:var(--gni-s2);align-items:flex-start;min-height:var(--gni-hit-min);margin:0 0 var(--gni-s6);color:var(--gni-ink-2)}
.gni-form .gni-agree input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--gni-gold)}
.gni-form + p{margin-top:var(--gni-s5);color:var(--gni-grey)}

/* forsale:start 판매 안내 띠 — 머리글 바로 위 한 줄, 고정 아님, 사이트 금색·먹색 토큰만 씀 */
.gni-sale{display:flex;align-items:center;justify-content:center;height:var(--gni-hit-min);padding:0 var(--gni-edge);background:var(--gni-gold);color:var(--gni-on-gold);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);font-family:var(--gni-face);font-size:var(--gni-label);font-weight:500;line-height:1.2;letter-spacing:normal;text-align:center;text-decoration:none;white-space:nowrap;overflow:hidden}
.gni-sale:hover{text-decoration:underline;text-underline-offset:var(--gni-ul);text-decoration-thickness:var(--gni-ul-w)}
.gni-sale:focus-visible{outline-color:var(--gni-on-gold);outline-offset:-6px}
@media (min-width:1024px){.gni-sale{font-size:14px}}
/* 홈: 사진 위에 얹힌(absolute) 머리글은 판매 띠 아래에서 시작(고정 전환 is-stuck 은 기존대로 top 0, 19세 안내 띠는 2026-10-30부터 히어로 안으로 옮겨 높이 계산에서 뺌) */
.gni-home .gni-top{top:var(--gni-hit-min)}/* forsale:end */