/* ===== Quantum Range — Portal (대문) ===== */
:root{
  --bg:#090c12;
  --panel:#10141d;
  --panel-hi:#161b27;
  --ink:#f2f1ea;
  --ink-dim:#9aa3b2;
  --ink-faint:#586273;
  --line:rgba(255,255,255,.08);
  --line-hi:rgba(255,255,255,.18);
  --mint:#35e3a3;
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  --mono:"Consolas","SF Mono",Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  min-height:100vh;
  padding:clamp(20px,3.4vw,46px);
  overflow-x:hidden;
}

/* ---- background ---- */
.bg-grid,.bg-glow{position:fixed;inset:0;z-index:-1;pointer-events:none}
.bg-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 38%,#000,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 38%,#000,transparent 100%);
}
.bg-glow{
  background:
    radial-gradient(620px 420px at 18% 8%,rgba(53,227,163,.14),transparent 70%),
    radial-gradient(680px 520px at 92% 96%,rgba(92,200,255,.10),transparent 72%);
}

/* (상단 헤더 브랜드 및 RESERVATION/REVIEW CTA는 제거됨 — 히어로 중앙 .subgates 참고) */

/* ---- hero ---- */
.hero{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  max-width:1180px;width:100%;margin:0 auto;
  padding:clamp(40px,7vh,90px) 0;
}
.title-row{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-bottom:clamp(40px,6vh,72px);
}
.title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3.1rem,8.4vw,6.7rem);
  line-height:.98;letter-spacing:-.02em;
  animation:rise .9s .16s both;
}
.title .period{color:var(--mint)}
.hist-open{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.08em;
  color:var(--ink-dim);
  background:linear-gradient(170deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);border-radius:100px;padding:11px 20px;
  animation:rise .9s .34s both;
  transition:border-color .25s,color .25s,transform .25s;
}
.hist-open:hover,.hist-open:focus-visible{
  border-color:color-mix(in srgb,var(--mint) 55%,transparent);
  color:var(--ink);transform:translateY(-2px);outline:none;
}
.hist-open .led{background:var(--mint);box-shadow:0 0 8px var(--mint)}
.hist-open-n{font-size:.7rem;color:var(--ink-faint);border-left:1px solid var(--line);padding-left:9px}

/* ---- gates ---- */
.gates{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.7vw,22px);
}
.gate{
  --accent:#35e3a3;
  position:relative;
  display:flex;flex-direction:column;
  min-height:300px;
  padding:clamp(22px,2vw,30px);
  background:linear-gradient(170deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);
  border-radius:16px;
  text-decoration:none;color:inherit;
  overflow:hidden;
  transition:transform .32s cubic-bezier(.2,.7,.2,1),border-color .32s,box-shadow .32s;
  animation:rise .8s both;
}
.gate:nth-child(1){animation-delay:.34s}
.gate:nth-child(2){animation-delay:.42s}
.gate:nth-child(3){animation-delay:.5s}
.gate:nth-child(4){animation-delay:.58s}
.gate::before{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .36s cubic-bezier(.2,.7,.2,1);
}
.gate::after{
  content:"";position:absolute;right:-40%;top:-40%;
  width:80%;height:80%;border-radius:50%;
  background:radial-gradient(circle,var(--accent),transparent 70%);
  opacity:0;transition:opacity .36s;
}
.gate:hover,.gate:focus-visible{
  transform:translateY(-8px);
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.85);
  outline:none;
}
.gate:hover::before,.gate:focus-visible::before{transform:scaleX(1)}
.gate:hover::after,.gate:focus-visible::after{opacity:.13}

.gate-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:auto;
}
.gate-no{
  font-family:var(--mono);font-size:1.55rem;font-weight:700;
  color:var(--ink-faint);transition:color .3s;
}
.gate:hover .gate-no,.gate:focus-visible .gate-no{color:var(--accent)}
.gate-tag{
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  color:var(--ink-dim);
  border:1px solid var(--line);border-radius:100px;
  padding:6px 11px;
}
.led{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px var(--accent);
}
.gate--demo .gate-tag{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.gate--soon .led{animation:blink 2.4s infinite}

.gate-body{margin:34px 0 24px}
.gate-name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,2.7vw,2.45rem);
  line-height:1.05;margin-bottom:12px;letter-spacing:-.01em;
  word-break:keep-all;
}
.gate-ko{
  font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.1em;
  color:var(--accent);margin-bottom:14px;text-transform:uppercase;
}

.gate-go{
  display:flex;align-items:center;gap:9px;
  font-size:.84rem;font-weight:600;letter-spacing:.04em;
  color:var(--ink);padding-top:18px;
  border-top:1px solid var(--line);
}
.arw{font-style:normal;transition:transform .3s;color:var(--accent);font-size:1.05rem}
.gate:hover .arw,.gate:focus-visible .arw{transform:translateX(6px)}
/* 03 App 게이트의 «이전 버전 히스토리» 보조 링크(10/26) */
.gate-sub{margin-left:auto;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--ink-dim);
  border:1px solid var(--line-hi);border-radius:100px;padding:5px 11px;cursor:pointer;position:relative;z-index:1;transition:color .2s,border-color .2s}
.gate-sub:hover,.gate-sub:focus-visible{color:var(--accent);border-color:var(--accent);outline:none}

/* ---- 문서 게이트 (QR 서비스 정책 · 기획 개요) — product 게이트 위, 가로로 더 넓은 2분할 ---- */
.subgates{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,1.7vw,22px);
  margin-bottom:clamp(14px,1.7vw,22px);
}
.subgates .gate{min-height:auto}
.gate--doc .gate-tag{
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
}

/* QR 서비스 정책 + QR Client 정책 — 세로 스택(각 반높이) */
.gate-stack{display:flex;flex-direction:column;gap:12px}
.gate-stack .gate{flex:1}
.gate--compact{min-height:auto}
.gate--compact .gate-body{margin:16px 0 14px}
.gate--compact .gate-name{font-size:clamp(1.5rem,2.1vw,1.85rem);margin-bottom:8px}
.gate--compact .gate-go{padding-top:12px}
/* 기획서(정책 스택 옆 단일 doc 게이트) — 늘어난 칸에서 이름을 상하 가운데로
   (head는 상단 margin-bottom:auto, body에 margin-bottom:auto 추가 → 위아래 auto 여백이 균등 분배) */
.subgates > .gate--doc .gate-body{margin-bottom:auto}
.gate-sub{
  --accent:#f5b54a;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 18px;
  background:linear-gradient(170deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);border-radius:12px;
  text-decoration:none;color:var(--ink-dim);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s,color .28s;
  animation:rise .8s .46s both;
}
.gate-sub:hover,.gate-sub:focus-visible{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  color:var(--ink);
  outline:none;
}
.gate-sub .gs-name{
  display:flex;align-items:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:.84rem;letter-spacing:.06em;
}
.gate-sub .gs-go{
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;font-weight:700;
  color:var(--ink-faint);transition:color .28s;
}
.gate-sub:hover .gs-go{color:var(--accent)}
.gate-sub:hover .arw{transform:translateX(5px)}

/* ---- 변경 이력 모달 (타이틀 옆 버튼으로 열림) ---- */
.hist-modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(6,9,14,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:histFade .2s both;
}
.hist-modal[hidden]{display:none}
.hist-modal-card{
  width:min(920px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:linear-gradient(170deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line-hi);border-radius:18px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
  padding:clamp(20px,2.4vw,30px);
  animation:histRise .28s cubic-bezier(.2,.7,.2,1) both;
}
.hist-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.hist-close{
  cursor:pointer;flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  background:transparent;border:1px solid var(--line);color:var(--ink-dim);
  font-size:1rem;line-height:1;transition:border-color .2s,color .2s,background .2s;
}
.hist-close:hover,.hist-close:focus-visible{border-color:var(--line-hi);color:var(--ink);background:rgba(255,255,255,.04);outline:none}
@keyframes histFade{from{opacity:0}to{opacity:1}}
@keyframes histRise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
.hist-head{margin-bottom:16px}
.hist-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;font-weight:700;
  color:var(--mint);margin-bottom:10px;
}
.hist-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1;letter-spacing:-.01em;
}
.hist-title .period{color:var(--mint)}
.hist-sub{
  font-family:var(--mono);font-size:.72rem;color:var(--ink-faint);
  letter-spacing:.02em;margin-top:8px;
}
.hist-filters{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.hist-fchip{
  --c:var(--ink-dim);
  cursor:pointer;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink-dim);background:transparent;
  border:1px solid var(--line);border-radius:100px;padding:6px 13px;
  transition:border-color .2s,color .2s,background .2s;
}
.hist-fchip b{color:var(--ink-faint);font-weight:700;margin-left:2px}
.hist-fchip:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent);color:var(--ink)}
.hist-fchip.on{
  color:var(--c);border-color:color-mix(in srgb,var(--c) 55%,transparent);
  background:color-mix(in srgb,var(--c) 12%,transparent);
}
.hist-fchip.on b{color:var(--c)}
.hist-list{
  flex:1;min-height:140px;overflow:auto;
  border:1px solid var(--line);border-radius:14px;
  background:rgba(0,0,0,.16);
}
.hist-row{
  display:grid;
  grid-template-columns:118px auto minmax(0,1fr) auto;
  align-items:center;gap:12px;
  padding:11px 18px;cursor:pointer;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);
  transition:background .16s;
}
.hist-row:last-child{border-bottom:none}
.hist-row:hover,.hist-row:focus-visible{background:rgba(255,255,255,.03);outline:none}
.hist-row:focus-visible{box-shadow:inset 2px 0 0 var(--mint)}
.hist-date{font-family:var(--mono);font-size:.68rem;color:var(--ink-faint);white-space:nowrap}
.hist-areas{display:flex;flex-wrap:wrap;gap:5px}
.hist-chip{
  --c:var(--mint);
  font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.03em;
  color:var(--c);text-decoration:none;
  border:1px solid color-mix(in srgb,var(--c) 38%,transparent);
  background:color-mix(in srgb,var(--c) 10%,transparent);
  border-radius:5px;padding:2px 8px;white-space:nowrap;
  transition:background .18s,transform .18s;
}
.hist-chip:hover{background:color-mix(in srgb,var(--c) 22%,transparent);transform:translateY(-1px)}
.hist-subject{
  font-size:.86rem;color:var(--ink-dim);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hist-row:hover .hist-subject{color:var(--ink)}
.hist-author{font-family:var(--mono);font-size:.66rem;color:var(--ink-faint);white-space:nowrap;text-align:right}
.hist-empty{padding:34px;text-align:center;color:var(--ink-faint);font-size:.86rem}
@media(max-width:760px){
  .hist-row{grid-template-columns:1fr;gap:5px;padding:12px 15px}
  .hist-author{text-align:left}
  .hist-subject{white-space:normal}
}

/* ---- animations ---- */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---- responsive ---- */
@media(max-width:1080px){
  .gates{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .gates{grid-template-columns:1fr}
  .gate{min-height:auto}
  .gate-body{margin:26px 0 22px}
  .gate-head{align-items:center}
  .subgates{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}