@charset "utf-8";
/* ETHER 홍보사이트 (index.html) · 커서 광원 · 풀페이지 넘기기 · 섹션 타이틀 쌓임 · 오로라 전환 — index.html 에 적힌 순서대로 불러온다 */
/* ============ 커서 광원 ============
   표면 밝기에 따라 빛이 다르게 반응해야 한다.
   흰 카드 위에서는 screen 이 아무 일도 하지 않고,
   진한 퍼플 위에서는 multiply 가 그림자로 읽힌다.
   그래서 두 겹을 겹쳐 어느 표면에서든 '빛'으로 읽히게 만들었다. */
#curLight{
  position:fixed; top:0; left:0; width:0; height:0; z-index:60;
  pointer-events:none; opacity:0; will-change:transform;
  transition:opacity .55s ease;
  /* ── 확정 파라미터 (튜너 실측값) ── */
  --cl-size:69px;       /* 기본 지름 */
  --cl-hover:93px;      /* hover 시 지름 */
  --cl-ga:.50;          /* glow 중심 알파 — screen, 깊은 표면 담당 */
  --cl-ta:.13;          /* tint 중심 알파 — multiply, 밝은 표면 담당 */
  --cl-mid:44%;         /* 감쇠 중간 스톱 */
  --cl-end:84%;         /* 감쇠 끝 스톱 */
}
#curLight.on{opacity:1}
#curLight i{
  position:absolute; left:0; top:0; display:block; border-radius:50%;
  width:var(--cl-cur,var(--cl-size)); height:var(--cl-cur,var(--cl-size));
  margin:calc(var(--cl-cur,var(--cl-size)) / -2) 0 0 calc(var(--cl-cur,var(--cl-size)) / -2);
  transition:width .5s cubic-bezier(.22,.61,.36,1),
             height .5s cubic-bezier(.22,.61,.36,1),
             margin .5s cubic-bezier(.22,.61,.36,1),
             opacity .5s ease, background .3s ease;
}
.cl-tint{
  mix-blend-mode:multiply;
  background:radial-gradient(circle closest-side,
    rgba(74,155,224,var(--cl-ta)) 0%,
    rgba(74,155,224,calc(var(--cl-ta) * .46)) var(--cl-mid),
    rgba(74,155,224,0) var(--cl-end));
}
.cl-glow{
  mix-blend-mode:screen;
  background:radial-gradient(circle closest-side,
    rgba(176,220,255,var(--cl-ga)) 0%,
    rgba(120,186,245,calc(var(--cl-ga) * .44)) var(--cl-mid),
    rgba(96,166,238,0) var(--cl-end));
}
#curLight.hot{--cl-cur:var(--cl-hover)}
@media(hover:none),(pointer:coarse){#curLight{display:none}}
@media(prefers-reduced-motion:reduce){#curLight{display:none}}


/* ============ FULL-PAGE DECK (풀페이징) ============
   문서 스크롤을 걷어내고 한 화면에 한 판(섹션)만 둔다.
   판 사이 이동은 page-deck.js 가 즉시 교체로 담당하고, 스크롤은 판 안에서만 일어난다.
   → 이전 버전의 sticky 인덱스 바 누적(중첩)은 여기서 사라진다. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}

#chrome{position:fixed;left:0;right:0;top:0;z-index:100}
.nav{position:relative;top:auto;transition:background .5s ease,border-color .5s ease}

/* 덱의 top 은 '지금 실제로 쌓인 띠 높이'(--stack-h)를 따라간다.
   최대치로 고정 예약하면 판 01 에서 줄 하나(48px)만 쌓였는데도 116px 을
   비워 두게 되어, 제목 위에 쓰이지 않는 색면이 68px 남는다. */
.deck{
  position:fixed; left:0; right:0;
  top:calc(var(--chrome-h,120px) + var(--stack-h,0px)); bottom:0;
  overflow:hidden; background:var(--bg-3);
}

/* 한 장의 판. 하나만 보이고, 넘치는 내용은 이 안에서만 스크롤한다 */
.pg{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--stk-bg,var(--bg-3));
  visibility:hidden; pointer-events:none;
}
.pg.is-on{visibility:visible; pointer-events:auto}
/* 띠 높이가 판마다 달라지면 .deck 이 리사이즈된다. visibility:hidden 만으로는
   숨은 판 7장도 전부 다시 레이아웃되어 교체 프레임이 튄다(원 주석의 50→133ms).
   content-visibility:hidden 은 자식 트리의 레이아웃 자체를 건너뛰므로
   리사이즈 비용이 '활성 판 1장'으로 줄어든다.
   판은 어차피 swap() 에서 scrollTop=0 으로 초기화되고, .reveal 관찰도
   ether:page 이후에 시작하므로 숨은 동안 레이아웃이 없어도 잃을 상태가 없다. */
.pg:not(.is-on){content-visibility:hidden}
/* 스크롤바 — 이전엔 --line(불투명도 10%)이라 배경에 묻혀 있는지조차 안 보였다.
   --ink-deco(34%)로 올려 '얇지만 분명히 있는' 상태로 만든다. 잡으면 한 단계 더 진해진다.
   Firefox 는 의사요소를 지원하지 않으므로 scrollbar-color 로 같은 값을 따로 준다. */
.pg{scrollbar-width:thin;scrollbar-color:var(--ink-deco) transparent;
  /* 달력·시각 팝업이 판 아래로 넘쳐 스크롤바가 새로 생겨도 그 폭만큼 내용이 옆으로 밀리지 않게 자리를 미리 잡아 둔다 */
  scrollbar-gutter:stable}
.pg::-webkit-scrollbar{width:9px}
.pg::-webkit-scrollbar-thumb{background:var(--ink-deco);border-radius:99px;
  border:2px solid transparent;background-clip:padding-box}
.pg::-webkit-scrollbar-thumb:hover{background:var(--ink-2);background-clip:padding-box}
.pg::-webkit-scrollbar-track{background:transparent}

/* 판 안쪽 섹션은 평범한 흐름. 스택 시절의 겹침 여백을 걷어낸다 */
.stack-item{position:relative;padding-top:var(--sp-7);padding-bottom:var(--sp-9);background:var(--stk-bg)}
.pg-hero{background:var(--bg-3)}
.pg-hero .hero{min-height:100%;padding-top:0}
/* 01 STATEMENT : 판 높이를 채우고 세로 가운데 → 제목 위 여백 = 박스 아래 여백.
   내용이 판보다 길면 그대로 늘어나 스크롤된다 */
#statement{min-height:100%;display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--sp-7);padding-bottom:var(--sp-7)}
#statement>.wrap{width:100%}
/* 브랜드 소개 (2026-11-10) : 본문 16px · 폭 920px 가운데(PC 에서 두 줄 — 640px 는 세 줄이었다) · 강조 두 곳만 코발트.
   캡션을 지워 제목 바로 아래 : 제목 ↔ 소개 24 (제목 아래 16 + 위 8) · 소개 ↔ 박스 48 */
#statement .band-about{max-width:920px;margin:var(--sp-2) auto var(--sp-7);text-align:center;font-size:var(--fs-4);line-height:1.8;color:var(--ink-2);word-break:keep-all;text-wrap:balance}
#statement .band-about b{font-weight:600;color:var(--cobalt-t)}
@media (max-width:520px){ #statement .band-about{font-size:15px} }

/* 02 READ : 한 화면 맞춤 (시안 A · 컴팩트 2단)
   판(#pg-read)을 높이 컨테이너로 삼아 글자·간격을 '보이는 높이(cqh)'에 비례시킨다.
   1366×768 노트북(판 높이 ≈ 470px)부터 QHD 까지 스크롤 없이 한 화면에 든다.
   내용이 판보다 길면(결과가 길거나 아주 낮은 창) 그대로 늘어나 스크롤된다. */
#pg-read{container-type:size}
#read{--rd-pad:clamp(32px,6.8cqh,64px);   /* 결과 박스 안쪽 여백(기존 16–32 의 2배) — 왼쪽 폼 시작선 계산에도 같이 쓴다 */
  min-height:100%;display:flex;flex-direction:column;
  padding-top:clamp(16px,4.5cqh,56px);padding-bottom:clamp(16px,4.5cqh,56px)}
/* 폼+결과 칸 높이 = 판 높이 − 위아래 여백. flex 로 '남는 높이' 를 나눠 받으면 결과 아래 요약(03+)이
   나타날 때 칸이 줄어든다 → 판 높이(cqh)로 직접 잡아 결과 전·후 크기를 고정한다 */
#read>.read-in{flex:none;width:100%;gap:clamp(24px,4cqh,56px);
  /* 요약(.rd-read)은 같은 격자의 둘째 줄(양쪽 칸 차지)이라, 높이를 격자 전체에 주면 둘이 나눠 갖는다.
     첫 줄(폼·결과 박스)에만 판 높이를 준다. 폼이 더 길면(아주 낮은 창) 그만큼만 늘어난다 */
  grid-template-rows:minmax(calc(100cqh - 2 * clamp(16px,4.5cqh,56px)),auto)}
/* 폼은 위 정렬 — 제목 윗선이 오른쪽 결과 박스 윗선과 같은 높이에서 시작한다.
   (가운데 정렬이면 결과가 길어질 때 폼만 아래로 떠 내려가 두 칼럼 시작점이 어긋난다) */
#read .read-form{justify-content:flex-start;
  /* 왼쪽 제목을 오른쪽 사주 기둥 박스 윗선에 맞춘다 :
     박스 테두리 1px + 안쪽 여백 + 머리줄(四柱八字 · 나의 원국) 16px + 그 아래 간격 16px.
     결과 전·후 모두 같은 값이라, 결과가 떠도 폼은 움직이지 않는다 */
  padding-top:calc(1px + var(--rd-pad) + 16px + 16px)}
#read .rd-head{line-height:16px;margin-bottom:16px}
/* 위 margin -.14em : 줄높이 1.3 의 윗쪽 여유(half-leading)를 걷어 글자 윗선을 박스 윗선에 붙인다 */
#read .read-form .sec-title{margin:-.14em 0 clamp(4px,1cqh,10px);font-size:clamp(17px,min(6.1cqi,5.6cqh),34px)}
/* 폼 네 묶음(제목 · 생년월일/시각 · 성별 · 버튼) 사이 간격 = 24px(--sp-5) 고정 — 좌우 칸 간격과 같은 값 */
#read .read-form .sec-sub{font-size:clamp(13px,2.3cqh,16px);margin:0 0 60px}   /* 간격 단계 밖 값 — 디자인 확정치 */
#read .rd-grp{margin-bottom:clamp(10px,2.8cqh,26px)}
#read .rd-opts2 .rd-grp{margin-bottom:0}   /* 달력·성별 타일 — 아래 체크 줄까지 간격은 .rd-subrow 의 margin-top 하나로만 */
/* line-height 고정 : 「오후」(한글 세리프)와 숫자(Fraunces)는 기본 줄높이가 달라
   나란히 두면 시각 쪽 밑줄만 몇 px 내려간다 */
#read .rd-input{font-size:clamp(16px,min(4.1cqh,5.8cqi),30px);   /* 한 단계 작게 : 최대 34 → 30(--fs-8 h3) · 줄어드는 비율도 같이 약 0.88 배 */line-height:1.3;padding:clamp(2px,.8cqh,8px) 0}
.rd-row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
/* 아래 두 줄도 .rd-row2 와 같은 2열 격자 → 체크박스가 시각 입력 시작선에 세로로 맞는다 */
.rd-meta{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--sp-2) var(--sp-5);
  margin:calc(-1 * clamp(4px,1.4cqh,12px)) 0 36px}   /* 간격 단계 밖 값 — 디자인 확정치 */
.rd-meta .rd-live,.rd-meta .rd-chk{margin-top:0}
/* 체크·시각 변경으로 문구가 바뀌어도 줄 수(높이)가 변하지 않게 한 줄 고정 */
.rd-meta .rd-live{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* 달력(양력·음력) · 성별 타일 — 같은 2열 격자라 성별 타일이 시각 입력 시작선에 맞는다.
   선택 = 면을 채우지 않고 흰 카드 + 파란 테두리·글자 + 옅은 그림자 (시안 D3) */
.rd-opts2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
/* 성별 라벨에만 '필수' 칩(20px)이 있어 줄이 높아진다 → 두 라벨 높이를 칩 높이로 고정해 타일 윗선을 맞춘다 */
.rd-opts2 .rd-grp>label:not(.rd-chk){display:flex;align-items:center;height:20px}
.rd-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
/* 크기 = '내 기운 읽기' 버튼(.rd-acts .btn)과 같은 38px · 14px — 고르는 칸이 제출 버튼보다 커 보이지 않게 */
.rd-tile{height:38px;padding:0 var(--sp-2);border:1px solid var(--line);border-radius:8px;
  background:rgba(255,255,255,.55);font-family:var(--sans);font-size:13px;line-height:1;letter-spacing:-.01em;
  color:var(--ink-2);cursor:pointer;transition:.22s;white-space:nowrap}
.rd-tile:hover{border-color:var(--cobalt);background:#fff}
.rd-tile[aria-checked="true"]{background:#fff;border-color:var(--cobalt);color:var(--cobalt-t);font-weight:600;
  box-shadow:0 1px 2px rgba(56,140,235,.08),0 10px 22px -16px rgba(56,140,235,.6)}
.rd-tile:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.rd-tiles.err .rd-tile{border-color:var(--fire-t)}   /* 성별 미선택으로 '내 기운 읽기' 를 눌렀을 때 */
/* 성별 라벨이 오른쪽 칸에 있어 툴팁(360px)을 오른쪽으로 펼치면 폼·화면 밖으로 나간다 → 왼쪽으로 펼친다.
   1열로 접히는 폭(520px 이하)에선 라벨이 다시 왼쪽 끝이라 원래 방향 그대로 */
@media (min-width:521px){
  .rd-opts2 .rd-tip{left:auto;right:-10px}
  .rd-opts2 .rd-tip::before{left:auto;right:14px}
}
/* 윤달 · 진태양시 체크 줄 — 위 타일과 같은 2열 */
.rd-subrow{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-4)}
.rd-subrow .rd-chk{margin-top:0}
/* 진태양시 체크 + 느낌표. 2열일 땐 오른쪽 칸이라 툴팁을 아이콘 오른쪽 끝에 맞춰 왼쪽으로 펼친다
   (1열이 되는 520px 이하에선 기본값대로 왼쪽 정렬) */
.rd-solar{display:flex;align-items:center;min-width:0}
@media (min-width:521px){
  .rd-solar .rd-tip{left:auto;right:-10px}
  .rd-solar .rd-tip::before{left:auto;right:14px}
}
/* 윤달은 음력일 때만 쓴다 — 늘 보이되 양력에선 흐리게 잠가 '음력에 딸린 옵션' 임을 드러낸다 */
.rd-leap:has(input:disabled){opacity:.4;cursor:not-allowed}
.rd-leap:has(input:disabled):hover .box{border-color:rgba(11,31,58,.24)}
/* 음력 변환 실패(그 달에 윤달 없음 · 30일 없음) 안내 — 시각 풀이 줄을 잠시 빌려 쓴다 */
.rd-live.is-err,.rd-live.is-err b{color:var(--fire-t)}
#read .seg-b{padding-top:clamp(6px,1.4cqh,12px);padding-bottom:clamp(6px,1.4cqh,12px)}
#read .rd-acts{margin-top:60px}   /* 설명 문장 아래 여백과 같은 값 */
#read .rd-stage{min-height:0;padding:var(--rd-pad)}
#read .rd-stage.has-res{padding:var(--rd-pad)}
/* 결과 박스는 크기 고정 — 내용이 길어도 박스가 늘지 않고 박스 안에서 스크롤한다.
   contain:size : 박스의 높이가 내용에 끌려가지 않고 격자 줄(폼·화면 높이)에만 맞춰진다. */
#read .rd-stage{contain:size;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--ink-deco) transparent}
#read .rd-stage::-webkit-scrollbar{width:8px}
#read .rd-stage::-webkit-scrollbar-button{display:none;height:0}
#read .rd-stage::-webkit-scrollbar-track{background:transparent;margin:var(--sp-4) 0}
#read .rd-stage::-webkit-scrollbar-thumb{background:var(--ink-deco);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
#read .rd-ph{font-size:clamp(15px,2.6cqh,20px)}
/* 1단으로 접히면(980px 이하) 폼 아래로 결과가 이어지므로 화면 맞춤을 풀고 원래 흐름으로 */
@media (max-width:980px){
  #read>.read-in{flex:none;grid-template-rows:none}
  #read .read-form{padding-top:0}   /* 1단에선 결과가 아래에 있으니 맞출 상대가 없다 */
  #read .rd-stage{min-height:300px;contain:none;overflow:visible}   /* 1단에선 박스가 내용만큼 늘어난다 */
}
@media (max-width:520px){.rd-row2,.rd-meta,.rd-opts2,.rd-subrow{grid-template-columns:1fr}.rd-row2{gap:0}.rd-opts2{gap:var(--sp-4)}}
/* 첫 화면 문구 블록은 '보이는 판 높이'(화면 − 상단 크롬 − 쌓인 띠)를 꽉 채우고 그 안에서
   세로 가운데 정렬한다 → 모니터 해상도·창 높이와 상관없이 항상 화면 중앙. 아래 스테이지는 스크롤로 이어진다 */
.hero-intro{
  /* ÷ var(--vz) : 화면 배율(view-zoom.js · html zoom)을 줄이면 vh 도 같이 줄어드니 되돌려 늘 화면 높이를 채운다 */
  min-height:calc(100vh / var(--vz,1) - var(--chrome-h,120px) - var(--stack-h,0px));
  min-height:calc(100dvh / var(--vz,1) - var(--chrome-h,120px) - var(--stack-h,0px));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--sp-6) 0;
}
/* 07 CLOSING : 128vh 는 스택 스크롤 길이를 벌기 위한 값이었다 */

/* ============ SECTION INDEX STACK (타이틀 쌓임) ============
   덱 위에 공유되는 한 장. 판이 바뀌면 줄들이 활성 → 접힘 → 흔적으로 내려앉는다.
   활성 48 + 접힘 28×2 + 흔적 2×4 = 최대 112px (07 기준).
   막(z 90) 보다 위(z 92)에 두어 쌓이는 동작이 보이게 한다. */
/* 띠 높이는 판마다 '그 판에서 실제로 쌓인 줄들의 합'이다 (JS 의 stackHeight).
     판 0  0px  — 히어로. 쌓인 줄이 없다
     판 1  48   — 활성 한 줄
     판 2  76   — 활성 + 접힘 1
     판 3  104  — 활성 + 접힘 2
     판 4~7 107·110·113·116 — 흔적이 3px 씩 붙는다
   예전에는 최대치(116)로 고정 예약했다. 판 01 에서 48px 만 쌓였는데도 116px 을
   비워 두니 제목 위에 쓰이지 않는 색면이 남았다. 이제 여백이 적층을 따라 자란다.
   리사이즈 비용은 .pg:not(.is-on) 의 content-visibility:hidden 이 받아낸다.
   높이에 transition 을 걸지 않는 이유 : #stack 은 애니메이션되는데 .deck 의 top 은
   같이 못 따라와 경계에 틈이 벌어진다. 어차피 막(z 90) 아래에서 바뀌므로 즉시 바꾼다. */
#stack{
  position:fixed; left:0; right:0; top:var(--chrome-h,120px);
  height:var(--stack-h,0px); overflow:hidden;
  z-index:92; display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--sb-band,var(--bg-3));
  transition:background .45s ease;
}
.sb{
  position:relative; display:flex; align-items:center; overflow:hidden;
  width:100%; height:0; margin:0; padding:0; border:0; text-align:left;
  font:inherit; color:var(--ink); cursor:pointer;
  background:var(--sb-bg,var(--bg-2));
  box-shadow:0 -1px 0 var(--line-2);
  transition:height var(--sb-dur) var(--sb-ease),
             filter var(--sb-dur) var(--sb-ease),
             box-shadow .3s ease;
}
.sb-in{display:flex;align-items:center;gap:var(--sp-4);width:100%;height:100%;white-space:nowrap;
  opacity:1;transition:opacity .26s ease}
.sb-no{
  flex:none;font-size:var(--fs-2);letter-spacing:.18em;color:var(--ink-3);
  padding:var(--sp-0) var(--sp-2);border:1px solid var(--line-2);border-radius:var(--r-full);
  transition:color .3s ease,border-color .3s ease,padding var(--sb-dur) var(--sb-ease);
}
.sb-title{
  font-family:var(--serif);font-weight:var(--fw-d5);line-height:1.2;letter-spacing:var(--ls-d5);
  font-size:var(--fs-5);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;
  transition:font-size var(--sb-dur) var(--sb-ease),color .3s ease;
}

/* ── 상태 ── */
.sb.is-off{height:0;pointer-events:none}
.sb.is-off .sb-in{opacity:0}
/* 흔적 : 글자를 버리고 색 띠만 남는다.
   표면 래더(sf1~sf6)가 인접값끼리 가까워 그냥 두면 여러 줄이 한 덩어리로 보인다.
   → 채도 보정 + 줄마다 헤어라인으로 층을 분리한다. */
.sb.is-trace{
  height:var(--sb-trace); pointer-events:none;
  border-top:1px solid var(--line-2);
  filter:saturate(1.9) brightness(.97);
}
.sb.is-trace .sb-in{opacity:0}
/* 접힘 : 얇은 인덱스 줄 */
.sb.is-fold{height:var(--sb-fold);box-shadow:0 -1px 0 var(--line)}
.sb.is-fold .sb-title{font-size:var(--fs-2);color:var(--ink-2)}
.sb.is-fold .sb-no{border-color:transparent;padding-left:0;padding-right:0;font-size:var(--fs-1)}
/* 활성 : 지금 읽고 있는 판의 머리. 모서리는 직각 — 앞 줄과 그림자로만 구분한다 */
.sb.is-active{
  height:var(--sb-active); cursor:default;
  box-shadow:0 -1px 0 var(--line-2), 0 14px 30px -22px rgba(56,140,235,.42);
}
.sb.is-fold:hover .sb-title{color:var(--cobalt-t)}
.sb:focus-visible{outline:2px solid var(--cobalt);outline-offset:-3px}

/* 06(JOURNAL) = 브랜드 그라데이션 위 */

@media(prefers-reduced-motion:reduce){
  .sb,.sb-in,.sb-no,.sb-title{transition:none}
}

/* ============ AURORA (My Energy 진입 전환) ============
   다른 판은 즉시 교체, #read 로 들어올 때만 쓴다. page-deck.js 가 opacity 를 움직인다.
   바탕색을 깔아 두는 이유 : 덩어리 사이 틈으로 판이 비치면 교체 순간이 보인다 → 정점에서 화면을 완전히 덮는다.
   z-index 90 : 스택(92) · nav(100) 는 막 위에 남는다.
   inset -15% + 컨테이너 blur : 흐린 가장자리가 화면 밖에 떨어져 테두리가 보이지 않는다. */
#aurora{position:fixed;inset:-15%;z-index:90;pointer-events:none;visibility:hidden;opacity:0;
  background:#EAF4FF;filter:blur(60px)}
#aurora.is-on{visibility:visible}
#aurora i{position:absolute;border-radius:50%}
#aurora .a1{left:10%;top:15%;width:55%;height:55%;background:#9CCBFF}
#aurora .a2{right:8%;top:10%;width:45%;height:50%;background:#F7C6E4}
#aurora .a3{left:25%;bottom:5%;width:50%;height:45%;background:#BFF0DD}
#aurora .a4{right:20%;bottom:15%;width:35%;height:40%;background:#D9CCFF}
#aurora .a5{left:40%;top:35%;width:30%;height:30%;background:#FFFFFF}
@media(prefers-reduced-motion:reduce){#aurora{display:none !important}}
/* 들어온 뒤 결과 카드가 무지갯빛 테두리로 한 번 숨쉰다 — 결과가 나올 자리라는 신호 */
#read .rd-stage.glint{animation:rdGlint 1.4s ease .1s 1}
@keyframes rdGlint{
  0%{box-shadow:0 0 0 0 rgba(156,203,255,0)}
  40%{box-shadow:0 0 0 3px rgba(156,203,255,.9),0 0 40px 8px rgba(247,198,228,.55),0 0 80px 20px rgba(191,240,221,.45)}
  100%{box-shadow:0 0 0 0 rgba(156,203,255,0)}
}

/* 교체 후 제목으로 포커스를 옮기지만(스크린리더용) 링은 그리지 않는다.
   판 전체가 바뀐 상황에서 제목에 뜬 사각형은 오독을 부른다. */
.pg h1[tabindex="-1"]:focus,.pg h2[tabindex="-1"]:focus,
.pg h1[tabindex="-1"]:focus-visible,.pg h2[tabindex="-1"]:focus-visible{outline:none}

/* 스크롤 힌트 — 판 하단에 다음 판이 있다는 신호 */
.pg-hint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:7; display:flex; align-items:center; gap:var(--sp-2);
  font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.16em;
  color:var(--ink-3); pointer-events:none; opacity:0; transition:opacity .5s ease;
}
.deck.hint-on .pg-hint{opacity:1}
.pg-hint i{display:block;width:1px;height:18px;background:currentColor;animation:hintDrop 1.9s ease-in-out infinite}
@keyframes hintDrop{0%,100%{transform:scaleY(.4);opacity:.35}50%{transform:scaleY(1);opacity:1}}
/* 끝에서 한 번 굴렸는데 아직 안 넘어간 상태(data-edge 2+) : '한 번 더 스크롤' 을 파랗게 두 번 깜빡여 알린다 */
.deck.hint-again .pg-hint{opacity:1;color:var(--cobalt-t);letter-spacing:.04em;font-family:var(--sans);font-size:var(--fs-2);font-weight:600;
  animation:hintAgain .5s ease-in-out 2}
@keyframes hintAgain{50%{opacity:.35;transform:translate(-50%,-4px)}}
@media(prefers-reduced-motion:reduce){.pg-hint i{animation:none}.deck.hint-again .pg-hint{animation:none}}

/* ── 터치 타깃 최소 크기 ──
   WCAG 2.5.8(AA)은 24px, 2.5.5(AAA)는 44px. 실제 조작 대상은 44px 로 맞추고,
   본문 흐름 속 인라인 링크는 예외 규정을 따라 24px 이상만 보장한다. */
@media (pointer:coarse),(max-width:760px){
  .prod-btn,.seg-b,.top-btn{min-height:44px;min-width:44px}
  .prod-btn,.seg-b{padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
  .top-btn{width:44px;height:44px}
  .logo{display:inline-flex;align-items:center;min-height:44px}
  .nav-menu a,.foot-col a,.foot-bottom a{display:inline-block;padding:var(--sp-2) 0;min-height:24px}
}

/* 모바일에서 굵기를 더 올리던 보정(300/350/400)은 없앤다.
   가는 획(250)이 작은 크기에서 사라지는 걸 막으려던 장치였는데, 600 은 이미 충분하다.
   자간은 원래 값 그대로 — 작은 화면에서는 한 단계 더 조인다. */
@media(max-width:760px){
  :root{ --ls-d1:-.028em; --ls-d2:-.024em; --ls-d3:-.02em; }
}
@media(max-width:900px){
  :root{ --sb-active:42px; --sb-fold:24px; }
  .stack-item{padding-top:var(--sp-6);padding-bottom:var(--sp-8)}
  .sb.is-active .sb-title{font-size:var(--fs-4)}
}
@media(max-width:600px){
  /* 세로가 더 빡빡하다 — 읽히는 타이틀을 2개로 줄인다 */
  :root{ --sb-keep:1; --sb-active:40px; --sb-fold:22px; }
}