/* =====================================================================
   originlogic — 공통 스타일
   방향: 따뜻한 종이 위의 어두운 계기판
   사람이 읽는 면은 밝고, 기계가 보는 화면은 어둡다.
   ===================================================================== */

/* ------------------------------ 토큰 ------------------------------ */
:root{
  /* 종이 (사람의 면) */
  --paper:       #EDEAE4;
  --paper-2:     #E5E1D9;
  --paper-3:     #DCD7CC;
  --rule:        #D2CCC0;
  --rule-soft:   #E0DBD1;

  /* 잉크 */
  /* 종이 위 글자 3단계 — 전부 4.5:1 이상 */
  --ink:         #16161A;   /* 16.2 : 1 */
  --ink-2:       #34343A;   /*  9.9 : 1 */
  --muted:       #5F5C55;   /*  5.6 : 1 */
  --faint:       #666257;   /*  5.1 : 1 — 작은 라벨까지 읽히도록 */

  /* 계기판 (기계의 면) — 같은 3단계 */
  --panel:       #0C0D11;
  --panel-2:     #13151B;
  --panel-3:     #191C23;
  --panel-rule:  #242832;
  --panel-ink:   #E7E4DB;   /* 15.3 : 1 */
  --panel-muted: #A5A093;   /*  7.9 : 1 */
  --panel-faint: #888375;   /*  5.1 : 1 */

  /* 제품 색 — 장식이 아니라 구분 정보 */
  --gold:        #B8894A;   /* GoldRun · 괘선·마크 전용 (글자 금지) */
  --gold-deep:   #7F5C24;   /* GoldRun · 글자용  5.1 : 1 */
  --gold-lit:    #F0B429;   /* GoldRun · 계기판 위 10.4 : 1 */
  --cyan:        #1D6580;   /* RubberBand · 괘선·마크 */
  --cyan-deep:   #17505F;   /* RubberBand · 글자용  7.5 : 1 */
  --cyan-lit:    #4CC9F0;   /* RubberBand · 계기판 위 10.1 : 1 */

  --pos:         #256A45;   /*  5.4 : 1 */
  --neg:         #A63F3C;   /*  5.2 : 1 */

  /* 서체 */
  /* 큰 글씨(제목·인용)는 Pretendard, 본문은 IBM Plex Sans KR, 수치는 Mono */
  --display: "Pretendard Variable", Pretendard, "IBM Plex Sans KR",
             -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:  "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI",
           "Malgun Gothic", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 간격 */
  --gut: clamp(20px, 4vw, 64px);
  --max: 1180px;
  --max-read: 62ch;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* 종이 결 — 아주 옅게. 인쇄물의 촉감만 남긴다. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.32;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:multiply;
}
body > *{ position:relative; z-index:1 }

img,video,svg{ max-width:100%; display:block }

::selection{ background:#16161A; color:#EDEAE4 }

:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:2px;
}

/* ------------------------------ 타이포 ------------------------------ */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.035em;
  margin:0;
  word-break:keep-all;
}
h1{ font-size:clamp(32px, 5.6vw, 62px); line-height:1.2; letter-spacing:-.04em }
h2{ font-size:clamp(25px, 3.4vw, 40px) }
h3{ font-size:clamp(19px, 2.1vw, 25px) }
p{ margin:0 0 1.15em; word-break:keep-all }
p:last-child{ margin-bottom:0 }
a{ color:inherit }
strong{ font-weight:600 }

/* 여백 라벨 — 장부의 항목 번호처럼 */
.tag{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--faint);
  display:block;
  margin-bottom:.9em;
}
.tag--gold{ color:var(--gold-deep) }
.tag--cyan{ color:var(--cyan-deep) }

.lede{
  font-size:clamp(17px, 1.65vw, 20px);
  line-height:1.82;
  color:var(--ink-2);
  max-width:var(--max-read);
}
.sm{ font-size:14.5px; line-height:1.72; color:var(--muted) }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em }

/* ------------------------------ 레이아웃 ------------------------------ */
.shell{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut) }
.section{ padding-block:clamp(64px, 9vw, 126px) }
.section--tight{ padding-block:clamp(46px, 6vw, 78px) }
.hr{ border:0; border-top:1px solid var(--rule); margin:0 }

.split{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px, 5vw, 76px);
  align-items:start;
}
.split--flip > :first-child{ order:2 }
@media (max-width:900px){
  /* minmax(0,…) 없이 1fr 만 쓰면 트랙의 최소폭이 콘텐츠 min-content 가 되어
     넓은 표·이미지가 화면을 밀어냅니다. 반드시 0 을 최소값으로 둡니다. */
  .split{ grid-template-columns:minmax(0,1fr); gap:34px }
  .split--flip > :first-child{ order:0 }
}
.sticky{ position:sticky; top:112px }
@media (max-width:900px){ .sticky{ position:static } }

/* ------------------------------ 조준 마크 ------------------------------ */
/* 로고의 동심원 과녁에서 뽑아낸 표식. 섹션의 시작을 알린다. */
.aim{ width:19px; height:19px; flex:none; display:block }
.aim circle{ fill:none; stroke:currentColor }
.aim .r1{ stroke-width:1.5; opacity:.28 }
.aim .r2{ stroke-width:1.5; opacity:.55 }
.aim .r3{ fill:currentColor; stroke:none }

.mark-row{
  display:flex; align-items:center; gap:11px;
  color:var(--gold-deep); margin-bottom:1.1em;
}
.mark-row .tag{ margin:0 }

/* ------------------------------ 헤더 ------------------------------ */
.hdr{
  position:sticky; top:0; z-index:60;
  /* 어두운 계기판이 아래로 지나가도 글자 대비가 무너지지 않도록 충분히 불투명하게 */
  background:color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter:saturate(1.4) blur(11px);
  -webkit-backdrop-filter:saturate(1.4) blur(11px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.hdr.is-stuck{ border-bottom-color:var(--rule) }
.hdr__in{
  max-width:var(--max); margin-inline:auto;
  padding:14px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none }
.brand img{
  height:42px; width:auto;
  mix-blend-mode:multiply;   /* 흰 배경 로고를 종이에 얹는다 */
}
@media (max-width:520px){ .brand img{ height:32px } }

.nav{ display:flex; align-items:center; gap:clamp(4px,1.6vw,10px) }
.nav a{
  font-size:14.5px; font-weight:500; text-decoration:none;
  color:var(--muted); padding:9px 11px; border-radius:3px;
  position:relative; transition:color .2s, background .2s;
  white-space:nowrap;
}
.nav a:hover{ color:var(--ink); background:var(--paper-2) }
.nav a[aria-current="page"]{ color:var(--ink); font-weight:600 }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:11px; right:11px; bottom:3px;
  height:1.5px; background:var(--gold);
}
.nav .cta{
  color:var(--paper); background:var(--ink);
  font-weight:600; padding:9px 17px; margin-left:6px;
}
.nav .cta:hover{ background:var(--gold-deep); color:var(--paper) }
.nav .cta[aria-current="page"]{ color:var(--paper); background:var(--gold-deep) }
.nav .cta[aria-current="page"]::after{ display:none }

.burger{
  display:none; background:none; border:1px solid var(--rule);
  border-radius:3px; padding:8px 11px; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--ink); text-transform:uppercase;
}
@media (max-width:860px){
  .burger{ display:block }
  .nav{
    position:fixed; inset:59px 0 auto; flex-direction:column;
    align-items:stretch; gap:0; padding:8px var(--gut) 20px;
    background:var(--paper); border-bottom:1px solid var(--rule);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .22s, transform .22s;
    max-height:calc(100dvh - 59px); overflow-y:auto;
  }
  .nav.is-open{ opacity:1; transform:none; pointer-events:auto }
  .nav a{ padding:15px 4px; font-size:17px; border-bottom:1px solid var(--rule-soft) }
  .nav a[aria-current="page"]::after{ left:4px; right:auto; width:18px; bottom:11px }
  .nav .cta{ margin:14px 0 0; text-align:center; border-bottom:0; border-radius:3px }
}

/* ------------------------------ 버튼 ------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:15px; font-weight:600;
  text-decoration:none; cursor:pointer;
  padding:14px 26px; border-radius:3px; border:1px solid transparent;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active{ transform:translateY(1px) }
.btn--fill{ background:var(--ink); color:var(--paper) }
.btn--fill:hover{ background:var(--gold-deep) }
.btn--line{ border-color:var(--ink); color:var(--ink) }
.btn--line:hover{ background:var(--ink); color:var(--paper) }
.btn--ghost{ border-color:var(--rule); color:var(--muted); padding:12px 20px; font-size:14px }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink) }
.btn__arw{ transition:transform .22s }
.btn:hover .btn__arw{ transform:translateX(3px) }

/* ------------------------------ 계기판 ------------------------------ */
/* 이 사이트의 서명. 데이터는 전부 이 어두운 패널 안에서만 산다. */
.panel{
  background:linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border:1px solid var(--panel-rule);
  border-radius:5px;
  color:var(--panel-ink);
  overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.5), 0 18px 40px -26px rgba(22,22,26,.55);
}
.panel__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  padding:11px 15px;
  border-bottom:1px solid var(--panel-rule);
  background:rgba(0,0,0,.22);
}
.panel__id{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--panel-ink);
  display:flex; align-items:center; gap:9px;
}
.panel__meta{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--panel-faint);
}
.panel__body{ padding:15px }
.panel__body--flush{ padding:0 }
.panel__foot{
  padding:11px 15px; border-top:1px solid var(--panel-rule);
  font-size:12.5px; color:var(--panel-muted); line-height:1.65;
}
.panel--gold .panel__id{ color:var(--gold-lit) }
.panel--cyan .panel__id{ color:var(--cyan-lit) }

/* 계기판 안의 수치 격자 */
.readout{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
  border-top:1px solid var(--panel-rule);
}
.readout div{
  padding:14px 15px;
  border-right:1px solid var(--panel-rule);
  border-bottom:1px solid var(--panel-rule);
}
.readout div:last-child{ border-right:0 }
.readout dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--panel-faint); margin-bottom:7px;
}
.readout dd{
  margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:clamp(19px,2.3vw,25px); font-weight:500; letter-spacing:-.02em;
  color:var(--panel-ink); line-height:1.1;
}
.readout dd small{ font-size:.56em; color:var(--panel-muted); font-weight:400; margin-left:2px }
.readout .up{ color:#4FBF84 } .readout .dn{ color:#E0605C }
.readout .gd{ color:var(--gold-lit) } .readout .cy{ color:var(--cyan-lit) }

/* ------------------------------ 종이 위 카드 ------------------------------ */
.card{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:clamp(20px,2.6vw,30px);
}
.card--plain{ background:none; border:0; border-top:1.5px solid var(--ink); padding:22px 0 0 }

.rows{ border-top:1px solid var(--rule) }
.rows > div{
  display:grid; grid-template-columns:minmax(120px,.42fr) 1fr;
  gap:12px 24px; padding:15px 2px;
  border-bottom:1px solid var(--rule-soft);
}
.rows dt{ font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:var(--muted) }
.rows dd{ margin:0; font-size:15px; color:var(--ink-2) }
@media (max-width:560px){ .rows > div{ grid-template-columns:1fr; gap:4px } }

/* ------------------------------ 고지 ------------------------------ */
.note{
  border-left:2px solid var(--gold);
  padding:3px 0 3px 17px;
  font-size:14px; line-height:1.75; color:var(--muted);
  max-width:var(--max-read);
}
.banner{
  background:var(--paper-3); border:1px solid var(--rule);
  border-radius:4px; padding:15px 19px;
  display:flex; gap:13px; align-items:flex-start;
  font-size:14px; line-height:1.7; color:var(--ink-2);
}
.banner .aim{ margin-top:4px; color:var(--gold-deep) }

/* ------------------------------ 푸터 ------------------------------ */
.ftr{ background:var(--panel); color:var(--panel-muted); margin-top:auto }
.ftr__in{
  max-width:var(--max); margin-inline:auto; padding:clamp(46px,6vw,76px) var(--gut) 34px;
  display:grid; grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));
  gap:clamp(26px,4vw,54px);
}
@media (max-width:760px){ .ftr__in{ grid-template-columns:1fr 1fr } .ftr__brand{ grid-column:1/-1 } }
.ftr h4{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.19em;
  text-transform:uppercase; color:var(--panel-faint); margin-bottom:15px;
}
.ftr a{ color:var(--panel-muted); text-decoration:none; font-size:14.5px }
.ftr a:hover{ color:var(--panel-ink) }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.ftr__word{
  font-family:var(--mono); font-size:16px; font-weight:500; letter-spacing:.1em;
  color:var(--panel-ink); display:flex; align-items:center; gap:10px; margin-bottom:15px;
}
.ftr__word .aim{ color:var(--gold-lit) }
.ftr__risk{
  max-width:44ch; font-size:13px; line-height:1.78; color:var(--panel-faint);
}
.ftr__base{
  border-top:1px solid var(--panel-rule);
  max-width:var(--max); margin-inline:auto;
  padding:19px var(--gut) 40px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; color:var(--panel-faint);
}

/* ------------------------------ 등장 ------------------------------ */
.rev{ opacity:0; transform:translateY(14px); transition:opacity .62s ease, transform .62s cubic-bezier(.22,.7,.3,1) }
.rev.is-in{ opacity:1; transform:none }
.rev-d1{ transition-delay:.07s } .rev-d2{ transition-delay:.14s } .rev-d3{ transition-delay:.21s }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .rev{ opacity:1; transform:none }
}

html{ scroll-behavior:smooth; scroll-padding-top:90px }
body{ min-height:100dvh; display:flex; flex-direction:column }
main{ flex:1 }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:12px 20px; text-decoration:none;
}
.skip:focus{ left:0 }