/* ============================================================
   goyon.css — GOYON 브랜드 팔레트 레이어 (P0)
   로드 순서: JNC DS → alphakin-tokens.css → alphakin.css → goyon.css(최후 승자)
   원칙: 구조·모션·간격은 shared(알파킨 시스템) 그대로, "색·보이스"만 GOYON.
   팔레트 기원: portal/web-goyon/index.html — night/sun/paper 웜톤.
   ============================================================ */
:root {
  /* GOYON 브랜드 원색 */
  --gy-night:  #1F1812;   /* 잉크/헤더 — 깊은 밤 */
  --gy-night2: #2A2018;
  --gy-sun:    #E08A2E;   /* 액션/강조 — 노을 태양 */
  --gy-sun-hi: #F3B86B;
  --gy-paper:  #FBF4E9;   /* 바탕 — 따뜻한 종이 */
  --gy-paper2: #FCEFDD;
  --gy-ember:  #8A4A12;   /* 보조 텍스트 강조 */

  /* 알파킨 토큰층 리맵 — 액센트·잉크·캔버스만 GOYON 으로 정박 */
  --ak-sunset: var(--gy-sun);
  --ak-ink:    var(--gy-night2);
  --ak-canvas: var(--gy-paper);
  --ak-paper:  var(--gy-paper);
  --ak-gold:   var(--gy-sun-hi);

  --bg-radial: linear-gradient(180deg, #FFF7EC 0%, var(--gy-paper2) 56%, var(--gy-paper) 100%);
}

/* 다크 테마 승계 — themes.css 가 role 을 덮은 뒤에도 GOYON 액센트 유지 */
[data-theme="dark"] {
  --gy-paper:  #171310;
  --gy-paper2: #1F1812;
  --ak-canvas: var(--gy-paper);
  --ak-paper:  var(--gy-paper);
  --bg-radial: linear-gradient(180deg, #201913 0%, #1B1511 56%, var(--gy-paper) 100%);
}

/* GOYON 워드마크 */
.gy-wordmark { font: 800 20px/1 var(--font-sans); letter-spacing: -0.03em; color: var(--gy-night2); }
.gy-tagline  { font: 700 11.5px/1.4 var(--font-sans); color: var(--gy-ember); }

/* ── 모션 시스템 (알파킨 곡선 준수: cubic-bezier(.2,.8,.2,1) 180~260ms) ── */
@keyframes gy-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gy-screen { animation: gy-fade-in .18s cubic-bezier(.2,.8,.2,1); }

/* 시트: 마운트 시 translateY(100%) → .gy-open 부여로 슬라이드 업 */
.gy-sheet { transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.gy-sheet.gy-open { transform: translateY(0); }
.gy-dim { opacity: 0; transition: opacity .18s ease; }
.gy-dim.gy-open { opacity: 1; }

/* 가로 스크롤 엣지 페이드 — "더 있음" 어포던스 (EdgeFadeRow 규칙의 경량판) */
.gy-hrow { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent);
           mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent); }

/* 스켈레톤 로딩 — 텍스트 대신 구조를 먼저 보여준다 */
@keyframes gy-shimmer { 0% { background-position: -320px 0; } 100% { background-position: 320px 0; } }
.gy-skel { border-radius: 10px; background: rgba(42,32,24,.08); position: relative; overflow: hidden; }
.gy-skel::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  background-size: 320px 100%; animation: gy-shimmer 1.15s infinite linear; }
[data-theme="dark"] .gy-skel { background: rgba(251,244,233,.09); }
[data-theme="dark"] .gy-skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); background-size: 320px 100%; }

/* 다크 모드 텍스트 보정 — 인라인 rgba(42,32,24,…) 잉크 대신 종이색으로 */
[data-theme="dark"] .gy-wordmark { color: var(--gy-paper2, #F3EADF); }

/* ════════════════════════════════════════════════════════════
   디자인 시스템 v2 — 2026 핀테크 트렌드 반영
   (레이어드 서피스 · 글래스 크롬 · 프레스 마이크로 인터랙션 · 히어로 타이포)
   ════════════════════════════════════════════════════════════ */
:root {
  --gy-grad: linear-gradient(135deg, #F3B86B 0%, #E08A2E 55%, #C96F1E 100%);
  --gy-card-bg: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,251,244,.62));
  --gy-card-line: rgba(42,32,24,.09);
  --gy-shadow-1: 0 1px 2px rgba(31,24,18,.05), 0 4px 14px rgba(31,24,18,.05);
  --gy-shadow-2: 0 2px 6px rgba(31,24,18,.08), 0 12px 32px rgba(31,24,18,.10);
  --gy-glass: rgba(251,244,233,.82);
  /* 인라인 카드류(스트립 칩·타일)도 일괄 승격 — 기존 var 참조 지점 전부에 적용됨 */
  --ak-card: var(--gy-card-bg);
  --ak-card-border: var(--gy-card-line);
}
[data-theme="dark"] {
  --gy-card-bg: linear-gradient(180deg, rgba(46,37,28,.85), rgba(36,28,21,.75));
  --gy-card-line: rgba(243,184,107,.10);
  --gy-shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.3);
  --gy-shadow-2: 0 2px 8px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.4);
  --gy-glass: rgba(23,19,16,.82);
}

/* 프레스 마이크로 인터랙션 — 모든 탭 가능한 것이 눌린다는 감각(햅틱과 짝) */
button, .gy-press { transition: transform .13s cubic-bezier(.2,.8,.2,1), opacity .13s ease; }
button:active, .gy-press:active { transform: scale(.96); }

/* 레이어드 카드 — 평면 베이지 → 은은한 그라디언트 서피스 + 이중 그림자 */
.gy-card { background: var(--gy-card-bg); border: 1px solid var(--gy-card-line);
  border-radius: 16px; box-shadow: var(--gy-shadow-1);
  transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease; }
.gy-card[data-tap="1"]:active { transform: scale(.985); box-shadow: var(--gy-shadow-2); }

/* 히어로 숫자 — 가격/성과의 타이포 무게 대비 */
.gy-hero-num { font: 800 26px/1.05 var(--font-num); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--gy-night2); }
[data-theme="dark"] .gy-hero-num { color: #F6EDE1; }
.gy-glow { text-shadow: 0 0 18px rgba(224,138,46,.45); }

/* 글래스 크롬 — 헤더/탭바 (스크롤 콘텐츠가 밑으로 비침) */
.gy-header { position: sticky; top: 0; z-index: 120;
  background: var(--gy-glass); backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--gy-card-line); }
.gy-tabbar { background: var(--gy-glass) !important; backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.gy-tab-active { background: rgba(224,138,46,.13); border-radius: 13px; }

/* 시트 — 딤에 블러(글래스모피즘: 맥락 유지), 패널 라운드 확대 */
.gy-dim { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* 등락 pill — 상승/하락을 칩으로 (히어로 옆) */
.gy-chg-pill { display: inline-flex; align-items: baseline; gap: 3px; padding: 4px 10px;
  border-radius: 999px; font: 800 13px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.gy-chg-pill.up { background: rgba(214,56,46,.12); color: var(--rise); }
.gy-chg-pill.down { background: rgba(46,98,214,.12); color: var(--fall); }
.gy-chg-pill.flat { background: rgba(42,32,24,.07); color: rgba(42,32,24,.55); }

/* 모달 열림 동안 배경 스크롤 잠금 (SheetFrame 중첩 카운터와 짝) */
html.gy-lock, html.gy-lock body { overflow: hidden; }

/* 차트 지표 칩 줄 — 가로 스크롤(스크롤바 숨김) + 엣지 페이드는 gy-hrow 와 조합 */
.gy-chiprow { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.gy-chiprow::-webkit-scrollbar { display: none; }
.gy-chiprow > button { flex: 0 0 auto; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
   데스크톱 레이아웃 (≥1024px) — 하단 탭바 → 좌측 레일 (알파킨 데스크톱 관례)
   모바일(<1024px)은 무변형. 순수 CSS 전환이라 화면 코드 공유.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  #root { max-width: 1280px; }

  /* 탭바 → 고정 좌측 레일 */
  .gy-tabbar { position: fixed !important; left: max(0px, calc(50vw - 640px)); top: 0; bottom: 0;
    width: 196px; flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 86px 12px 16px !important; border-top: none !important;
    border-right: 1px solid var(--gy-card-line); }
  .gy-tabbar button { flex: 0 0 auto !important; flex-direction: row !important; justify-content: flex-start;
    gap: 11px; padding: 12px 14px !important; font-size: 13.5px !important; border-radius: 12px; }
  .gy-tab-active { border-radius: 12px; }

  /* 콘텐츠·헤더는 레일 폭만큼 오프셋 + 읽기 폭 제한 */
  .gy-header { margin-left: 196px; padding-left: 28px !important; }
  #root > div > main { margin-left: 196px; padding-left: 28px !important; padding-right: 28px !important; }
  #root > div > main > div { max-width: 860px; }

  /* 시트: 데스크톱에선 중앙 다이얼로그 느낌(하단 고정 유지 + 큰 라운드) */
  .gy-sheet { border-radius: 22px 22px 0 0; }
}

/* 호버 상태 (포인터 기기 전용 — 터치에선 무효) */
@media (hover: hover) {
  .gy-card[data-tap="1"]:hover { box-shadow: var(--gy-shadow-2); transform: translateY(-1px); }
  .gy-press:hover { background: rgba(224,138,46,.05); border-radius: 10px; }
  .gy-tabbar button:hover { background: rgba(224,138,46,.08); }
}