/* CURRENT Q · unified reader system · 5.14.0 */
:root{--cq-ink:#132339;--cq-muted:#58697b;--cq-paper:#fff;--cq-bg:#f5f7fa;--cq-line:#dce3eb;--cq-navy:#0b1c33;--cq-blue:#275acb;--cq-teal:#116859;--cq-red:#ad4034;--cq-radius:16px;--cq-accent:#275acb}
html{scroll-padding-top:124px;scroll-behavior:smooth}
body.cq-v512{margin:0;background:var(--cq-bg);color:var(--cq-ink);font-size:18px;line-height:1.7;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
.cq-v512 *{box-sizing:border-box;min-width:0}
.cq-v512 .shell{max-width:none;background:transparent;box-shadow:none;min-height:100vh}
.cq-v512 a{text-decoration:none;color:inherit}
.cq-v512 button,.cq-v512 input,.cq-v512 select,.cq-v512 textarea{font:inherit}
.cq-v512 button{cursor:pointer}
.cq-v512 p{line-height:1.75}
.cq-v512 small,.cq-v512 .muted,.cq-v512 .kicker,.cq-v512 .pk,.cq-v512 .label,.cq-v512 .post-meta,.cq-v512 .post-badge,.cq-v512 .hero-meta span{font-size:16px}
.cq-v512 a:focus-visible,.cq-v512 button:focus-visible,.cq-v512 input:focus-visible,.cq-v512 textarea:focus-visible,.cq-v512 select:focus-visible{outline:3px solid #4581f1;outline-offset:4px}
.cq-v512 .skip-link:focus{position:fixed;top:8px;left:8px;padding:12px;background:white;z-index:300}
.cq-header{position:sticky;top:0;z-index:60;background:var(--cq-navy);color:#fff;border-bottom:1px solid var(--cq-line)}
.cq-masthead{max-width:1280px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:24px;min-height:64px}
.cq-brand{display:inline-flex;align-items:center;gap:11px;flex:none;white-space:nowrap}
.cq-brand img{width:34px;height:34px;display:block;object-fit:contain;flex:none}
.cq-brand strong{font-size:20px;line-height:1.1;letter-spacing:-.02em;font-weight:800;white-space:nowrap}
.cq-brand strong span{color:#77c5ea}
.cq-tagline{font-size:16px;line-height:1.3;letter-spacing:.065em;color:#becde1;padding-left:25px;border-left:1px solid #ffffff26}
.cq-tools{display:flex;gap:9px;margin-left:auto;align-items:center;flex:none}
.cq-tools button{display:flex;align-items:center;justify-content:center;gap:8px;color:#f2f6fc;background:transparent;border:1px solid #ffffff32;border-radius:8px;min-height:38px;padding:6px 12px;font-size:16px;font-weight:650;white-space:nowrap}
.cq-tools button:hover{background:#ffffff13;border-color:#fff}
.cq-tools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none}
.cq-tools .cq-login{background:#fff;color:var(--cq-navy);border-color:#fff}
.cq-tools .cq-login:hover{background:#dbeaff}
.cq-nav{display:flex;justify-content:center;gap:34px;padding:0 24px;background:#fff;color:#48596d}
.cq-nav a{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;font-size:16px;line-height:1.5;font-weight:700;white-space:nowrap}
.cq-nav a:hover{color:var(--cq-blue);background:#f6f9ff}
.cq-nav a[aria-current=page]{color:var(--cq-navy)}
.cq-nav a[aria-current=page]:after{content:"";height:3px;background:var(--cq-accent);position:absolute;bottom:0;left:10px;right:10px;border-radius:2px 2px 0 0}
.cq-v512[data-section=archive]{--cq-accent:#7154ad}
.cq-v512[data-section=score]{--cq-accent:#b4473e}
.cq-v512[data-section=data]{--cq-accent:#96650d}
.cq-v512[data-section=learn]{--cq-accent:#177565}
.cq-v512[data-section=board]{--cq-accent:#177084}
.cq-home{max-width:1280px;padding:0 28px 64px;margin:auto}
.cq-edition-line{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--cq-line);padding:24px 0 14px;font-size:16px;color:var(--cq-muted)}
.cq-edition-line>span:first-child{font-weight:750;letter-spacing:.09em;color:var(--cq-ink)}
.cq-home-lead{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px;padding:24px 0 32px;align-items:start}
.cq-lead-copy{padding:9px 0}
.cq-eyebrow{font-size:16px;line-height:1.5;letter-spacing:.09em;font-weight:750;color:var(--cq-muted)}
.cq-lead-copy>.cq-eyebrow{color:var(--cq-blue);letter-spacing:0}
.cq-lead-copy h1{font-size:clamp(30px,3.4vw,48px);line-height:1.23;letter-spacing:-.02em;margin:12px 0 16px;font-weight:800;color:#102039}
.cq-title-detail{display:block;margin-top:15px;font-size:.66em;line-height:1.48;font-weight:700;letter-spacing:-.02em}
.cq-home-deck{font-size:18px;color:#435367;margin:0 0 23px;line-height:1.85!important}
.cq-asof{font-size:16px;color:var(--cq-muted);padding-top:20px;border-top:1px solid var(--cq-line)}
.cq-asof time{margin-left:8px;font-variant-numeric:tabular-nums}
.cq-lead-actions{display:flex;align-items:center;gap:23px;margin-top:22px;flex-wrap:wrap}
.cq-button{display:inline-flex;align-items:center;justify-content:center;gap:26px;padding:12px 18px;font-size:18px;font-weight:750;border:1px solid transparent;border-radius:8px;min-height:48px}
.cq-button-primary{color:#fff!important;background:var(--cq-navy)}
.cq-button-primary:hover{background:#224778}
.cq-text-link{font-size:16px;color:var(--cq-muted)!important;font-weight:650;white-space:nowrap}
.cq-text-link:hover{color:var(--cq-blue)!important;text-decoration:underline}
.cq-market-board{margin:0;background:var(--cq-navy);border:1px solid #1c3654;border-radius:14px;overflow:hidden;color:#edf3fd;box-shadow:0 12px 35px #12264113}
.cq-board-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 25px;border-bottom:1px solid #ffffff20}
.cq-board-heading .cq-eyebrow{color:#a9c5e2;font-size:16px;letter-spacing:.075em}
.cq-board-heading h2{font-size:24px;line-height:1.35;margin:4px 0 0;color:#fff;letter-spacing:-.02em}
.cq-board-heading a{font-size:16px;color:#d7e9f9;white-space:nowrap;border-bottom:1px solid #aec7df70;padding:3px 0}
.cq-zone{padding:20px 25px;border-bottom:1px solid #ffffff20}
.cq-zone-title{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:16px;color:#dce7f6;line-height:1.5;margin-bottom:13px}
.cq-zone-title>span{font-weight:700}
.cq-zone-title small{font-size:16px;color:#9ab1cb;letter-spacing:.045em}
.cq-index-readings,.cq-vol-readings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cq-macro-readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cq-metric{min-width:0}
.cq-metric-name{display:block;font-size:16px;font-weight:650;color:#c8d7e9;margin-bottom:4px}
.cq-metric-reading{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;line-height:1.3}
.cq-metric-reading>strong{font-size:24px;line-height:1.4;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.cq-metric-primary .cq-metric-reading{display:block}
.cq-metric-primary .cq-metric-reading>strong{font-size:38px;line-height:1.2}
.cq-change{font-size:16px;font-weight:750;line-height:1.5;white-space:nowrap}
.cq-change.down{color:#96c7ff}
.cq-change.up{color:#ffa79f}
.cq-metric-primary .cq-change{display:table;margin-top:9px;border-radius:8px;padding:2px 8px;background:#ffffff0c}
.cq-metric>small{display:block;font-size:16px;color:#aebfd4;margin-top:8px;line-height:1.6;overflow-wrap:anywhere}
.cq-macro-readings .cq-metric-reading>strong{font-size:24px}
.cq-macro-readings .cq-change{display:block}
.cq-zone-vol{background:#10263f;border-bottom:0}
.cq-zone-vol .cq-metric-reading>strong{font-size:30px}
.cq-board-note{font-size:16px!important;line-height:1.65!important;margin:0;padding:14px 25px 19px;color:#adbed2;background:#10263f}
.cq-section-heading{margin:0 0 21px}
.cq-section-heading h2{font-size:30px;line-height:1.4;margin:5px 0 0;letter-spacing:-.02em;color:var(--cq-ink)}
.cq-heading-with-link{display:flex;align-items:end;justify-content:space-between;gap:20px}
.cq-brief{padding:28px 31px;border:1px solid var(--cq-line);border-top:3px solid var(--cq-blue);background:#fff;border-radius:0 0 14px 14px;margin:0 0 43px}
.cq-brief-row{display:grid;grid-template-columns:115px minmax(0,1fr);gap:23px;padding:17px 0;border-top:1px solid #e6ebf2}
.cq-brief-label{font-size:16px;color:var(--cq-blue);font-weight:750;padding-top:2px}
.cq-brief-row p{font-size:18px;margin:0;color:#35475d;line-height:1.8}
.cq-signals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cq-signal{padding:25px 28px;border:1px solid var(--cq-line);border-radius:var(--cq-radius);background:#fff}
.cq-signal.support{border-top:3px solid var(--cq-teal)}
.cq-signal.risk{border-top:3px solid var(--cq-red)}
.cq-signal-title{display:flex;align-items:center;gap:11px}
.cq-signal-title>span{width:28px;height:28px;border-radius:50%;background:#e5f0ed;color:var(--cq-teal);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
.risk .cq-signal-title>span{background:#faebe8;color:var(--cq-red)}
.cq-signal-title h3{font-size:20px;margin:0;line-height:1.4;font-weight:750}
.cq-signal ul{padding:0;margin:17px 0 0;list-style:none}
.cq-signal li{position:relative;font-size:18px;color:#445468;line-height:1.8;padding:0 0 0 16px;margin:10px 0}
.cq-signal li:before{content:"";width:4px;height:4px;border-radius:50%;position:absolute;left:0;top:14px;background:currentColor}
.cq-outlook-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:30px;margin:44px 0}
.cq-radar{border:1px solid var(--cq-line);border-radius:var(--cq-radius);background:#fff;overflow:hidden}
.cq-radar article{padding:23px 26px;border-bottom:1px solid var(--cq-line)}
.cq-radar article:last-child{border:0}
.cq-radar-title{display:flex;align-items:center;gap:13px;margin-bottom:17px}
.cq-radar-title>span{font-size:20px;font-weight:650;color:#7b8ca2;font-variant-numeric:tabular-nums}
.cq-radar-title h3{font-size:20px;line-height:1.45;margin:0;color:var(--cq-ink)}
.cq-radar-row{display:grid;grid-template-columns:83px minmax(0,1fr);gap:15px;margin-top:12px}
.cq-radar-row>span{font-size:16px;font-weight:650;padding-top:2px;color:var(--cq-teal)}
.cq-radar-row.risk>span{color:var(--cq-red)}
.cq-radar-row p{font-size:18px;margin:0;line-height:1.75;color:#45566c}
.cq-calendar{background:#ecf1f6;border:1px solid #d9e3ef;border-radius:14px;padding:27px;height:fit-content}
.cq-calendar ol{padding:0;margin:25px 0 0;list-style:none}
.cq-calendar li{display:flex;gap:16px;position:relative;padding:0 0 27px}
.cq-calendar li:last-child{padding-bottom:0}
.cq-calendar li:not(:last-child):before{content:"";position:absolute;left:4px;top:14px;bottom:0;width:1px;background:#c1cfdd}
.cq-calendar-mark{position:relative;width:9px;height:9px;border:2px solid #4c759c;border-radius:50%;background:#ecf1f6;margin-top:9px;flex:none}
.cq-calendar li div>span{font-size:16px;line-height:1.65;color:var(--cq-muted);display:block}
.cq-calendar li p{font-size:18px;font-weight:650;line-height:1.65;margin:6px 0 0}
.cq-archive-preview,.cq-learn-preview{border-top:1px solid var(--cq-line);padding-top:32px;margin-top:64px}
.cq-editorial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.cq-editorial-card{display:flex;flex-direction:column;align-items:start;border:1px solid var(--cq-line);border-radius:14px;background:#fff;padding:24px;transition:border-color .15s,box-shadow .15s}
.cq-editorial-card:hover{border-color:#8ba6c7;box-shadow:0 4px 16px #1735510f}
.cq-editorial-card>span{font-size:16px;color:var(--cq-muted)}
.cq-editorial-card h3{font-size:20px;line-height:1.55;letter-spacing:-.02em;margin:13px 0 10px}
.cq-editorial-card p{font-size:18px;color:#5b6b7d;margin:0 0 22px;line-height:1.75}
.cq-editorial-card>b{font-size:16px;margin-top:auto;color:var(--cq-blue)}
.cq-service-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--cq-line);border-radius:14px;margin-top:64px;background:#fff;overflow:hidden}
.cq-service-strip a{display:block;position:relative;padding:24px;border-right:1px solid var(--cq-line)}
.cq-service-strip a:last-child{border:0}
.cq-service-strip a>span{font-size:20px;font-weight:750}
.cq-service-strip a p{font-size:16px;margin:6px 20px 0 0;color:var(--cq-muted)}
.cq-service-strip a>b{position:absolute;right:23px;top:23px;font-size:20px;color:#71829a}
.cq-home-games{border:1px solid #dbe4f1;border-radius:14px;background:#f4f8ff;padding:32px 32px 24px;margin-top:64px}
.cq-home-games .cq-section-heading{margin-bottom:18px}
.cq-home-games .cq-editorial-card{background:#fff}
.cq-home-games-note{font-size:16px;line-height:1.7;color:var(--cq-muted);margin:18px 0 0}
/* Every route shares the same spacing, typography, and masthead. */
.cq-v512 .main{max-width:1280px;margin:auto;background:transparent}
.cq-v512 .section{padding:34px 28px}
.cq-v512 .section-head{margin-bottom:22px;gap:18px}
.cq-v512 .section-head h2{font-size:30px;line-height:1.4;letter-spacing:-.02em;margin:0 0 6px}
.cq-v512 .section-head p{font-size:18px;color:var(--cq-muted);line-height:1.75}
.cq-v512 .page-hero{max-width:1224px;margin:30px auto 0;border-radius:14px;background:#fff;color:var(--cq-ink);padding:36px 39px;border:1px solid var(--cq-line);border-top:4px solid var(--cq-accent)}
.cq-v512 .page-hero .kicker{color:var(--cq-accent);font-size:16px}
.cq-v512 .page-hero h1{font-size:38px;line-height:1.3;letter-spacing:-.02em;margin:9px 0 12px;color:var(--cq-ink)}
.cq-v512 .page-hero p{font-size:18px;line-height:1.75;color:var(--cq-muted);max-width:800px}
.cq-v512 .page-hero .hero-meta{margin-top:18px}
.cq-v512 .page-hero .hero-meta span{background:#f1f5f9;border-color:#dce5ee;color:#51647b}
.cq-v512 .btn{font-size:16px;line-height:1.6;padding:10px 16px;border-radius:8px;font-weight:700;min-height:44px;box-shadow:none}
.cq-v512 .btn.blue{background:var(--cq-navy);color:#fff;border:1px solid var(--cq-navy)}
.cq-v512 .btn.secondary,.cq-v512 .input{border:1px solid #cfd9e6;background:#fff;color:#40516a;border-radius:8px}
.cq-v512 .input{font-size:18px;min-height:46px;padding:10px 14px;max-width:100%}
.cq-v512 .trust-callout{border:1px solid var(--cq-line);border-left:3px solid var(--cq-accent);border-radius:8px;background:#fff;padding:24px}
.cq-v512 .trust-callout p{font-size:18px;color:var(--cq-muted)}
.cq-v512 .timeline-item{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:25px;padding:28px;border:1px solid var(--cq-line);border-radius:14px;background:#fff;margin-bottom:14px;align-items:start}
.cq-v512 .timeline-date{font-size:16px;color:var(--cq-muted)}
.cq-v512 .timeline-copy h3{font-size:20px;line-height:1.5;margin:0 0 9px}
.cq-v512 .timeline-copy p{font-size:18px;color:var(--cq-muted);margin:0}
.cq-v512 .archive-tools{display:flex;align-items:center;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.cq-v512 .archive-tools input{flex:1;min-width:200px}
.cq-v512 .archive-count{font-size:16px;color:var(--cq-muted)}
.cq-v512 [data-cq-hidden="1"]{display:none!important}
.cq-v512 .chip{font-size:16px;min-height:44px;border-radius:8px;padding:8px 13px;background:#fff;border:1px solid var(--cq-line);color:#53667d}
.cq-v512 .chip.on{background:var(--cq-navy);color:#fff;border-color:var(--cq-navy)}
.cq-v512 .stats,.cq-v512 .latest-grid{gap:16px}
.cq-v512 .stats>div{background:#fff;border:1px solid var(--cq-line);border-radius:8px;padding:20px}
.cq-v512 .stats b{font-size:30px;color:var(--cq-ink)}
.cq-v512 .stats span{font-size:16px}
.cq-v512 .latest-metric{border:1px solid var(--cq-line);border-top:3px solid var(--cq-accent);background:#fff;border-radius:8px;padding:22px}
.cq-v512 .latest-metric>span,.cq-v512 .latest-metric em,.cq-v512 .latest-metric small{display:block;font-size:16px;line-height:1.6;color:var(--cq-muted);font-style:normal}
.cq-v512 .latest-metric>b{display:block;font-size:30px;color:var(--cq-ink);font-variant-numeric:tabular-nums;margin:8px 0}
.cq-v512 .raw-details{padding:22px;border:1px solid var(--cq-line);background:#fff;border-radius:14px}
.cq-v512 .raw-details summary{font-weight:750;cursor:pointer}
.cq-v512 .table-wrap{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain}
.cq-v512 table{font-size:16px;width:100%;border-collapse:collapse}
.cq-v512 th,.cq-v512 td{font-size:16px;line-height:1.65;padding:13px 15px;text-align:left;border-bottom:1px solid var(--cq-line)}
.cq-v512 .lesson-card,.cq-v512 .track,.cq-v512 .g,.cq-v512 #catalog article,.cq-v512 #start>a{background:#fff;border:1px solid var(--cq-line);border-radius:14px;padding:24px}
.cq-v512 .lesson-card b,.cq-v512 #start b{font-size:20px;line-height:1.5;margin:10px 0;display:block}
.cq-v512 .lesson-card span,.cq-v512 #start span,.cq-v512 .g span{font-size:16px;color:var(--cq-muted)}
.cq-v512 .lesson-card p,.cq-v512 .track p,.cq-v512 .g p,.cq-v512 #start p{font-size:18px;color:var(--cq-muted)}
.cq-v512 .mylearn{padding:24px;margin-top:24px;background:#eaf3f0;border:1px solid #c7ddd5;border-radius:14px}
.cq-v512 .mylearn>*{display:block}
.cq-v512 .mylearn>b{font-size:20px;line-height:1.5;margin:9px 0}
.cq-v512 .learn-login-shortcut{font-size:16px;padding:9px 14px;border:1px solid #a7c7bd;background:#fff;border-radius:8px;margin-top:14px;color:#185b4d}
.cq-v512 .learn-progress{height:8px;border-radius:8px;background:#cfded9;margin:15px 0;overflow:hidden}
.cq-v512 .learn-progress>i{display:block;background:#177565;height:100%}
.cq-v512 .lesson-article,.cq-v512 #lesson{max-width:860px;margin:auto;background:#fff;padding:36px;border-radius:14px;border:1px solid var(--cq-line)}
.cq-v512 #lesson h1{font-size:38px;line-height:1.4;letter-spacing:-.02em}
.cq-v512 .education-article p,.cq-v512 .education-article li{font-size:18px;line-height:1.9}
.cq-v512 .post-row{background:#fff;border:1px solid var(--cq-line);border-radius:8px;padding:21px 24px;margin-bottom:10px}
.cq-v512 .post-title{font-size:20px}
.cq-v512 .empty{font-size:18px;line-height:1.75;padding:28px;background:#fff;border:1px dashed #cdd7e2;border-radius:8px;color:var(--cq-muted)}
/* Full edition: readable article, no duplicated title or list-shaped market board. */
.cq-v512 .issue-page{max-width:1120px;margin:30px auto 50px;background:transparent;border:0;box-shadow:none}
.cq-v512 .issue-mast{padding:38px 43px;background:#fff;color:var(--cq-ink);border:1px solid var(--cq-line);border-top:4px solid var(--cq-blue);border-radius:16px 16px 0 0}
.cq-v512 .issue-mast .kicker{font-size:16px;color:var(--cq-blue)}
.cq-v512 .issue-mast h1{font-size:38px;line-height:1.38;letter-spacing:-.02em;color:var(--cq-ink);margin:14px 0 20px}
.cq-v512 .issue-mast .deck{font-size:20px;line-height:1.85;color:var(--cq-muted);max-width:900px}
.cq-v512 .issue-meta{display:flex;flex-wrap:wrap;gap:8px 19px;margin:24px 0 18px}
.cq-v512 .issue-meta span{font-size:16px;color:var(--cq-muted);border:0;border-radius:0;background:none;padding:0;line-height:1.7}
.cq-v512 .issue-html{padding:35px 42px;background:#fff;border:1px solid var(--cq-line);border-top:0}
.cq-v512 .cq-reader-edition{margin:0;max-width:none;padding:0;border:0;background:transparent}
.cq-reader-edition>.cq-market-board{margin-bottom:32px}
.cq-reader-edition>.cq-brief{margin:0 0 34px;border-top-width:1px;border-radius:14px;background:#f6f8fb}
.cq-reader-edition .cq-index-readings{gap:36px}
.cq-reader-edition .cq-metric-primary .cq-metric-reading>strong{font-size:38px}
.cq-reader-edition .cq-metric-primary .cq-metric-reading{display:flex}
.cq-reader-edition .cq-metric-primary .cq-change{margin-top:0}
.cq-reader-edition .cq-macro-readings .cq-metric-reading>strong{font-size:30px}
.cq-reader-edition .cq-metric-primary>small{margin-top:5px}
.cq-reader-edition .cq-zone-vol .cq-vol-readings{gap:36px}
.cq-reader-edition>.cq-signal-section,.cq-reader-edition>.cq-radar-section{margin:40px 0}
.cq-reader-edition>.cq-calendar{margin:40px 0}
.cq-reader-edition>.cq-article-section{margin:39px 0;padding:31px 0 0;border-top:1px solid var(--cq-line)}
.cq-article-section>h2{font-size:30px;line-height:1.4;margin:0 0 19px;letter-spacing:-.02em;color:var(--cq-ink)}
.cq-article-section h3{font-size:20px;margin:24px 0 10px;line-height:1.5}
.cq-article-section p,.cq-article-section li{font-size:18px;line-height:1.9;color:#42546a}
.cq-article-section p{margin:15px 0}
.cq-article-section p>strong{font-weight:750;color:var(--cq-ink)}
.cq-deep p{max-width:790px;line-height:2!important;margin:22px 0}
.cq-traffic>p{padding:18px 21px;border-left:3px solid #6b9f8e;background:#f3f8f6;border-radius:0 9px 9px 0}
.cq-traffic>p:nth-of-type(2){border-color:#b48a30;background:#fcf8ee}
.cq-traffic>p:nth-of-type(3){border-color:#bc6b60;background:#fcf3f1}
.cq-comi .comiq-topic{background:#f7f9fc;border:1px solid var(--cq-line);border-radius:14px;margin-top:20px;padding:23px 28px}
.cq-comi .comiq-topic h3{margin:0 0 17px}
.cq-comi .comiq-topic p{display:grid;grid-template-columns:57px minmax(0,1fr);gap:14px;margin:12px 0}
.cq-comi .comiq-topic strong{font-size:16px;color:var(--cq-blue);line-height:2.1}
.cq-v512 .issue-checkback,.cq-v512 .issue-comments{padding:30px 42px;background:#fff;border:1px solid var(--cq-line);border-top:0}
.cq-v512 .issue-comments{border-radius:0 0 16px 16px}
.cq-v512 .issue-checkback .kicker{color:var(--cq-accent)}
.cq-v512 .issue-checkback h2,.cq-v512 .issue-comments h2{font-size:30px;line-height:1.4}
/* Dialog state is explicit; keyboard behavior is in cq-reader-v512.js. */
.cq-v512 .search-backdrop[hidden]{display:none!important}
.cq-v512 .search-backdrop:not([hidden]){display:grid;position:fixed;inset:0;z-index:200;place-items:start center;padding:100px 20px 25px;background:#09182bb5;overflow-y:auto}
.cq-v512 .search-dialog{width:100%;max-width:760px;max-height:calc(100dvh - 140px);display:flex;flex-direction:column;background:#fff;color:var(--cq-ink);border-radius:14px;box-shadow:0 20px 70px #0004;overflow:hidden}
.cq-v512 .search-top{display:flex;gap:12px;padding:20px;border-bottom:1px solid var(--cq-line);align-items:center}
.cq-v512 .search-top input{min-width:0;flex:1;border:0;background:#f2f5f9;border-radius:8px;padding:13px;font-size:18px;outline-offset:1px}
.cq-v512 .search-close,.cq-v512 .auth-close{border:0;background:transparent;border-radius:8px;min-width:44px;min-height:44px;font-size:30px;color:var(--cq-muted);line-height:1}
.cq-v512 .search-hint{font-size:16px;line-height:1.65;color:var(--cq-muted);padding:15px 21px;border-bottom:1px solid var(--cq-line)}
.cq-v512 .search-results{padding:10px 20px 20px;overflow-y:auto}
.cq-v512 .search-empty{padding:30px 5px;font-size:18px;color:var(--cq-muted)}
.cq-v512 .search-group>span{font-size:16px;display:block;padding:15px 0 8px;font-weight:750;color:var(--cq-blue)}
.cq-v512 .search-result{display:grid;grid-template-columns:77px minmax(0,1fr);gap:14px;padding:16px 10px;border-bottom:1px solid #e8edf2}
.cq-v512 .search-result:hover{background:#f3f6fa}
.cq-v512 .search-result>span{font-size:16px;color:var(--cq-muted)}
.cq-v512 .search-result b{font-size:18px;line-height:1.6}
.cq-v512 .search-result p{font-size:16px;line-height:1.65;color:var(--cq-muted);margin:6px 0 0}
.cq-v512 .auth-backdrop{z-index:210;background:#09182bb5;padding:20px}
.cq-v512 .auth-modal{border-radius:14px;max-width:480px;width:100%;padding:28px;max-height:calc(100dvh - 40px);overflow:auto}
.cq-v512 .auth-modal h2{font-size:24px;line-height:1.4}
.cq-v512 .auth-help,.cq-v512 .fast small{font-size:16px;line-height:1.65}
.cq-v512 .fast{margin-top:20px;display:grid;gap:10px}
.cq-v512 .fast button{font-size:16px;padding:11px;border:1px solid var(--cq-line);border-radius:8px;background:#f2f6fa}
.cq-v512 .site-footer{background:var(--cq-navy);border:0;color:#c3d1e3;padding:43px max(28px,calc((100vw - 1224px)/2));margin-top:22px}
.cq-v512 .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px;max-width:1224px;margin:auto}
.cq-v512 .footer-brand-lockup{display:flex;gap:10px;align-items:center;white-space:nowrap}
.cq-v512 .footer-brand-lockup img{width:38px;height:38px;object-fit:contain;flex:none}
.cq-v512 .footer-brand-lockup .brand-words strong{font-size:24px;color:#fff;letter-spacing:-.02em;line-height:1.3;white-space:nowrap;display:block}
.cq-v512 .footer-brand-lockup .brand-words em{font-style:normal;color:#77c5ea}
.cq-v512 .footer-brand-lockup .brand-words small{display:block;font-size:16px;color:#aabbcf;letter-spacing:0;white-space:normal;line-height:1.6;margin-top:7px}
.cq-v512 .footer-grid p{font-size:16px;line-height:1.8;color:#aabbcf;max-width:370px}
.cq-v512 .footer-links{display:flex;flex-direction:column;gap:10px}
.cq-v512 .footer-links strong{font-size:16px;color:#fff;margin-bottom:6px}
.cq-v512 .footer-links a{font-size:16px;color:#bccbde;line-height:1.6}
.cq-v512 .footer-links a:hover{color:#fff;text-decoration:underline}
.cq-v512 .footer-bottom{max-width:1224px;margin:29px auto 0;padding-top:23px;border-top:1px solid #ffffff20;display:flex;gap:20px;justify-content:space-between;align-items:center;font-size:16px;color:#aabbcf}
.cq-v512 .text-search{border:0;background:transparent;color:#c3d1e3;font-size:16px;padding:0}
@media(min-width:1500px){.cq-masthead{padding-left:0;padding-right:0}.cq-home{padding-left:0;padding-right:0}}
@media(max-width:1100px){.cq-masthead{gap:16px}.cq-tagline{font-size:16px;max-width:250px;padding-left:18px}.cq-home-lead{gap:27px;grid-template-columns:.95fr 1.05fr}.cq-macro-readings{grid-template-columns:1fr}.cq-macro-readings .cq-metric{display:grid;grid-template-columns:95px 1fr;column-gap:12px;align-items:center}.cq-macro-readings .cq-metric-name{margin:0}.cq-macro-readings .cq-metric>small{grid-column:2;margin-top:4px}.cq-metric-primary .cq-metric-reading>strong{font-size:30px}.cq-v512 .issue-page{margin-left:24px;margin-right:24px}.cq-v512 .page-hero{margin-left:28px;margin-right:28px}.cq-reader-edition .cq-macro-readings{grid-template-columns:repeat(3,minmax(0,1fr))}.cq-reader-edition .cq-macro-readings .cq-metric{display:block}.cq-editorial-card{padding:22px}.cq-outlook-grid{grid-template-columns:1.4fr 1fr;gap:22px}}
@media(max-width:800px){.cq-tagline{display:none}.cq-nav{gap:18px}.cq-home-lead{grid-template-columns:1fr;gap:26px;padding:28px 0 31px}.cq-lead-copy{padding:0}.cq-lead-copy h1{font-size:38px}.cq-home-deck{max-width:680px}.cq-asof{padding-top:16px}.cq-macro-readings{grid-template-columns:repeat(3,minmax(0,1fr))}.cq-macro-readings .cq-metric{display:block}.cq-metric-primary .cq-metric-reading{display:flex}.cq-metric-primary .cq-change{margin:0}.cq-metric-primary .cq-metric-reading>strong{font-size:38px}.cq-outlook-grid{grid-template-columns:1fr}.cq-editorial-grid{grid-template-columns:1fr}.cq-editorial-card{padding:25px}.cq-editorial-card p{margin-bottom:20px}.cq-calendar{margin-top:5px}.cq-v512 .timeline-item{grid-template-columns:1fr;gap:12px}.cq-v512 .timeline-item>.btn{justify-self:start}.cq-v512 .footer-grid{gap:30px;grid-template-columns:1.35fr 1fr 1fr}.cq-v512 .issue-mast h1{font-size:38px}.cq-v512 .issue-mast{padding:30px}.cq-v512 .issue-html,.cq-v512 .issue-checkback,.cq-v512 .issue-comments{padding:30px}.cq-service-strip{grid-template-columns:1fr}.cq-service-strip a{border-right:0;border-bottom:1px solid var(--cq-line)}.cq-v512 .two{grid-template-columns:1fr}.cq-v512 #lesson{padding:28px}}
@media(max-width:600px){html{scroll-padding-top:118px}.cq-masthead{padding:10px 16px;min-height:58px;gap:8px;flex-wrap:wrap}.cq-brand{gap:8px}.cq-brand img{width:31px;height:31px}.cq-brand strong{font-size:24px}.cq-tools{gap:7px}.cq-tools button{padding:7px 10px;font-size:16px;min-height:39px;gap:5px}.cq-tools svg{display:none}.cq-tagline{display:none}.cq-nav{gap:0;padding:0 8px;justify-content:space-between}.cq-nav a{font-size:16px;min-height:44px;padding:8px 6px;flex:1}.cq-nav a[aria-current=page]:after{left:5px;right:5px}.cq-home{padding:0 17px 30px}.cq-edition-line{padding:14px 0 10px;font-size:16px;gap:5px;align-items:center;flex-wrap:wrap}.cq-edition-line>span:first-child{letter-spacing:.035em}.cq-home-lead{padding-top:24px}.cq-lead-copy h1{font-size:30px;line-height:1.27;margin:11px 0 19px}.cq-title-detail{font-size:24px;line-height:1.5;margin-top:12px}.cq-home-deck{font-size:18px;line-height:1.85!important;margin-bottom:18px}.cq-lead-actions{gap:18px;margin-top:18px}.cq-button{font-size:16px;padding:11px 15px;gap:18px}.cq-asof{font-size:16px}.cq-board-heading{padding:20px}.cq-board-heading h2{font-size:24px}.cq-zone{padding:18px 20px}.cq-zone-title{margin-bottom:14px}.cq-zone-title small{letter-spacing:0;font-size:16px}.cq-index-readings,.cq-vol-readings{gap:14px}.cq-metric-primary .cq-metric-reading{display:block}.cq-metric-primary .cq-metric-reading>strong{font-size:30px}.cq-metric-primary .cq-change{margin-top:8px}.cq-macro-readings{grid-template-columns:1fr;gap:16px}.cq-macro-readings .cq-metric{display:grid;grid-template-columns:93px minmax(0,1fr);gap:0 11px;padding-bottom:14px;border-bottom:1px solid #ffffff15}.cq-macro-readings .cq-metric:last-child{padding-bottom:0;border:0}.cq-macro-readings .cq-metric-reading>strong{font-size:24px}.cq-macro-readings .cq-metric-reading{display:flex}.cq-macro-readings .cq-metric>small{grid-column:2;margin-top:5px}.cq-macro-readings .cq-metric-name{align-self:start;margin-top:3px}.cq-board-note{padding:13px 20px 19px}.cq-zone-vol .cq-metric-reading>strong{font-size:30px}.cq-market-board{border-radius:14px}.cq-brief{padding:24px 20px;margin-bottom:32px}.cq-section-heading{margin-bottom:20px}.cq-section-heading h2{font-size:24px;line-height:1.5}.cq-brief-row{grid-template-columns:1fr;gap:6px;padding:16px 0}.cq-brief-row p{font-size:18px;line-height:1.85}.cq-signals{grid-template-columns:1fr;gap:15px}.cq-signal{padding:23px 22px}.cq-signal-title h3{font-size:20px}.cq-outlook-grid{margin:32px 0;gap:28px}.cq-radar article{padding:22px 20px}.cq-radar-title{align-items:flex-start;gap:12px}.cq-radar-title h3{font-size:20px}.cq-radar-row{grid-template-columns:1fr;gap:4px;margin-top:16px}.cq-radar-row p{font-size:18px;line-height:1.8}.cq-calendar{padding:24px 21px}.cq-heading-with-link{align-items:start;flex-wrap:wrap;gap:10px}.cq-editorial-card h3{font-size:20px}.cq-home-games{padding:22px 18px 18px;border-radius:14px}.cq-service-strip a{padding:23px}.cq-v512 .section{padding:26px 17px}.cq-v512 .section-head{flex-direction:column;align-items:start;gap:10px}.cq-v512 .section-head h2{font-size:24px}.cq-v512 .page-hero{margin:22px 17px 0;padding:25px 23px;border-radius:14px}.cq-v512 .page-hero h1{font-size:30px}.cq-v512 .page-hero p{font-size:18px;line-height:1.85}.cq-v512 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.cq-v512 .stats>div{padding:17px}.cq-v512 .latest-grid{grid-template-columns:1fr}.cq-v512 .timeline-item{padding:23px}.cq-v512 .timeline-copy h3{font-size:20px}.cq-v512 .timeline-date{font-size:16px}.cq-v512 .archive-tools{align-items:stretch}.cq-v512 .archive-tools input{width:100%;flex-basis:100%}.cq-v512 .archive-tools select{flex:1}.cq-v512 .archive-count{align-self:center}.cq-v512 .lesson-card,.cq-v512 .track,.cq-v512 .g,.cq-v512 #catalog article,.cq-v512 #start>a{padding:22px}.cq-v512 .lesson-article,.cq-v512 #lesson{padding:24px 21px}.cq-v512 #lesson h1{font-size:30px}.cq-v512 .issue-page{margin:22px 17px 35px}.cq-v512 .issue-mast{padding:25px 21px}.cq-v512 .issue-mast h1{font-size:30px;line-height:1.48;margin:13px 0 18px}.cq-v512 .issue-mast .deck{font-size:18px;line-height:1.9}.cq-v512 .issue-meta{gap:6px 15px;margin:22px 0 16px}.cq-v512 .issue-html{padding:23px 13px}.cq-reader-edition>.cq-article-section{margin:30px 7px 0;padding-top:25px}.cq-article-section>h2{font-size:24px}.cq-article-section p,.cq-article-section li{font-size:18px;line-height:1.9}.cq-reader-edition .cq-index-readings,.cq-reader-edition .cq-zone-vol .cq-vol-readings{gap:13px}.cq-reader-edition .cq-metric-primary .cq-metric-reading{display:block}.cq-reader-edition .cq-metric-primary .cq-metric-reading>strong{font-size:30px}.cq-reader-edition .cq-metric-primary .cq-change{margin-top:8px}.cq-reader-edition .cq-macro-readings{grid-template-columns:1fr}.cq-reader-edition .cq-macro-readings .cq-metric{display:grid}.cq-reader-edition .cq-macro-readings .cq-metric-reading>strong{font-size:24px}.cq-reader-edition>.cq-market-board{margin-bottom:23px}.cq-reader-edition .cq-board-heading,.cq-reader-edition .cq-zone{padding-left:16px;padding-right:16px}.cq-reader-edition .cq-board-note{padding-left:16px;padding-right:16px}.cq-reader-edition>.cq-brief{padding:22px 18px;margin-bottom:25px}.cq-reader-edition>.cq-signal-section,.cq-reader-edition>.cq-radar-section{margin:30px 0}.cq-comi .comiq-topic{padding:21px 18px}.cq-comi .comiq-topic p{display:block}.cq-comi .comiq-topic strong{display:block;font-size:16px;margin-bottom:5px}.cq-v512 .issue-checkback,.cq-v512 .issue-comments{padding:25px 21px}.cq-v512 .site-footer{padding:33px 22px}.cq-v512 .footer-grid{grid-template-columns:1fr 1fr;gap:28px}.cq-v512 .footer-grid>div:first-child{grid-column:1/-1}.cq-v512 .footer-bottom{flex-direction:column;align-items:start;gap:12px}.cq-v512 .footer-brand-lockup .brand-words small{font-size:16px}.cq-v512 .search-backdrop:not([hidden]){padding:18px 12px}.cq-v512 .search-dialog{max-height:calc(100dvh - 36px);border-radius:14px}.cq-v512 .search-top{padding:14px;gap:4px}.cq-v512 .search-top input{padding:11px;font-size:18px}.cq-v512 .search-hint{padding:14px 17px}.cq-v512 .search-results{padding:5px 16px 16px}.cq-v512 .search-result{grid-template-columns:1fr;gap:5px;padding:15px 3px}.cq-v512 .auth-modal{padding:23px}.cq-v512 .auth-modal h2{font-size:24px}}
/* Eight nav items need about 500px in one row; below that use the two-row grid. */
/* 480px 아래에서는 메뉴가 3열 두 줄이라 머리글이 144px 입니다. 앵커가 그 아래로 오게 합니다. */
@media(max-width:480px){html{scroll-padding-top:152px}.cq-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 10px}.cq-nav a{min-height:40px;padding:6px 5px}}
@media(max-width:359px){.cq-masthead{padding-left:12px;padding-right:12px}.cq-brand img{width:26px;height:26px}.cq-brand{gap:6px}.cq-brand strong{font-size:20px}.cq-tools button{padding:7px 8px}.cq-tagline{font-size:16px;letter-spacing:0}.cq-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 10px}.cq-nav a{min-height:41px;padding:7px 5px}.cq-home{padding-left:13px;padding-right:13px}.cq-lead-copy h1{font-size:30px}.cq-title-detail{font-size:24px}.cq-board-heading{padding:18px 16px}.cq-zone{padding:18px 16px}.cq-zone-title{align-items:start;gap:4px;flex-wrap:wrap}.cq-metric-primary .cq-metric-reading>strong{font-size:30px}.cq-macro-readings .cq-metric{grid-template-columns:86px minmax(0,1fr);gap:0 8px}.cq-macro-readings .cq-metric-reading>strong{font-size:24px}.cq-v512 .issue-page{margin-left:11px;margin-right:11px}.cq-v512 .issue-mast{padding:22px 18px}.cq-v512 .issue-mast h1{font-size:30px}.cq-v512 .issue-html{padding:19px 10px}.cq-reader-edition .cq-metric-primary .cq-metric-reading>strong{font-size:24px}.cq-reader-edition .cq-board-heading{align-items:start;gap:8px}.cq-reader-edition .cq-board-heading h2{font-size:20px}.cq-v512 .section{padding-left:13px;padding-right:13px}.cq-v512 .page-hero{margin-left:13px;margin-right:13px}.cq-v512 .footer-brand-lockup{align-items:start}.cq-v512 .footer-brand-lockup img{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cq-v512 *, .cq-v512 *:before, .cq-v512 *:after{transition:none!important;animation:none!important}}

/* /tools 의 묶음 (2026-09-16). 20개를 분류 없이 늘어놓으니 벽처럼 보였습니다. */
.cq-tool-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.cq-tool-jump a{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--cq-line);border-radius:999px;background:#fff;font-size:16px;font-weight:650;color:var(--cq-ink)}
.cq-tool-jump a:hover,.cq-tool-jump a:focus-visible{border-color:#8ba6c7;color:var(--cq-blue)}
.cq-tool-jump a>b{font-weight:700;color:var(--cq-muted);font-variant-numeric:tabular-nums}
/* 앵커 여백은 html 의 scroll-padding-top 이 맡습니다. 여기서 또 주면 두 번 밀립니다. */
.cq-tool-group{margin-top:48px}
.cq-tool-group:first-of-type{margin-top:0}
.cq-tool-group .cq-section-heading{margin-bottom:16px}
.cq-tool-group .cq-section-heading h2{display:flex;align-items:baseline;gap:10px;font-size:24px;line-height:1.4}
.cq-tool-group .cq-section-heading h2>small{font-family:var(--cq-display-font);font-size:16px;font-weight:600;color:var(--cq-muted);letter-spacing:0}
.cq-tool-group .cq-section-heading>p{font-size:16px;line-height:1.6;color:var(--cq-muted);margin:6px 0 0}
/* 카드 높이를 맞춥니다. 설명이 3~6줄로 들쭉날쭉해 격자가 어긋나 보였습니다. */
/* 묶음이 2개짜리라도 카드가 늘어나지 않게 합니다. auto-fit 은 남는 칸을 카드가 채워 버립니다. */
.cq-tool-group .cq-editorial-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.cq-tool-group .cq-editorial-card p,
.cq-home-tools .cq-editorial-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:16px}
@media(max-width:600px){
  .cq-tool-group{margin-top:40px}
  .cq-tool-jump{margin-bottom:24px}
  .cq-tool-jump a{padding:7px 13px}
}

/* 카드 제목 상자 (2026-09-18): 무엇인지는 상자 모양으로, 어느 갈래인지는 색으로 알립니다.
   계산기는 채운 상자(갈래 4색), 학습 글은 테두리 상자(트랙 4색), 게임은 진한 남색 상자 하나,
   용어는 회색 상자 하나입니다. 색만으로 뜻을 전하지 않도록 머리글 글자나 바로 위 묶음 제목이 같은 뜻을 전합니다.
   글자와 바탕의 대비는 모두 4.5:1 이상입니다. */
.cq-card-name{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;
  min-height:calc(1.45em + 20px);padding:10px 12px;border-radius:10px;line-height:1.45;text-align:center;
  white-space:nowrap;overflow:hidden}
/* 긴 제목은 cq-cardfit-v515.js 가 글자 크기와 장평으로 한 줄에 맞춥니다. 스크립트가 없으면 말줄임으로 둡니다. */
.cq-card-fit{display:inline-block;flex:0 0 auto}
/* 눌러도 안 들어가는 제목만 두 줄로 흘립니다. */
.cq-card-name.is-wrapped{white-space:normal;text-wrap:balance}
.cq-chip-fill{background:var(--cq-chip-bg,#eef2f6);color:var(--cq-chip-fg,var(--cq-ink))}
.cq-chip-dark{background:#14314c;color:#fff}
.cq-chip-mute{background:#eef2f6;color:#3d4f61}
.cq-tool-card>span,.cq-lesson-card>span{color:var(--cq-chip-fg,var(--cq-muted));font-weight:600}
.cq-tool-card h3,.cq-lesson-card h3,.cq-game-card h3,.cq-term-card h3{margin:12px 0 10px}
/* 카드는 align-items:start 라 제목이 글자 폭으로 줄어듭니다. 상자를 카드 폭에 맞추려면 늘려 줘야 합니다. */
.cq-editorial-card>h3{align-self:stretch}
/* 계산기 네 갈래 */
.cq-g-tax{--cq-chip-bg:#fbf0de;--cq-chip-fg:#7a4a06}
.cq-g-trade{--cq-chip-bg:#e7eefc;--cq-chip-fg:#1b4bc4}
.cq-g-later{--cq-chip-bg:#e2f0ea;--cq-chip-fg:#0d6047}
.cq-g-living{--cq-chip-bg:#f1e8fa;--cq-chip-fg:#6b2f96}
/* 학습 글 네 트랙. 계산기의 네 색과 겹치지 않게 골랐습니다. 테두리 상자는 제목을 가두는 느낌이라 채운 상자로 바꿨습니다(2026-09-18). */
.cq-t-calc{--cq-chip-bg:#e9e9fa;--cq-chip-fg:#33339c}
.cq-t-start{--cq-chip-bg:#ddeff1;--cq-chip-fg:#0c5f68}
.cq-t-company-etf{--cq-chip-bg:#e5edf5;--cq-chip-fg:#2b4d67}
.cq-t-portfolio{--cq-chip-bg:#fae7ea;--cq-chip-fg:#8a2733}
.cq-t-life{--cq-chip-bg:#e3f0e7;--cq-chip-fg:#245c33}
/* 학습 코스 카드 4개(브라우저가 그립니다)도 같은 상자를 씁니다. */
.cq-v512 .track b .cq-card-name{font-size:18px}
/* /tools 는 묶음 제목이 바로 위에 있어 카드마다 분류 이름을 되풀이하지 않습니다. 홈과 '함께 쓰면 좋은 계산기'에는 남깁니다. */
.cq-tool-group .cq-tool-card>span{display:none}
.cq-tool-group .cq-tool-card h3{margin-top:0}
/* /learn 의 글 카드(옛 템플릿 클래스)는 제목이 b 입니다. */
.cq-v512 .lesson-card b,.cq-v512 #start b,.cq-v512 .track b{margin:0 0 10px}
.cq-v512 .lesson-card b .cq-card-name,.cq-v512 #start b .cq-card-name{font-size:20px}

/* 카드에 마우스를 올렸을 때를 또렷하게 (2026-09-18). 움직임을 줄인 설정에서는 뜨지 않습니다. */
.cq-editorial-card{transition:border-color .15s,box-shadow .15s,transform .15s}
.cq-editorial-card:hover{border-color:var(--cq-blue);box-shadow:0 10px 26px #17355126;transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){
  .cq-editorial-card{transition:border-color .15s,box-shadow .15s}
  .cq-editorial-card:hover{transform:none}
}

/* 홈 히어로 띠와 구역 배경 (2026-09-21, 시안 ②경제신문·에디토리얼형).
   시안처럼 띠가 화면 끝까지 가도록 컨테이너 밖으로 빼냅니다. 세로 스크롤바 때문에 100vw 가 몇 px 넘칠 수 있어
   .cq-home 에서 가로만 잘라 냅니다(overflow-x:clip). 머리글은 .cq-home 밖이라 sticky 가 그대로 동작합니다.
   그림은 배경으로만 쓰고 제목·설명·버튼은 HTML 글자입니다. 900px 아래에서는 사진을 내려받지 않습니다. */
.cq-home{overflow-x:clip}
.cq-hero{position:relative;isolation:isolate;width:100vw;margin-inline:calc(50% - 50vw);margin-top:0;margin-bottom:40px;
  padding:0;border-radius:0;overflow:hidden;background-color:#081428;color:#fff;
  background-repeat:no-repeat;background-size:auto,auto,cover;background-position:120% -30%,center,right center;
  background-image:
    radial-gradient(860px 460px at 74% 6%,rgba(56,132,255,.42),rgba(56,132,255,0) 70%),
    linear-gradient(96deg,rgba(6,15,32,.985) 0%,rgba(6,15,32,.93) 34%,rgba(7,19,40,.52) 60%,rgba(7,19,40,.08) 100%),
    url("/assets/img/hero-home-v517-1400.webp");
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
@media(min-width:1200px){.cq-hero{background-image:
    radial-gradient(860px 460px at 74% 6%,rgba(56,132,255,.42),rgba(56,132,255,0) 70%),
    linear-gradient(96deg,rgba(6,15,32,.985) 0%,rgba(6,15,32,.93) 34%,rgba(7,19,40,.52) 60%,rgba(7,19,40,.08) 100%),
    url("/assets/img/hero-home-v517-2100.webp")}}
/* 아주 옅은 격자. 글자 쪽에서만 보이게 가립니다. */
.cq-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 42%,transparent 70%);
  mask-image:linear-gradient(100deg,#000 0%,#000 42%,transparent 70%)}
.cq-hero-inner{max-width:1280px;margin:0 auto;padding:60px 28px 58px}
.cq-hero-copy{position:relative;max-width:660px}
.cq-hero-kicker{display:block;font-size:16px;font-weight:700;letter-spacing:.14em;color:#8fbaff;margin-bottom:14px}
.cq-hero h1{font-size:clamp(30px,3.4vw,48px);line-height:1.23;letter-spacing:-.02em;font-weight:800;color:#fff;margin:0 0 16px;
  text-shadow:0 1px 18px rgba(4,12,28,.5)}
.cq-hero .cq-home-deck{color:#cddcf0;margin:0 0 26px;max-width:600px}
.cq-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.cq-hero-cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 26px;border-radius:999px;
  background:linear-gradient(180deg,#3a7bff 0%,#1f56cf 100%);color:#fff;font-weight:700;font-size:18px;text-decoration:none;
  box-shadow:0 10px 24px -12px rgba(58,123,255,.95),inset 0 1px 0 rgba(255,255,255,.22)}
.cq-hero-cta::after{content:"→"}
.cq-hero-cta:hover{filter:brightness(1.08)}
.cq-hero-cta:focus-visible,.cq-hero-link:focus-visible{outline:3px solid #9cc2ff;outline-offset:3px}
.cq-hero-link{color:#cfe0ff;font-weight:700;font-size:18px;text-decoration:none}
.cq-hero-link:hover{text-decoration:underline}
@media(max-width:700px){
  .cq-hero-inner{padding:42px 22px 38px}
  .cq-hero::before{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 92%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 92%)}}
@media(max-width:600px){.cq-hero{margin-bottom:28px}.cq-hero-inner{padding:30px 17px 28px}.cq-hero h1{font-size:30px;margin-bottom:12px}
  .cq-hero-kicker{font-size:16px;letter-spacing:.1em;margin-bottom:10px}.cq-hero .cq-home-deck{margin-bottom:20px}
  .cq-hero-actions{gap:12px 18px}.cq-hero-cta{font-size:18px;padding:11px 22px}.cq-hero::before{background-size:36px 36px}}

/* 맨 아래 인용 띠. 밝은 계단 사진 위에 이미 정해진 문장 하나만 올립니다. */
.cq-quote-band{width:100vw;margin-inline:calc(50% - 50vw);margin-top:46px;padding:0;
  background:#eef3fa center/cover no-repeat;
  background-image:linear-gradient(90deg,rgba(238,243,250,.97) 0%,rgba(238,243,250,.9) 42%,rgba(238,243,250,.35) 72%,rgba(238,243,250,.1) 100%),url("/assets/img/band-quote-v517-1200.webp")}
@media(min-width:1200px){.cq-quote-band{background-image:linear-gradient(90deg,rgba(238,243,250,.97) 0%,rgba(238,243,250,.9) 42%,rgba(238,243,250,.35) 72%,rgba(238,243,250,.1) 100%),url("/assets/img/band-quote-v517-2000.webp")}}
.cq-quote-band blockquote{max-width:1280px;margin:0 auto;padding:54px 28px 52px}
.cq-quote-band p{margin:0 0 12px;max-width:620px;font-family:var(--cq-display-font,inherit);font-size:clamp(22px,2.2vw,30px);
  line-height:1.5;font-weight:700;color:#12263f;letter-spacing:-.01em}
.cq-quote-band cite{font-style:normal;font-size:16px;font-weight:700;letter-spacing:.12em;color:#5b7089}
@media(max-width:900px){.cq-quote-band{background-image:linear-gradient(150deg,#eef3fa 0%,#e4ecf7 55%,#edf2fa 100%)}
  .cq-quote-band blockquote{padding:40px 22px 38px}}
@media(max-width:600px){.cq-quote-band{margin-top:32px}.cq-quote-band blockquote{padding:32px 17px 30px}}

/* 카드 안 오른쪽 삽화(2026-09-21, 시안 ①의 용어·배우기 카드 모양).
   글이 왼쪽, 그림이 오른쪽. 그림은 160px 정사각이고 320/560 두 벌만 씁니다. */
.cq-editorial-card.has-img{display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:auto auto auto auto;
  column-gap:18px;align-items:start;background:linear-gradient(140deg,#f4f7fc 0%,#eef3fb 100%)}
.cq-editorial-card.has-img>span{grid-column:1}
.cq-editorial-card.has-img>h3{grid-column:1}
.cq-editorial-card.has-img>p{grid-column:1}
.cq-editorial-card.has-img>b{grid-column:1;align-self:end;display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:10px 20px;border-radius:999px;background:#12305e;color:#fff;font-size:16px}
.cq-editorial-card.has-img:hover>b{background:#1b4a8f}
.cq-card-spot{grid-column:2;grid-row:1 / span 4;align-self:center;justify-self:end;width:150px;height:150px;
  object-fit:cover;border-radius:16px;mix-blend-mode:multiply}
@media(max-width:820px){.cq-editorial-card.has-img{grid-template-columns:minmax(0,1fr) 112px}
  .cq-card-spot{width:112px;height:112px;border-radius:14px}}
@media(max-width:480px){.cq-editorial-card.has-img{grid-template-columns:minmax(0,1fr) 88px;column-gap:12px}
  .cq-card-spot{width:88px;height:88px;border-radius:12px}}

/* 히어로 아래 한 줄 요약(2026-09-21, 시안 ①의 4칸 스트립). 아이콘은 인라인 SVG 입니다. */
.cq-quickstrip{margin:-18px 0 34px}
.cq-quickstrip ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0}
.cq-quickstrip a{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;
  align-items:center;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--cq-line);border-radius:14px;
  padding:18px 18px 16px;transition:border-color .15s,box-shadow .15s}
.cq-quickstrip a:hover{border-color:#b9cdf0;box-shadow:0 10px 24px -20px rgba(9,22,44,.7)}
.cq-quickstrip svg{grid-row:1 / span 3;width:34px;height:34px;fill:none;stroke:var(--cq-blue,#275acb);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cq-quickstrip span{font-size:16px;color:var(--cq-muted,#5b6b7d);font-weight:700}
.cq-quickstrip b{font-size:22px;line-height:1.3;color:#12263f;letter-spacing:-.01em}
.cq-quickstrip small{font-size:16px;color:var(--cq-muted,#5b6b7d);line-height:1.45}
@media(max-width:900px){.cq-quickstrip ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cq-quickstrip{margin:-10px 0 26px}.cq-quickstrip ul{gap:10px}
  .cq-quickstrip a{padding:14px;grid-template-columns:32px minmax(0,1fr);column-gap:10px}
  .cq-quickstrip svg{width:26px;height:26px}.cq-quickstrip b{font-size:20px}}

/* 갈래별 페이지 머리 띠 (2026-09-21). body[data-page] 로 고릅니다(reader.mjs pageKind).
   앞면(계산기·배우기·용어·게임 목록)은 밝은 띠에 오른쪽 사진, 상세(계산기 한 개·학습 글·용어 분야)는
   사진 없이 옅은 색 띠, 안내·정책 문서는 중립 회색 띠입니다. 홈만 짙은 남색입니다.
   사진은 ≥900px 에서만 내려받습니다. */
.cq-v512 .page-hero{position:relative;max-width:none;width:100vw;margin:0 0 30px;margin-inline:calc(50% - 50vw);
  border:0;border-radius:0;background:#eef2f8;background-repeat:no-repeat;background-position:right center;background-size:cover;
  padding:0;box-shadow:inset 0 -1px 0 rgba(16,32,57,.08);overflow:hidden}
.cq-v512 .page-hero>*{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px}
.cq-v512 .page-hero>.kicker{padding-top:44px}
.cq-v512 .page-hero>h1{margin:8px auto 12px}
/* 설명 글. 상자는 제목과 같은 1280 폭으로 두어 왼쪽 끝을 맞추고(max-width 로 좁히면 가운데 정렬이라
   제목보다 230px 안쪽에서 시작했습니다), 줄 길이는 오른쪽 여백으로만 줄입니다. 그래야 사진 띠에서
   글이 그림 위로 넘어가지 않습니다. 40% 라 화면이 넓어져도 글은 늘 왼쪽 60% 안에서 끝납니다. */
.cq-v512 .page-hero>p{padding-bottom:44px;padding-right:clamp(28px,40%,560px);max-width:1280px;color:#3c4a5e}
/* 앞면 셋: 왼쪽은 흰빛, 오른쪽으로 갈수록 사진이 드러납니다. */
.cq-v512[data-page="tools"] .page-hero{background-image:linear-gradient(94deg,rgba(238,242,248,.985) 0%,rgba(238,242,248,.95) 54%,rgba(238,242,248,.58) 72%,rgba(238,242,248,.12) 100%),url("/assets/img/band-tools-v517-1300.webp")}
.cq-v512[data-page="learn"] .page-hero{background-image:linear-gradient(94deg,rgba(247,244,238,.985) 0%,rgba(247,244,238,.95) 54%,rgba(247,244,238,.58) 72%,rgba(247,244,238,.12) 100%),url("/assets/img/band-lesson-v517-1300.webp")}
@media(min-width:1200px){
  .cq-v512[data-page="tools"] .page-hero{background-image:linear-gradient(94deg,rgba(238,242,248,.985) 0%,rgba(238,242,248,.95) 54%,rgba(238,242,248,.58) 72%,rgba(238,242,248,.12) 100%),url("/assets/img/band-tools-v517-2100.webp")}
  .cq-v512[data-page="learn"] .page-hero{background-image:linear-gradient(94deg,rgba(247,244,238,.985) 0%,rgba(247,244,238,.95) 54%,rgba(247,244,238,.58) 72%,rgba(247,244,238,.12) 100%),url("/assets/img/band-lesson-v517-2100.webp")}
  .cq-v512[data-page="glossary"] .page-hero{background-image:linear-gradient(94deg,rgba(240,244,250,.985) 0%,rgba(240,244,250,.95) 54%,rgba(240,244,250,.58) 72%,rgba(240,244,250,.12) 100%),url("/assets/img/band-glossary-v517-2100.webp")}
  .cq-v512[data-page="games"] .page-hero{background-image:linear-gradient(94deg,rgba(9,22,44,.985) 0%,rgba(9,22,44,.94) 52%,rgba(9,22,44,.5) 72%,rgba(9,22,44,.1) 100%),url("/assets/img/band-games-v517-2100.webp")}
  .cq-v512[data-page="lesson"] .page-hero{background-image:linear-gradient(94deg,rgba(250,248,244,.985) 0%,rgba(250,248,244,.94) 56%,rgba(250,248,244,.45) 76%,rgba(250,248,244,.1) 100%),url("/assets/img/band-lesson-v517-2100.webp")}
}
/* 사진이 아직 없는 앞면 둘: 색으로만 구분합니다(게임은 어두운 남색 계열). */
.cq-v512[data-page="glossary"] .page-hero{background-image:linear-gradient(94deg,rgba(240,244,250,.985) 0%,rgba(240,244,250,.95) 54%,rgba(240,244,250,.58) 72%,rgba(240,244,250,.12) 100%),url("/assets/img/band-glossary-v517-1300.webp")}
.cq-v512[data-page="games"] .page-hero{background-color:#0b1a33;color:#fff;
  background-image:linear-gradient(94deg,rgba(9,22,44,.985) 0%,rgba(9,22,44,.94) 52%,rgba(9,22,44,.5) 72%,rgba(9,22,44,.1) 100%),url("/assets/img/band-games-v517-1300.webp")}
.cq-v512[data-page="games"] .page-hero h1{color:#fff}
.cq-v512[data-page="games"] .page-hero>p{color:#c9d8ee}
.cq-v512[data-page="games"] .page-hero .kicker,.cq-v512[data-page="games"] .page-hero .cq-eyebrow{color:#8fbaff}
/* 상세: 사진 없이 옅은 띠. 계산기는 첫 화면이 중요해 더 얕게 둡니다. */
.cq-v512[data-page="tool"] .page-hero{background-image:linear-gradient(120deg,#f2f5fa 0%,#eaf0f9 60%,#f4f7fb 100%)}
.cq-v512[data-page="tool"] .page-hero>.kicker{padding-top:32px}
.cq-v512[data-page="tool"] .page-hero>p{padding-bottom:32px}
.cq-v512[data-page="lesson"] .page-hero{background-image:linear-gradient(94deg,rgba(250,248,244,.985) 0%,rgba(250,248,244,.94) 56%,rgba(250,248,244,.45) 76%,rgba(250,248,244,.1) 100%),url("/assets/img/band-lesson-v517-1300.webp")}
.cq-v512[data-page="glossary-category"] .page-hero{background-image:linear-gradient(120deg,#f5f3ef 0%,#eef1f7 60%,#f6f7fa 100%)}
.cq-v512[data-page="brand"] .page-hero,.cq-v512[data-page="board"] .page-hero,.cq-v512[data-page="issues"] .page-hero{background-image:linear-gradient(120deg,#f3f5f9 0%,#edf1f7 60%,#f4f6fa 100%)}
@media(max-width:600px){
  .cq-v512 .page-hero{margin-bottom:22px}
  .cq-v512 .page-hero>*{padding-left:17px;padding-right:17px}
  .cq-v512 .page-hero>.kicker{padding-top:26px}
  .cq-v512 .page-hero>p{padding-bottom:26px}
}

/* 글 읽는 페이지 위의 얇은 장식 띠(2026-09-21). 글자는 넣지 않습니다 — 제목은 본문 안에 있습니다.
   화면 끝까지 가고, 700px 아래에서는 사진 없이 색만 깔립니다. */
.cq-v512 .cq-page-band{width:100vw;margin-inline:calc(50% - 50vw);height:150px;margin-bottom:-96px;
  background:#faf8f4 right center/cover no-repeat;
  background-image:linear-gradient(94deg,rgba(250,248,244,.98) 0%,rgba(250,248,244,.9) 40%,rgba(250,248,244,.42) 68%,rgba(250,248,244,.08) 100%),url("/assets/img/band-lesson-v517-1300.webp")}
@media(min-width:1200px){.cq-v512 .cq-page-band{background-image:linear-gradient(94deg,rgba(250,248,244,.98) 0%,rgba(250,248,244,.9) 40%,rgba(250,248,244,.42) 68%,rgba(250,248,244,.08) 100%),url("/assets/img/band-lesson-v517-2100.webp")}}
@media(max-width:700px){.cq-v512 .cq-page-band{height:110px;margin-bottom:-74px;background-image:linear-gradient(160deg,#faf8f4 0%,#f1ece2 60%,#faf8f4 100%)}}

/* 분류 이동 줄(2026-09-21). 아래 카드와 같은 갈래 색을 점으로 달고, 목록이 길어 스크롤하는 동안 위에 붙어 있게 합니다.
   붙는 위치는 머리글 높이(데스크톱 110px)에 맞춥니다. */
.cq-v512 .cq-tool-jump{position:sticky;top:110px;z-index:5;display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 30px;padding:10px 0;background:linear-gradient(180deg,var(--cq-bg,#f4f6fa) 72%,rgba(244,246,250,0) 100%)}
.cq-v512 .cq-tool-jump a{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 13px;border-radius:999px;
  border:1px solid var(--cq-line);background:#fff;font-size:16px;font-weight:700;color:#1d2b3a;text-decoration:none;
  transition:border-color .15s,box-shadow .15s,background .15s}
.cq-v512 .cq-tool-jump a>i{width:10px;height:10px;border-radius:50%;background:var(--cq-chip-fg,#275acb);flex:none}
.cq-v512 .cq-tool-jump a>b{font-weight:700;color:var(--cq-chip-fg,#5b6b7d);background:var(--cq-chip-bg,#eef2f8);
  border-radius:999px;padding:1px 9px;font-variant-numeric:tabular-nums;font-size:16px}
.cq-v512 .cq-tool-jump a:hover,.cq-v512 .cq-tool-jump a:focus-visible{background:var(--cq-chip-bg,#eef2f8);
  border-color:color-mix(in srgb,var(--cq-chip-fg,#275acb) 35%,#fff);box-shadow:0 8px 18px -14px rgba(9,22,44,.8)}
@media(max-width:600px){.cq-v512 .cq-tool-jump{top:144px;gap:6px;padding:8px 0;margin-bottom:22px}
  .cq-v512 .cq-tool-jump a{padding:8px 13px 8px 11px;gap:7px}}
@media(min-width:601px) and (max-width:800px){.cq-v512 .cq-tool-jump{top:108px}}

/* 걸러 보기 칩(2026-09-21). /learn 의 코스 필터를 분류 이동 줄과 같은 결로 맞춥니다.
   코스 색 점을 달아, 아래 카드의 색과 이어지게 합니다. */
.cq-v512 .chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;border-radius:999px;padding:9px 16px;
  background:#fff;border:1px solid var(--cq-line);color:#1d2b3a;font-size:16px;font-weight:700;
  transition:border-color .15s,background .15s,box-shadow .15s}
.cq-v512 .chip[data-t]:not([data-t=""])::before{content:"";width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--cq-chip-fg,#8ba6c7)}
.cq-v512 .chip[data-t="calc"]{--cq-chip-fg:#1b4bc4}
.cq-v512 .chip[data-t="life"]{--cq-chip-fg:#245c33}
.cq-v512 .chip[data-t="start"]{--cq-chip-fg:#7a4a06}
.cq-v512 .chip[data-t="company-etf"]{--cq-chip-fg:#0d6047}
.cq-v512 .chip[data-t="portfolio"]{--cq-chip-fg:#6b2f96}
.cq-v512 .chip:hover{border-color:#b9cdf0;box-shadow:0 8px 18px -16px rgba(9,22,44,.8)}
.cq-v512 .chip.on{background:var(--cq-navy);color:#fff;border-color:var(--cq-navy)}
.cq-v512 .chip.on::before{background:#fff}

/* 다듬기 (2026-09-21). 갈래 색을 페이지 머리 띠까지 이어 주고, 머리글자와 여백을 한 벌로 맞춥니다.
   1) 계산기 상세는 그 계산기가 속한 갈래 색으로 아주 옅게 물들고, 위쪽에 3px 색 선이 붙습니다.
   2) 머리글자(kicker)는 어디서나 같은 크기·자간·굵기를 씁니다.
   3) 안내·정책 문서는 남색 선 하나로만 구분합니다. */
.cq-v512 .page-hero{border-top:3px solid transparent}
.cq-v512 .page-hero>.kicker,.cq-v512 .page-hero>.cq-eyebrow{font-size:16px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#5b7089}
.cq-v512[data-page="tool"] .page-hero{border-top-color:var(--cq-chip-fg,#275acb)}
.cq-v512[data-page="tool"] .page-hero>.kicker{color:var(--cq-chip-fg,#5b7089);letter-spacing:.06em;text-transform:none}
.cq-v512[data-page="tool"][data-group="tax"]{--cq-chip-bg:#fbf0de;--cq-chip-fg:#7a4a06}
.cq-v512[data-page="tool"][data-group="trade"]{--cq-chip-bg:#e7eefc;--cq-chip-fg:#1b4bc4}
.cq-v512[data-page="tool"][data-group="later"]{--cq-chip-bg:#e2f0ea;--cq-chip-fg:#0d6047}
.cq-v512[data-page="tool"][data-group="living"]{--cq-chip-bg:#f1e8fa;--cq-chip-fg:#6b2f96}
.cq-v512[data-page="tool"] .page-hero{background-image:linear-gradient(104deg,var(--cq-chip-bg,#eef2f8) 0%,rgba(255,255,255,.7) 52%,#f5f7fb 100%)}
/* 안내·정책·게시판·기록: 사진 없이 선 하나와 옅은 회색. */
.cq-v512[data-page="brand"] .page-hero,.cq-v512[data-page="board"] .page-hero,.cq-v512[data-page="issues"] .page-hero{
  border-top-color:#12305e;background-image:linear-gradient(104deg,#f2f5fa 0%,#fbfcfe 60%,#f4f6fa 100%)}
/* 앞면 셋은 갈래 색 선으로 구분합니다(사진은 그대로). */
.cq-v512[data-page="tools"] .page-hero{border-top-color:#1b4bc4}
.cq-v512[data-page="learn"] .page-hero{border-top-color:#7a4a06}
.cq-v512[data-page="glossary"] .page-hero,.cq-v512[data-page="glossary-category"] .page-hero{border-top-color:#5b7089}
.cq-v512[data-page="games"] .page-hero{border-top-color:#3a7bff}
.cq-v512[data-page="lesson"] .cq-page-band{border-top:3px solid #7a4a06}
/* 카드가 떠오르는 정도를 한 벌로 맞춥니다(움직임을 줄이는 설정에서는 그림자만). */
.cq-v512 .cq-editorial-card{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.cq-v512 .cq-editorial-card:hover{border-color:#b9cdf0;box-shadow:0 18px 34px -26px rgba(9,22,44,.75)}
@media(prefers-reduced-motion:reduce){.cq-v512 .cq-editorial-card:hover{transform:none}}
/* 페이지 제목 크기를 화면 폭에 따라 부드럽게 바꿉니다(고정 38px → 28~40px). */
.cq-v512 .page-hero h1{font-size:clamp(28px,3vw,40px);line-height:1.28;margin:10px 0 12px}
.cq-v512 .page-hero>p{font-size:18px;line-height:1.8}

/* 좁은 화면에서도 사진을 보여 줍니다(운영자 확인 2026-09-21). 다른 규칙에 덮이지 않도록 파일 맨 끝에 둡니다.
   가로로 덮던 막을 세로로 바꿔, 글이 놓이는 위쪽은 짙고 아래로 갈수록 사진이 드러납니다.
   작은 벌(1300/1400)만 받습니다: 한 페이지에 20~28KB. */
@media(max-width:700px){
  .cq-hero{background-size:auto,auto,cover;background-position:center,center,right center;
    background-image:
      radial-gradient(420px 260px at 88% 4%,rgba(56,132,255,.30),rgba(56,132,255,0) 72%),
      linear-gradient(180deg,rgba(7,17,35,.97) 0%,rgba(7,17,35,.92) 52%,rgba(7,17,35,.62) 100%),
      url("/assets/img/hero-home-v517-1400.webp")}
  .cq-v512[data-page="tools"] .page-hero{background-image:linear-gradient(180deg,rgba(238,242,248,.97) 0%,rgba(238,242,248,.9) 55%,rgba(238,242,248,.55) 100%),url("/assets/img/band-tools-v517-1300.webp")}
  .cq-v512[data-page="learn"] .page-hero{background-image:linear-gradient(180deg,rgba(247,244,238,.97) 0%,rgba(247,244,238,.9) 55%,rgba(247,244,238,.55) 100%),url("/assets/img/band-lesson-v517-1300.webp")}
  .cq-v512[data-page="glossary"] .page-hero{background-image:linear-gradient(180deg,rgba(240,244,250,.97) 0%,rgba(240,244,250,.9) 55%,rgba(240,244,250,.55) 100%),url("/assets/img/band-glossary-v517-1300.webp")}
  .cq-v512[data-page="games"] .page-hero{background-image:linear-gradient(180deg,rgba(9,22,44,.96) 0%,rgba(9,22,44,.9) 52%,rgba(9,22,44,.58) 100%),url("/assets/img/band-games-v517-1300.webp")}
  .cq-v512 .cq-page-band{height:110px;margin-bottom:-74px;
    background-image:linear-gradient(180deg,rgba(250,248,244,.88) 0%,rgba(250,248,244,.6) 60%,rgba(250,248,244,.32) 100%),url("/assets/img/band-lesson-v517-1300.webp")}
}

/* 휴대폰·좁은 창: 설명 글은 폭을 다 씁니다(2026-09-22). 사진 띠가 세로 가림막으로 바뀌는 700px 아래에서는 글이 그림을
   가릴 일이 없는데, 위의 padding-right:40% 가 .page-hero>* 의 모바일 여백보다 구체적이라(>p 대 >*) 이기고 있었습니다.
   계산기 첫 화면의 설명이 화면 55% 폭에서 여섯 줄로 꺾였습니다. */
@media(max-width:700px){.cq-v512 .page-hero>p{padding-right:28px}}
@media(max-width:600px){.cq-v512 .page-hero>p{padding-right:17px}}

/* 대비와 손가락 목표 (2026-09-26 측정 뒤 수정).
   1) 옛 styles.css 의 .kicker 는 어두운 히어로용 연파랑(#93b6ff)입니다. 흰 바탕에 놓인 자리에서는 2.02:1 이라
      읽기 어려웠습니다. 히어로 쪽 규칙은 건드리지 않고, 흰 바탕에 놓이는 세 곳만 링크색으로 바꿉니다(6.16:1).
   2) 「↗」로 넘어가는 링크가 27~31px 이라 손가락으로 빗나갑니다. 보이는 글자 크기는 그대로 두고 높이만 44px. */
.cq-v512 #lesson .kicker,.cq-v512 .post-detail .kicker,.cq-v512 .board-side .kicker{color:var(--cq-blue)}
.cq-v512 .cq-text-link,.cq-v512 .cq-hero-link{display:inline-flex;align-items:center;min-height:44px}
/* 본문에 홀로 선 링크도 44px: /learn 의 분야 알약, 방침·문의의 메일 주소. */
.cq-v512 .gl-learn-cats a{min-height:44px}
.cq-v512 .data-table a[href^="mailto"],.cq-v512 .data-table a[href^="tel"]{display:inline-flex;align-items:center;min-height:44px}