/* ============================================================================
   TanQuant 라이트 토큰 — 모바일 우선 재설계 전용 (2026-08-13)
   ----------------------------------------------------------------------------
   ★기존 design-tokens.css(다크)는 건드리지 않는다. 이 파일은 새 모바일 흐름
     (start.html 등)만 쓰는 별도 세트다. 두 세트가 한 페이지에 같이 로드돼도
     변수명이 --tql-* 로 분리돼 있어 충돌하지 않는다.
   ★행동색은 하나(--tql-action)다. 상승/하락(--tql-up/--tql-down)은 손익 전용이며
     버튼·링크·선택 표시에 쓰지 마라.
   ★그림자를 쓰지 않는다. 위계는 면·선·여백·타이포로만 만든다.
   ============================================================================ */
/* 2026-08-15 UIUX 검수 반영: 주의 색 토큰 (주황) — 하드코딩 금지 계약 유지용 */
:root{--tql-warn:#B45309;--tql-warn-weak:#FFF6E5;
  /* 다크 리플레이 표면 위 UI(복수 종목 세그먼트 등) — 모듈 다크 차트 영역 전용 */
  --tql-rp-accent:#e8b339; --tql-rp-on-accent:#11151d; --tql-rp-ink:#c3c7d1; --tql-rp-line:rgba(255,255,255,.22);
  /* 행동 — 화면에 강조는 하나뿐 */
  --tql-action:#0064FF;
  --tql-action-press:#0050CC;
  --tql-action-weak:#E8F0FF;

  /* 표면 */
  --tql-bg:#F5F6F8;          /* 페이지 바탕 */
  --tql-bg-deep:#EDEFF2;     /* 데스크톱 여백 */
  --tql-card:#FFFFFF;        /* 카드 */
  --tql-card-sub:#F5F6F8;    /* 카드 안 한 겹 */
  --tql-invert:#191F28;      /* 반전 블록(다음 단계 안내) */

  /* 글자 */
  --tql-ink:#191F28;         /* 본문·제목 */
  --tql-ink-2:#4E5968;       /* 설명 본문 */
  --tql-ink-sub:#6B7684;     /* 보조 */
  --tql-ink-faint:#8B95A1;   /* 라벨·각주 */

  /* 선 */
  --tql-line:#F0F1F3;        /* 카드 안 구분선 */
  --tql-line-2:#E4E7EB;      /* 입력칸·테두리 */
  --tql-line-3:#EAECEF;      /* 눌린 면·토글 트랙 */
  --tql-arrow:#C3C8D0;       /* 목록 화살표 */
  --tql-white:#FFFFFF;
  --tql-ink-on-invert:#A5ADBA;/* 반전 블록 안 보조 글자 */
  --tql-bolt:#f7c948;        /* ★브랜드 번개 — bottomnav.js 의 실제 마크와 같은 색 */
  --tql-hh:#C77700;          /* HH 채널 — turtle_backtest 의 주황 계열을 라이트로 */
  --tql-ll:#6B4EDB;          /* LL 채널 — 같은 화면의 보라 계열 */
  --tql-disabled:#D5D9DF;

  /* 손익 (의미 고정) */
  --tql-up:#0F9D63;
  --tql-down:#C8323F;
  --tql-down-weak:#FBE9EA;
  --tql-up-weak:#E6F6EE;     /* 상승 옅은 배경 — down-weak 와 같은 밝기 관계 */

  /* 글꼴 */
  --tql-font:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --tql-mono:ui-monospace,'SF Mono','Roboto Mono',Consolas,monospace;

  /* 타입 — 본문 하한 15px · 입력 16px 고정 */
  --tql-fs-h1:29px;
  --tql-fs-h2:25px;
  --tql-fs-num:34px;
  --tql-fs-lead:19px;
  --tql-fs-lg:17px;
  --tql-fs-body:16px;
  --tql-fs-md:15px;          /* 본문 하한 */
  --tql-fs-sm:13.5px;
  --tql-fs-xs:12.5px;        /* 각주 하한 */
  --tql-fs-input:16px;       /* ★모바일 자동 확대 방지 */

  /* 간격 · 모서리 */
  --tql-gut:20px;            /* 좌우 여백 */
  --tql-r:16px;              /* 카드 */
  --tql-r-sm:12px;
  --tql-r-pill:999px;

  /* 규격 */
  --tql-cta:56px;            /* 주요 버튼 높이 */
  --tql-touch:44px;          /* 터치 최소 */
  --tql-col:430px;           /* 모바일 열 최대 폭 */
}

/* ── 기본 리셋 ─────────────────────────────────────────────────────────── */
.tql *{box-sizing:border-box}
.tql{margin:0;background:var(--tql-bg-deep);font-family:var(--tql-font);color:var(--tql-ink);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.tql a{color:var(--tql-action);text-decoration:none}
.tql a:hover{color:var(--tql-action-press)}
.tql button{font-family:inherit}
.tql input,.tql select,.tql textarea{font-family:inherit;font-size:var(--tql-fs-input)}
.tql h1,.tql h2,.tql h3,.tql p{margin:0}

/* ── 열 ────────────────────────────────────────────────────────────────── */
.tql-wrap{min-height:100vh;display:flex;justify-content:center}
.tql-col{width:100%;max-width:var(--tql-col);min-height:100vh;background:var(--tql-bg);
  display:flex;flex-direction:column;position:relative}

/* ── 카드 ──────────────────────────────────────────────────────────────── */
.tql-card{background:var(--tql-card);border-radius:var(--tql-r)}
.tql-card--pad{padding:20px}

/* ── 버튼 ──────────────────────────────────────────────────────────────── */
.tql-cta{width:100%;height:var(--tql-cta);border:none;border-radius:14px;
  background:var(--tql-action);color:#fff;font-size:var(--tql-fs-lg);font-weight:700;
  letter-spacing:-.4px;cursor:pointer;transition:transform .12s}
.tql-cta:active{transform:scale(.97)}
.tql-cta[disabled]{background:var(--tql-disabled);cursor:not-allowed;transform:none}
.tql-ghost{height:52px;display:flex;align-items:center;justify-content:center;
  background:var(--tql-card);border:none;border-radius:14px;font-size:var(--tql-fs-md);
  font-weight:700;color:var(--tql-ink-2);letter-spacing:-.35px;cursor:pointer}
.tql-icon{width:var(--tql-touch);height:var(--tql-touch);border:none;background:none;
  color:var(--tql-ink);font-size:22px;cursor:pointer;border-radius:var(--tql-r-sm)}
.tql-icon:active{background:#EAECEF}

/* ── 선택 카드 ─────────────────────────────────────────────────────────── */
.tql-pick{width:100%;display:block;text-align:left;background:var(--tql-card);
  border:2px solid var(--tql-card);border-radius:var(--tql-r);padding:16px;cursor:pointer;
  min-height:var(--tql-cta)}
.tql-pick[aria-pressed="true"]{border-color:var(--tql-action)}
.tql-chip{height:40px;padding:0 14px;border-radius:var(--tql-r-pill);
  border:1px solid var(--tql-line-2);background:var(--tql-card);color:var(--tql-ink-2);
  font-size:14.5px;font-weight:700;cursor:pointer;letter-spacing:-.25px}
.tql-chip[aria-pressed="true"]{border-color:var(--tql-action);background:var(--tql-action-weak);
  color:var(--tql-action)}

/* ── 숫자 ──────────────────────────────────────────────────────────────── */
.tql-num{font-variant-numeric:tabular-nums;letter-spacing:-.6px;font-weight:700}
.tql-up{color:var(--tql-up)}
.tql-down{color:var(--tql-down)}

/* ── 안전영역 ──────────────────────────────────────────────────────────── */
.tql-safe{padding-bottom:calc(16px + env(safe-area-inset-bottom))}

@media (prefers-reduced-motion: reduce){
  .tql *{animation:none!important;transition:none!important}
}

/* ★quant-metrics·bias-guard·story-teller 는 --tq-* 다크 팔레트로 그려진다.
   모듈 코드를 고치는 대신 그 26개 토큰만 라이트 값으로 재정의해 같은 코드를 흰 배경에서 쓴다.
   SVG 색은 모듈의 tok() 이 :root 에서 읽으므로 반드시 :root 에 둔다(.tql 스코프면 차트만 어두워진다). */
:root{
  --tq-panel:#FFFFFF;--tq-panel-2:#F7F8FA;--tq-panel-3:#F0F2F5;--tq-panel-deep:#FFFFFF;
  --tq-surface:#FFFFFF;--tq-border:#E9ECEF;--tq-line:#EEF0F3;--tq-line-2:#E4E7EB;
  --tq-ink:#191F28;--tq-ink-2:#333D4B;--tq-ink-3:#4E5968;--tq-ink-4:#6B7684;
  --tq-body:#404A57;--tq-mut:#6B7684;--tq-mut-3:#8B95A1;--tq-mut-soft:#8B95A1;--tq-mut-deep:#8B95A1;
  --tq-text-mut:#6B7684;--tq-accent:#0064FF;--tq-up:#0F8A4F;--tq-down:#D93B4A;--tq-warn:#B26B00;
  --tq-info-ink:#0052CC;--tq-candle-up:#0F8A4F;--tq-candle-dn:#D93B4A;--tq-r-sm:10px;
}

/* ══════════ 설정 · 탭 · 차트 (2026-08-14) ══════════
   ★모두 위 토큰만 쓴다. 새 hex 를 여기 적지 마라(design_lint 규칙②). */
/* 설정 방식 카드 */
.mode{display:grid;gap:10px;margin-bottom:14px}
.mode>button{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  min-height:var(--tql-touch);padding:16px;border:1.5px solid var(--tql-line-2);border-radius:var(--tql-r);
  background:var(--tql-card);font:inherit;color:var(--tql-ink);cursor:pointer}
.mode>button[aria-pressed="true"]{border-color:var(--tql-action);background:var(--tql-action-weak)}
.mode .mk{flex:0 0 22px;height:22px;border-radius:var(--tql-r-pill);border:1.5px solid var(--tql-arrow);
  display:grid;place-items:center;margin-top:2px}
.mode>button[aria-pressed="true"] .mk{border-color:var(--tql-action);background:var(--tql-action)}
.mode .mk i{width:8px;height:8px;border-radius:var(--tql-r-pill);background:var(--tql-white);display:none}
.mode>button[aria-pressed="true"] .mk i{display:block}
/* ★span 이라 display 를 주지 않으면 제목과 설명이 한 줄로 붙는다(실측) */
.mode .mt{display:block;font-size:var(--tql-fs-lg);font-weight:700;letter-spacing:-.4px;margin-bottom:3px}
.mode .md{display:block;font-size:var(--tql-fs-sm);color:var(--tql-ink-sub);line-height:1.5}
.grpbtn .gn,.grpbtn .gd{display:block}
/* 설정 요약 줄 */
.setrow{display:flex;align-items:center;gap:10px;padding:13px 0;border-top:1px solid var(--tql-line)}
.setrow:first-child{border-top:0}
.setrow .k{flex:0 0 40%;font-size:var(--tql-fs-md);color:var(--tql-ink-sub)}
.setrow .v{flex:1;font-size:var(--tql-fs-md);font-weight:600;color:var(--tql-ink);
  font-variant-numeric:tabular-nums;word-break:keep-all}
.setrow .ch{flex:0 0 auto;min-height:36px;padding:0 12px;border:1px solid var(--tql-line-2);
  border-radius:var(--tql-r-pill);background:var(--tql-card);color:var(--tql-action);
  font:inherit;font-size:var(--tql-fs-sm);font-weight:600;cursor:pointer}
.grpbtn{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:14px 16px;
  border:1px solid var(--tql-line-2);border-radius:var(--tql-r);background:var(--tql-card);
  font:inherit;color:var(--tql-ink);text-align:left;cursor:pointer;margin-bottom:10px}
.grpbtn .gt{flex:1}
.grpbtn .gn{display:block;font-size:var(--tql-fs-lg);font-weight:700;letter-spacing:-.4px}
.grpbtn .gd{display:block;font-size:var(--tql-fs-sm);color:var(--tql-ink-sub);margin-top:3px}
.grpbtn .ar{color:var(--tql-arrow);font-size:20px}
/* 바텀시트 */
.sheet{position:fixed;inset:0;z-index:60;background:var(--tql-card);display:flex;flex-direction:column;
  max-width:var(--tql-col);margin:0 auto;box-shadow:0 0 0 100vmax color-mix(in srgb,var(--tql-invert) 28%,transparent)}
@media(min-width:860px){.sheet{inset:0 0 0 auto;max-width:460px;margin:0}}
.sheet .sh{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--tql-line);
  position:sticky;top:0;background:var(--tql-card);z-index:2}
.sheet .sh b{flex:1;font-size:var(--tql-fs-lg);letter-spacing:-.4px}
.sheet .sb{flex:1;overflow-y:auto;padding:16px var(--tql-gut) 96px;-webkit-overflow-scrolling:touch}
.sheet .sf{position:sticky;bottom:0;padding:12px var(--tql-gut) calc(12px + env(safe-area-inset-bottom));
  background:var(--tql-card);border-top:1px solid var(--tql-line)}
.fld{margin-bottom:18px}
.fld>label{display:block;font-size:var(--tql-fs-md);font-weight:600;color:var(--tql-ink);margin-bottom:6px}
.fld .hint{font-size:var(--tql-fs-sm);color:var(--tql-ink-sub);line-height:1.5;margin-bottom:8px}
.fld input[type=text],.fld input[type=date],.fld input[type=number]{width:100%;min-height:var(--tql-touch);
  padding:10px 12px;border:1px solid var(--tql-line-2);border-radius:var(--tql-r-sm);background:var(--tql-card);
  font:inherit;font-size:var(--tql-fs-input);color:var(--tql-ink);font-variant-numeric:tabular-nums}
.fld input:focus{outline:2px solid var(--tql-action);outline-offset:-1px;border-color:var(--tql-action)}
.unit{display:flex;align-items:center;gap:8px}
.unit input{flex:1}
.unit .u{font-size:var(--tql-fs-md);color:var(--tql-ink-sub);flex:0 0 auto}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1 1 auto;min-width:64px;min-height:var(--tql-touch);padding:0 10px;
  border:1px solid var(--tql-line-2);border-radius:var(--tql-r-sm);background:var(--tql-card);
  font:inherit;font-size:var(--tql-fs-md);font-weight:600;color:var(--tql-ink-sub);cursor:pointer;
  font-variant-numeric:tabular-nums}
.seg button[aria-pressed="true"]{border-color:var(--tql-action);background:var(--tql-action-weak);color:var(--tql-action)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fixnote{padding:12px 14px;border-radius:var(--tql-r-sm);background:var(--tql-card-sub);
  font-size:var(--tql-fs-sm);color:var(--tql-ink-sub);line-height:1.55}
/* 최적화 */
.optbar{height:8px;border-radius:var(--tql-r-pill);background:var(--tql-line-3);overflow:hidden;margin:10px 0 6px}
.optbar i{display:block;height:100%;background:var(--tql-action);transition:width .2s}
.optrow{display:flex;gap:10px;align-items:center;width:100%;padding:13px 12px;text-align:left;
  border:1.5px solid var(--tql-line-2);border-radius:var(--tql-r-sm);background:var(--tql-card);
  font:inherit;color:var(--tql-ink);cursor:pointer;margin-bottom:8px}
.optrow[aria-pressed="true"]{border-color:var(--tql-action);background:var(--tql-action-weak)}
.optrow .on{flex:0 0 26px;height:26px;border-radius:var(--tql-r-pill);background:var(--tql-card-sub);
  display:grid;place-items:center;font-size:var(--tql-fs-sm);font-weight:700;color:var(--tql-ink-sub)}
.optrow .oc{flex:1;min-width:0}
.optrow .o1{font-size:var(--tql-fs-md);font-weight:700;font-variant-numeric:tabular-nums}
.optrow .o2{font-size:var(--tql-fs-xs);color:var(--tql-ink-sub);margin-top:2px;font-variant-numeric:tabular-nums}
/* 결과 탭 */
.tabs{display:flex;gap:4px;padding:0 var(--tql-gut) 10px;position:sticky;top:52px;z-index:4;
  background:var(--tql-bg);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;min-height:var(--tql-touch);padding:0 15px;border:0;border-radius:var(--tql-r-pill);
  background:var(--tql-line-3);font:inherit;font-size:var(--tql-fs-md);font-weight:600;
  color:var(--tql-ink-sub);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--tql-ink);color:var(--tql-white)}
/* TradingView 차트 상자 */
.tvbox{position:relative;background:var(--tql-card);border-radius:var(--tql-r-sm);overflow:hidden}
.tvbox .tvc{width:100%}
.tvbox .tvlab{position:absolute;left:10px;top:8px;z-index:2;font-size:var(--tql-fs-xs);
  color:var(--tql-ink-faint);pointer-events:none;font-variant-numeric:tabular-nums}
.tvbox .tvtip{position:absolute;right:8px;top:8px;z-index:3;padding:7px 9px;border-radius:var(--tql-r-sm);
  background:var(--tql-card);border:1px solid var(--tql-line-2);font-size:var(--tql-fs-xs);
  line-height:1.5;color:var(--tql-ink);pointer-events:none;font-variant-numeric:tabular-nums;
  white-space:pre;box-shadow:0 2px 8px color-mix(in srgb,var(--tql-invert) 6%,transparent)}
.tvfollow{position:absolute;right:8px;bottom:8px;z-index:3;min-height:36px;padding:0 12px;
  border:1px solid var(--tql-action);border-radius:var(--tql-r-pill);background:var(--tql-card);
  color:var(--tql-action);font:inherit;font-size:var(--tql-fs-sm);font-weight:600;cursor:pointer}
.chartbar{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.chartbar button{min-height:36px;padding:0 11px;border:1px solid var(--tql-line-2);border-radius:var(--tql-r-pill);
  background:var(--tql-card);font:inherit;font-size:var(--tql-fs-sm);color:var(--tql-ink-sub);cursor:pointer}
.chartbar button[aria-pressed="true"]{border-color:var(--tql-action);color:var(--tql-action);background:var(--tql-action-weak)}
/* 데스크톱 2열 — 모바일은 절대 이 규칙을 타지 않는다 */
@media(min-width:1024px){
  .dk{display:grid;grid-template-columns:340px minmax(0,1fr);gap:24px;align-items:start;
    max-width:1180px;margin:0 auto;padding:0 24px}
  .dk .dkside{position:sticky;top:16px;background:var(--tql-card);border-radius:var(--tql-r);padding:18px}
  .dk .dkmain{min-width:0}
}

/* 탭에 해당 섹션이 없으면 빈 카드를 감춘다 */
.tql-card.acc:empty{display:none}
/* 데스크톱 — 왼쪽 고정 설정 패널 + 오른쪽 결과. 모바일은 이 규칙을 타지 않는다. */
.dkfix{display:none}
@media(min-width:1024px){
  body.tql.dk-on .tql-wrap{padding-left:352px}
  .dkfix{display:block;position:fixed;left:24px;top:24px;bottom:24px;width:304px;z-index:20;
    background:var(--tql-card);border-radius:var(--tql-r);padding:18px;overflow-y:auto}
  .dkfix h4{margin:0 0 4px;font-size:var(--tql-fs-lg);letter-spacing:-.4px}
  .dkfix .dsub{font-size:var(--tql-fs-sm);color:var(--tql-ink-sub);margin-bottom:12px}
  .dkfix .setrow .k{flex:0 0 44%}
}

/* ★한글은 아무 데서나 줄이 바뀐다 — 낱말이 쪼개지면 안 되는 줄에만 건다 */
.rp-note{word-break:keep-all;line-height:1.5}

/* ★차트 계열색 — 흰 배경에서 읽히는 값으로 재정의한다(다크 원본은 밝은 네온이라 흰 배경에서 사라진다).
   모듈(quant-metrics·turtle-multi)의 tok() 이 :root 에서 읽으므로 반드시 :root 에 둔다. */
:root{
  --tq-text:#191F28;
  --tq-chart-grid:#E5E7EB;
  --tq-lev-1:#1F6FEB;--tq-lev-half:#0F8A4F;--tq-lev-cur:#6B4EDB;
  --tq-lev-peak:#A9700B;--tq-lev-over:#C2410C;--tq-lev-dead:#D93B4A;
  --tq-cmp-1:#1F6FEB;--tq-cmp-2:#0F8A4F;--tq-cmp-3:#6B4EDB;--tq-cmp-4:#A9700B;--tq-cmp-5:#C2410C;
  --tq-crisis:#B26B00;
}

/* ★커뮤니티·법무·전략상세 계열(--tq-*-alt) 라이트 통일 — 2026-08-20 v5.2 P1.
   community.html / community_post.html / community_write.html / strategy_detail.html 는
   이미 :root 에서 --tq-*-alt 를 참조하고 있었다. 그래서 페이지 CSS를 덮어쓰지 않고
   토큰 값만 라이트로 바꾼다. 다크 원본(design-tokens.css)은 건드리지 않는다. */
:root{
  --tq-bg-alt:#F5F6F8;
  --tq-surface-alt:#FFFFFF;
  --tq-surface-alt-2:#F5F6F8;
  --tq-text-alt:#191F28;
  --tq-text-mut-alt:#6B7684;
  --tq-text-faint-alt:#8B95A1;
  --tq-border-2:#D5D9DF;
  --tq-text-faint:#8B95A1;
  --tq-surface-2:#F5F6F8;
  --tq-pos:#0F9D63;
  --tq-neg:#C8323F;
  --tq-accent-2:#0050CC;
  --tq-accent-deep:#E8F0FF;
  --tq-accent-glow:rgba(0,100,255,.18);
  --tq-accent-glow-2:rgba(0,100,255,.24);
}

/* ★언어 선택기 라이트 — 흰 배경에 다크 알약이 뜨던 문제(390px 실측)를 토큰에서 끝낸다.
   i18n.js 는 --tq-lang-* 를 읽기만 하므로 모듈을 다시 고칠 필요가 없다. */
:root{
  --tq-lang-bg:rgba(255,255,255,.96);
  --tq-lang-ink:#191F28;
  --tq-lang-item:#191F28;
  --tq-lang-mut:#8B95A1;
  --tq-lang-line:#D5D9DF;
  --tq-lang-line-2:#E5E8EB;
  --tq-lang-pop:#FFFFFF;
  --tq-lang-hover:#F2F4F6;
  --tq-lang-shadow:rgba(25,31,40,.10);
  --tq-lang-pop-shadow:rgba(25,31,40,.14);
}

/* ★랜딩 2종·텔레그램 시뮬레이터 2종 라이트화(2026-08-20 v5.2 P0 후속, 사장님 결정)에 필요한 계열.
   네 페이지 모두 자기 :root 에서 이 토큰들을 참조하고 있어 값만 라이트로 주면 따라온다. */
:root{
  --tq-bg:#F5F6F8;
  --tq-ctv-accent:#0F9D63;
  --tq-ctv-surface:#FFFFFF;
  --tq-ctv-text:#191F28;
  --tq-ctv-text-mut:#6B7684;
  --tq-ctv-text-mut-2:#8B95A1;
}

/* ★2026-08-20: 통합 리플레이의 구버전 다크 토큰(--tql-rp-*) 은퇴.
   원래 값은 금색 알약 + 흰 반투명 테두리 + 연회색 글자로, 흰 배경에서는 테두리와 글자가 사라진다.
   세그먼트 버튼은 start.html 원본에서 라이트 토큰을 직접 쓰도록 고쳤고, 이 값들은
   혹시 남아 있는 참조가 검게 뜨지 않도록 라이트로 재정의만 해 둔다. 새로 쓰지 마라. */
:root{
  --tql-rp-accent:#0064FF;
  --tql-rp-on-accent:#FFFFFF;
  --tql-rp-ink:#191F28;
  --tql-rp-line:#D5D9DF;
}