:root{--c-cta-hover:#0B5537;--c-cta-hover-glow:rgba(16,112,73,.32);--c-success:#03654A;--c-success-soft:rgba(4,120,87,.08);--c-warning:#96460A;--c-warning-soft:rgba(180,83,9,.08);--c-danger:#B91C1C;--c-danger-soft:rgba(185,28,28,.08);--shadow-color:0,0,0;--c-shadow-sm:rgba(var(--shadow-color),.04);--c-shadow-md:rgba(var(--shadow-color),.06);--c-shadow-lg:rgba(var(--shadow-color),.08);--c-shadow-panel:rgba(var(--shadow-color),.18);--c-overlay-backdrop:rgba(var(--shadow-color),.45);--c-thumb-bg:#000000;--c-tap-highlight:rgba(26,26,26,.06);--c-intent-commercial-bg:rgba(14,42,71,.12);--radius-sm:0px;--radius-md:0px;--radius-lg:0px;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-9:2.25rem;--space-10:2.5rem;--space-12:3rem;--c-link-hover-strong:var(--c-accent-strong);
  --font-mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--shadow-sm:0 1px 2px var(--c-shadow-sm);--shadow-md:0 4px 12px var(--c-shadow-md);--shadow-lg:0 8px 24px var(--c-shadow-lg);--c-chip-ink:#F3F4F6;--c-line-strong:#374151;--c-thead-bg:#1F2937}body,p,li,a,button,input,textarea,select{font-family:var(--font-body);font-feature-settings:"ss01" 1,"ss02" 1,"kern" 1}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-optical-sizing:auto;letter-spacing:-.02em;text-wrap:balance;color:var(--c-ink)}article p,article li{text-wrap:pretty}article h3{padding-left:var(--space-4)}article h3::before{position:absolute;left:0;top:.3em;bottom:.3em;width:3px;background:var(--c-accent);border-radius:1.5px}article h1 a,article h2 a,article h3 a,article h4 a,article h5 a,article h6 a{text-decoration:none;border:0}article p,article li{font-size:1.0625rem;line-height:1.85;color:var(--c-ink)}.meta-text{font-size:.875rem;line-height:1.6;color:var(--c-muted)}article a{color:var(--c-accent);text-decoration:underline;text-decoration-color:var(--c-accent);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .15s,text-decoration-thickness .15s,text-decoration-color .15s}article a:hover{color:var(--c-accent-strong);text-decoration-color:var(--c-accent-strong);text-decoration-thickness:1.5px}article mark,article p mark,article li mark{background:var(--c-highlight);color:var(--c-ink);padding:0 .15rem;border-radius:1px}article .lead,article>p:first-of-type{font-size:1.1875rem;line-height:1.75;color:var(--c-ink);font-weight:450;margin-bottom:var(--space-8)}article .has-dropcap::first-letter,article>p:first-of-type.dropcap::first-letter{font-family:var(--font-display);font-size:4.2rem;font-weight:700;line-height:.9;float:left;margin:.15em .12em 0 0;color:var(--c-accent);padding-top:.05em}.pull-quote{font-family:var(--font-display);font-weight:500;color:var(--c-ink);text-align:center;border:none;position:relative;text-wrap:balance}.pull-quote::before{content:"\201C";position:absolute;left:50%;transform:translateX(-50%);font-family:var(--font-display);line-height:1;font-weight:700;pointer-events:none}.pull-quote cite{display:block;font-family:var(--font-body);font-size:.75rem;font-style:normal;font-weight:700;color:var(--c-muted);letter-spacing:.1em;text-transform:uppercase}@media(max-width:640px){.pull-quote{padding-top:var(--space-6)}}.section-divider{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin:var(--space-10)auto;color:var(--c-muted);max-width:8rem}.section-divider::before,.section-divider::after{content:"";flex:1;height:1px;background:var(--c-border)}.article-summary{background:var(--c-surface);border-left:3px solid var(--c-accent);padding:var(--space-5)var(--space-6);border-radius:0 var(--radius-md)var(--radius-md)0;margin:var(--space-6)0;font-size:1rem;line-height:1.7}article blockquote{border-left:3px solid var(--c-border);background:0 0;padding:0 var(--space-6);color:var(--c-ink);font-style:italic;margin:var(--space-6)0;font-family:var(--font-display);font-size:1.0625rem}article blockquote p{margin:var(--space-2)0}article table{border-collapse:collapse;font-size:.9375rem;margin:var(--space-6)0;font-feature-settings:"tnum" 1}article table thead tr{border-bottom:2px solid var(--c-ink)}article table th{padding:var(--space-3)var(--space-4);text-align:left;font-weight:700;color:var(--c-ink);font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em}article table td{padding:var(--space-3)var(--space-4);border-bottom:1px solid var(--c-border);color:var(--c-ink)}article table tbody tr:hover{background:var(--c-accent-soft)}.callout{position:relative;padding:0 0 0 var(--space-6);margin:var(--space-7)0;font-size:1rem;line-height:1.75;background:0 0;border:none;border-radius:0}.callout::before{content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:1.5px;background:var(--c-ink)}.callout-body{padding:0}.callout-body p{margin:0;line-height:1.75}.callout-body p+p{margin-top:var(--space-3)}.callout-title{font-family:var(--font-body);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--c-ink);font-style:normal;margin:0 0 .5rem}.callout-title::after{content:""}.callout--tip::before{background:var(--c-accent)}.callout--warning::before{background:var(--c-warning)}.callout--danger::before{background:var(--c-danger)}.callout--check::before{background:var(--c-success)}.cta-box{background:var(--c-ink);color:var(--c-paper);padding:var(--space-6)var(--space-8);border-radius:var(--radius-lg);text-align:center;margin:var(--space-8)0}.cta-box p{color:var(--c-paper);margin:0 0 var(--space-2);font-size:1.0625rem}.cta-box a,.cta-btn{background:var(--c-paper);color:var(--c-ink);padding:var(--space-3)var(--space-6);border-radius:var(--radius-md);font-weight:700;font-size:1rem;display:inline-block;margin-top:var(--space-3);text-decoration:none;transition:background .15s,color .15s}.cta-box a:hover,.cta-btn:hover{background:var(--c-cta-hover);color:var(--c-paper);transform:translateY(-2px);box-shadow:0 8px 20px var(--c-cta-hover-glow)}.comparison-table-wrap{margin:var(--space-6)0}.comparison-table-wrap table{margin:0}.recommended-badge{display:none}.calculator-wrap{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:var(--space-6);margin:var(--space-6)0}.calculator-wrap label{display:block;font-size:.8125rem;font-weight:700;margin-bottom:var(--space-1);color:var(--c-muted);text-transform:uppercase;letter-spacing:.04em}.calculator-wrap input[type=number],.calculator-wrap select{width:100%;padding:var(--space-2)var(--space-3);border:1px solid var(--c-border);border-radius:var(--radius-md);font-size:1rem;font-family:inherit;margin-bottom:var(--space-4);background:var(--c-paper);color:var(--c-ink);transition:border-color .15s,box-shadow .15s}.calculator-wrap input:focus,.calculator-wrap select:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-soft)}.calculator-btn{color:var(--c-paper);border:none;padding:var(--space-3)var(--space-6);border-radius:var(--radius-md);font-size:1rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s;width:100%}.calculator-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--c-cta-hover-glow)}.calculator-result{margin-top:var(--space-4);text-align:center;font-size:2rem;font-weight:700;font-family:var(--font-display);color:var(--c-accent);line-height:1.2}.calculator-result-label{font-size:.8125rem;color:var(--c-muted);margin-top:var(--space-1);text-transform:uppercase;letter-spacing:.04em}.toc,#TableOfContents{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:var(--space-4)var(--space-5);margin:var(--space-6)0;font-size:.9375rem}.toc-title{font-weight:700;margin-bottom:var(--space-2);font-size:.75rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.06em}#TableOfContents ul{list-style:none;padding-left:var(--space-4);margin:0}#TableOfContents li{margin:var(--space-1)0}#TableOfContents a{color:var(--c-ink);text-decoration:none;font-size:.9rem;font-family:var(--font-body)}#TableOfContents a:hover{color:var(--c-accent)}.category-badge{display:inline-block;padding:var(--space-1)var(--space-3);border:2px solid var(--c-ink);border-radius:0;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--c-paper);color:var(--c-ink);text-decoration:none}.category-badge:hover{background:var(--c-ink);color:var(--c-paper)}.hero-banner{background:var(--c-paper);color:var(--c-ink);padding:var(--space-12)0 var(--space-10);border-bottom:1px solid var(--c-ink)/* divider:strong */;text-align:left;margin-bottom:var(--space-10)}.hero-banner h1{color:var(--c-ink);font-family:var(--font-display);font-size:2.625rem;font-weight:700;line-height:1.1;letter-spacing:-.025em;margin:0 0 var(--space-3);text-wrap:balance}.hero-banner p{color:var(--c-muted);font-size:1.125rem;line-height:1.6;margin:0 0 var(--space-6);max-width:36rem}.hero-cta{background:var(--c-ink);color:var(--c-paper);padding:var(--space-3)var(--space-6);border-radius:var(--radius-md);font-weight:700;font-size:.9375rem;display:inline-block;text-decoration:none;text-transform:uppercase;letter-spacing:.04em;transition:background .15s}.hero-cta:hover{background:var(--c-cta-hover);color:var(--c-paper);transform:translateY(-2px);box-shadow:0 8px 20px var(--c-cta-hover-glow)}@media(max-width:640px){.hero-banner{padding:var(--space-10)0 var(--space-8);margin-bottom:var(--space-8)}.hero-banner h1{font-size:1.875rem}.hero-banner p{font-size:1rem}}#reading-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--c-accent);z-index:9999;transition:width .1s ease-out;pointer-events:none}@media(max-width:700px){article h2::before{width:2rem;height:2px}article h4{margin:var(--space-6)0 var(--space-2)}article p,article li{font-size:1rem;line-height:1.75}article .lead,article>p:first-of-type{font-size:1.0625rem}article .has-dropcap::first-letter,article>p:first-of-type.dropcap::first-letter{font-size:3.4rem}}.bf-end-cta{margin:var(--space-10)0 var(--space-6);padding:var(--space-6)var(--space-8);background:var(--c-paper);border:1px solid var(--c-ink);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.bf-end-cta__text{margin:0;font-size:1rem;line-height:1.6;color:var(--c-ink);font-weight:500}.bf-end-cta__btn{flex-shrink:0;background:var(--c-ink);color:var(--c-paper)!important;padding:var(--space-2)var(--space-5);border-radius:var(--radius-md);text-decoration:none!important;font-weight:700;font-size:.875rem;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;transition:background .15s,transform .15s}.bf-end-cta__btn:hover{background:var(--c-cta-hover);color:var(--c-paper)!important;transform:translateY(-2px);box-shadow:0 8px 20px var(--c-cta-hover-glow)}@media(max-width:640px){.bf-end-cta{padding:var(--space-5)}.bf-end-cta__btn{width:100%;text-align:center}}#bf-mobile-toc-fab{position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:60;display:inline-flex;align-items:center;gap:var(--space-2);min-height:48px;padding:var(--space-2)var(--space-4)var(--space-2)var(--space-3);background:var(--c-ink);color:var(--c-paper);border:2px solid var(--c-ink);border-radius:0;box-shadow:var(--c-shadow-1);font-size:.875rem;font-weight:700;font-family:var(--font-body);cursor:pointer;max-width:calc(100vw - 2rem)}#bf-mobile-toc-fab:active{transform:scale(.97)}.bf-mobile-toc-fab__label{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#bf-mobile-toc-backdrop{position:fixed;inset:0;background:var(--c-overlay-backdrop);z-index:70}#bf-mobile-toc-panel{position:fixed;left:0;right:0;bottom:0;z-index:71;max-height:70vh;background:var(--c-paper);color:var(--c-ink);border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);box-shadow:0 -8px 28px var(--c-shadow-panel);display:flex;flex-direction:column;animation:bf-toc-slide .18s ease-out}@keyframes bf-toc-slide{from{transform:translateY(100%)}to{transform:translateY(0)}}#bf-mobile-toc-panel header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3)var(--space-5);border-bottom:1px solid var(--c-border);font-family:var(--font-display);font-size:1rem}#bf-mobile-toc-close{background:0 0;border:0;font-size:1.5rem;line-height:1;color:var(--c-muted);cursor:pointer;padding:0 var(--space-2);min-width:44px;min-height:44px}#bf-mobile-toc-nav{overflow-y:auto;padding:var(--space-2)var(--space-5)var(--space-5);-webkit-overflow-scrolling:touch}#bf-mobile-toc-nav ul{list-style:none;padding-left:var(--space-3);margin:0}#bf-mobile-toc-nav>ul{padding-left:0}#bf-mobile-toc-nav li{margin:var(--space-1)0;font-size:.9375rem;line-height:1.5}#bf-mobile-toc-nav a{color:var(--c-ink);text-decoration:none;display:inline-block;padding:var(--space-1)0;font-family:var(--font-body)}#bf-mobile-toc-nav a.active{color:var(--c-accent);font-weight:700}.toc #TableOfContents a.active{color:var(--c-accent);font-weight:600}@media(min-width:1024px){#bf-mobile-toc-fab,#bf-mobile-toc-backdrop,#bf-mobile-toc-panel{display:none!important}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.calculator-wrap .bb-inputs{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin:var(--space-5)0}@media(min-width:640px){.calculator-wrap .bb-inputs[data-cols="2"]{grid-template-columns:1fr 1fr}}.calculator-wrap .bb-inputs label{display:flex;flex-direction:column}.calculator-wrap .bb-inputs label>span{font-size:.8125rem;font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--space-1)}.calculator-wrap .bb-outputs{margin-top:var(--space-5);display:grid;gap:var(--space-3)}.calculator-wrap .bb-output-card{padding:var(--space-4)var(--space-5);background:var(--c-paper);border-left:3px solid var(--c-accent);border-radius:0 var(--radius-md)var(--radius-md)0}.calculator-wrap .bb-output-card .calculator-result-label{margin-top:0;margin-bottom:var(--space-1);text-align:left}.calculator-wrap .bb-output-card .calculator-result{text-align:left;font-size:1.625rem;margin-top:0}.bb-comparison h3{margin-bottom:var(--space-2)}.bb-comparison-table th[data-sortable=true]{cursor:pointer;user-select:none;transition:background .15s}.bb-comparison-table th[data-sortable=true]:hover{background:var(--c-accent-soft)}.bb-comparison-table .bb-sort-arrow{opacity:.4;font-size:.75rem;margin-left:var(--space-1)}.bb-comparison-source{margin-top:var(--space-2);font-size:.75rem}@media(min-width:768px){.magazine-grid--featured{grid-template-columns:2fr 1fr 1fr}.magazine-grid--featured>:first-child{grid-row:span 2}}.masthead{display:flex;justify-content:center;align-items:center;padding:var(--space-8)0;border-bottom:1px solid var(--c-ink)/* divider:strong */}.masthead .logo{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-size:2.25rem;font-weight:700;letter-spacing:-.03em;color:var(--c-ink);text-decoration:none;text-align:center;white-space:nowrap}.masthead .logo .brand-symbol{width:auto;height:1.15em;border-radius:8px;display:block;flex:0 0 auto}.masthead-nav{display:flex;justify-content:center;gap:var(--space-10);padding:var(--space-3)0;border-bottom:1px solid var(--c-border);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-12)}.masthead-nav a{color:var(--c-ink);text-decoration:none}.masthead-nav a:hover{color:var(--c-accent)}.masthead-nav a.current{color:var(--c-accent);border-bottom:2px solid var(--c-accent);padding-bottom:var(--space-3);margin-bottom:calc(var(--space-3) * -1)}@media(max-width:700px){.masthead{padding:var(--space-5)0}.masthead .logo{font-size:1.625rem}.masthead-nav{gap:var(--space-5);margin-bottom:var(--space-10);overflow-x:auto;padding:var(--space-3)var(--space-4)}}.article-figure{margin:var(--space-8)0}.article-figure .figure-image-wrap{background:var(--c-surface);border-radius:var(--radius-md);overflow:hidden;display:grid;place-items:center;aspect-ratio:1/1;width:100%}.article-figure[data-orient=landscape] .figure-image-wrap{aspect-ratio:16/10}.article-figure picture,.article-figure img{display:block;width:100%;height:100%;object-fit:contain;background:0 0}.article-figure.preserve-aspect .figure-image-wrap{aspect-ratio:auto;display:block}.article-figure.preserve-aspect img{width:100%;height:auto;max-height:70vh;object-fit:contain}.article-figure figcaption{margin-top:var(--space-3);font-family:var(--font-body);font-size:.8125rem;line-height:1.5;color:var(--c-muted);text-align:center;letter-spacing:.01em;font-style:italic}.article-figure figcaption a{color:var(--c-muted);text-decoration:underline;text-decoration-color:var(--c-border)}.article-figure.full-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw}.article-figure.full-bleed picture,.article-figure.full-bleed img{border-radius:0}@media(max-width:700px){.article-figure.full-bleed{margin-left:-1rem;margin-right:-1rem;width:calc(100% + 2rem)}}@supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){.article-figure,.pull-quote,.callout,.bf-end-cta,.magazine-grid>*{animation:bf-fade-up linear both;animation-timeline:view();animation-range:entry 0% entry 55%}}@keyframes bf-fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}}@media(prefers-reduced-motion:no-preference){.bf-fade-target{opacity:0;transform:translateY(16px);transition:opacity .5s ease-out,transform .5s ease-out;will-change:opacity,transform}.bf-fade-target.bf-in-view{opacity:1;transform:none;will-change:auto}}@view-transition{navigation: auto; }::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}.adsbygoogle,ins.adsbygoogle{min-height:100px;display:block;background:var(--c-surface);border-radius:var(--radius-sm)}.ad-slot,[data-ad-slot]{min-height:100px;margin:var(--space-6)0;display:block}html,body{background:var(--c-paper);color:var(--c-ink);color-scheme:light dark}.post-answer-box{margin:1.5rem 0 2.5rem;padding:1.5rem 1.75rem;border:2px solid var(--c-ink);border-radius:var(--radius-md);background:var(--c-paper);position:relative}.post-answer-box::before{position:absolute;top:-.6rem;left:1.25rem}.post-answer-box ol,.post-answer-box ul{margin:0;padding-left:1.25rem;font-family:var(--font-display);font-size:1.125rem;line-height:1.55;color:var(--c-ink)}.post-answer-box li{margin:.4rem 0}.post-answer-box li strong{font-weight:700}.next-steps{border-top:2px solid var(--c-ink);border-bottom:1px solid var(--c-border)}.next-steps-grid{display:grid;grid-template-columns:1fr;gap:0;margin:var(--space-8) calc(var(--space-8) * -1) 0;border-top:1px solid var(--c-border);background:transparent}@media(min-width:700px){.next-steps-grid{grid-template-columns:repeat(3,1fr);gap:0}}.next-step-card{display:flex;flex-direction:column;padding:var(--space-6) var(--space-5) var(--space-5);border:0;border-bottom:1px solid var(--c-border);border-radius:0;background:transparent;color:var(--c-ink);text-decoration:none;transition:background .18s}.next-step-card:last-child{border-bottom:0}@media(min-width:700px){.next-step-card{border-bottom:0;border-right:1px solid var(--c-border)}.next-step-card:last-child{border-right:0}}.next-step-card:hover{background:var(--c-surface);transform:none}.next-step-card .step-num{display:inline-block;font-family:var(--font-display);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent);margin-bottom:.5rem}.next-step-card h4{font-family:var(--font-display);font-size:1.1875rem;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin:0 0 .5rem;border:none;padding:0;color:var(--c-ink)}.next-step-card p{font-size:.9375rem;line-height:1.55;color:var(--c-muted);margin:0 0 .85rem}.next-step-card .arrow{display:block;width:100%;box-sizing:border-box;text-align:center;font-family:var(--font-body);font-size:.875rem;font-weight:700;color:var(--c-ink);letter-spacing:.04em;padding:.7rem 1rem;border:1.5px solid var(--c-ink);border-radius:var(--radius-sm);background:var(--c-paper);margin-top:auto;text-decoration:none;transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s}.next-step-card:hover .arrow,.next-step-card .arrow:hover{background:var(--c-cta-hover);color:var(--c-paper);border-color:var(--c-cta-hover);box-shadow:0 6px 16px var(--c-cta-hover-glow);text-decoration:none;transform:translateY(-1px)}.related-section .intent-label{display:inline-block;font-family:var(--font-body);font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.2rem .55rem;border-radius:var(--radius-sm);background:var(--c-accent-soft);color:var(--c-accent-strong);margin-bottom:.5rem}.related-section .intent-label--commercial{background:var(--c-intent-commercial-bg)}.related-section .intent-label--transactional{background:var(--c-ink);color:var(--c-paper)}.home-category-body{padding:1.75rem 1.75rem 2rem}.home-about-strip{text-align:center;margin:0 0 4rem;padding:2.5rem 1rem;background:var(--c-surface);border-radius:var(--radius-md)}.home-about-strip p{font-family:var(--font-display);font-size:1.0625rem;line-height:1.6;color:var(--c-ink);max-width:38rem;margin:0 auto 1rem}.home-about-strip a{font-family:var(--font-body);font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--c-ink);border-bottom:2px solid var(--c-ink);padding-bottom:.15rem;text-decoration:none}.home-about-strip a:hover{color:var(--c-accent);border-color:var(--c-accent)}.inline-recommendation{margin:2.5rem 0;padding:1.5rem 0;border-top:1px dashed var(--c-border);border-bottom:1px dashed var(--c-border)}.inline-recommendation .label{display:block;font-family:var(--font-body);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--c-muted);margin-bottom:.6rem}.inline-recommendation p{font-family:var(--font-display);font-size:1.0625rem;font-weight:500;line-height:1.5;color:var(--c-ink);margin:0}.inline-recommendation a{font-weight:600;color:var(--c-link);text-decoration:underline;text-decoration-color:var(--c-link);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .15s,text-decoration-color .15s,text-decoration-thickness .15s,text-underline-offset .15s}.inline-recommendation a:hover{color:var(--c-link-hover-strong);text-decoration:underline;text-decoration-color:var(--c-link-hover-strong);text-decoration-thickness:2px;text-underline-offset:4px;background:transparent}.compare-cta{margin:var(--space-8)0 var(--space-6);padding:var(--space-7)var(--space-7);background:var(--c-paper);border:1.5px solid var(--c-ink);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3)}.compare-cta__label{font-family:var(--font-body);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--c-muted);margin:0}.compare-cta__head{font-family:var(--font-display);font-size:1.625rem;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--c-ink);margin:0;text-wrap:balance;word-break:keep-all;overflow-wrap:break-word}.compare-cta__sub{font-family:var(--font-body);font-size:.9375rem;line-height:1.55;color:var(--c-muted);margin:0;word-break:keep-all;overflow-wrap:break-word}.compare-cta__btn{display:block;width:100%;box-sizing:border-box;text-align:center;font-family:var(--font-body);font-size:1rem;font-weight:700;letter-spacing:.04em;color:var(--c-paper);background:var(--c-ink);padding:var(--space-4)var(--space-5);border-radius:var(--radius-sm);text-decoration:none;margin-top:var(--space-3);transition:background .15s,transform .15s,box-shadow .15s}.compare-cta__btn:hover,.compare-cta a.compare-cta__btn:hover,article .compare-cta__btn:hover{background:var(--c-cta-hover);color:var(--c-paper);transform:translateY(-2px);text-decoration:none;font-weight:700;box-shadow:0 8px 20px var(--c-cta-hover-glow)}@media(max-width:640px){.compare-cta{padding:var(--space-6)var(--space-5)}.compare-cta__head{font-size:1.375rem}}.post-answer-box::before{text-transform:none;letter-spacing:0;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:.9375rem;color:var(--c-ink);background:var(--c-paper);padding:0 .75rem}
/* Phase O: 시각 구분 강화 — 형광펜(노랑) / 링크(파랑·클릭 명확) / 밑줄(약한 회색 wavy) */
:root{--c-highlight:#FFF9C4;--c-link:var(--c-cta-hover);--c-link-hover:var(--c-cta-hover);--c-uline-soft:#B8B8B8;--c-link-hover-bg:#FFF176}
article a,article p a,article li a,article td a,article th a{color:var(--c-link);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--c-link);text-decoration-skip-ink:auto;background:transparent;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:color .15s,text-decoration-color .15s,text-decoration-thickness .15s,text-underline-offset .15s}
article a:hover,article p a:hover,article li a:hover,article td a:hover,article th a:hover{color:var(--c-link-hover-strong);text-decoration:underline;text-decoration-color:var(--c-link-hover-strong);text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-skip-ink:auto;font-weight:600;background:transparent}
article mark,article p mark,article li mark,article td mark,article th mark{background:var(--c-highlight);color:var(--c-ink);padding:.05em .25em;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
article u,article p u,article li u,article td u,article th u{text-decoration:underline wavy var(--c-uline-soft);text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-skip-ink:auto}
/* Phase O+: pull-quote 인용부호 겹침 수정 — --space-7 미정의 폴백(0) 보정 + 첫줄 안전 여백 확보 */
:root{--space-7:1.75rem}
.pull-quote{padding:3.75rem 0 .25rem;margin:4rem auto;max-width:36rem;font-size:1.5rem;line-height:1.6;letter-spacing:-.005em;word-break:keep-all;overflow-wrap:break-word}
.pull-quote::before{top:.5rem;font-size:2.75rem;opacity:.7;color:var(--c-ink)}
.pull-quote cite{margin-top:1.5rem}
@media(max-width:640px){.pull-quote{padding:3.25rem 0 .25rem;margin:3rem auto;font-size:1.25rem;line-height:1.65}.pull-quote::before{top:.4rem;font-size:2.25rem}}
/* Phase Q — 홈 슬라이더 (1장씩 정사각, scroll-snap + peek + 화살표) */
.home-slider-section{margin:0 0 5rem;padding:3rem 0 0;border-top:1px solid var(--c-border)}
/* Phase L+: next-steps 헤더 시각 강화 (h3 + 상단 키커 + accent underline + subtitle italic) */
.next-steps{position:relative;margin:5rem 0 3rem;padding:var(--space-10) var(--space-8) var(--space-8);border:1px solid var(--c-ink)/* divider:strong */;border-radius:var(--radius-md);background:var(--c-paper)}
.next-steps::after{content:"";position:absolute;top:calc(var(--space-10) * -1);left:0;right:0;height:1px;background:var(--c-border);pointer-events:none}
.next-steps::before{content:"이어서 읽을 글";display:block;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1rem;color:var(--c-accent);margin:0 0 .85rem;letter-spacing:-.005em}
.next-steps h3{font-family:var(--font-display);font-size:2.5rem;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:0;border:none;padding:0;color:var(--c-ink);text-wrap:balance;word-break:keep-all;overflow-wrap:break-word;display:inline-block;position:relative}
.next-steps h3::after{content:"";display:block;width:3rem;height:3px;background:var(--c-accent);margin-top:1rem;border-radius:1.5px}
.next-steps .subtitle{font-family:var(--font-display);font-size:1.125rem;font-style:italic;font-weight:400;line-height:1.55;color:var(--c-muted);margin:1.25rem 0 2rem;letter-spacing:-.005em;word-break:keep-all;overflow-wrap:break-word;max-width:38rem}
@media(max-width:640px){.next-steps{margin:3.5rem 0 2.5rem;padding:var(--space-7) var(--space-6) var(--space-6)}.next-steps::after{top:calc(var(--space-8) * -1)}.next-steps::before{font-size:.9375rem;margin-bottom:.65rem}.next-steps h3{font-size:1.875rem}.next-steps h3::after{width:2.5rem;height:2px;margin-top:.75rem}.next-steps .subtitle{font-size:1rem;margin:1rem 0 1.5rem}}
/* Phase T — Q&A 컴포넌트 (항상 펼친 카드형 · accent Q 배지 · 토글 없음) ─ JS 0, 전문 노출로 SEO 안전 */
.qna-section{margin:5rem 0 var(--space-9);padding:0;position:relative}
.qna-section__title{position:relative;display:block;padding:var(--space-7) 0 0;margin:0 0 var(--space-6);font-family:var(--font-display);font-size:1.875rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--c-ink);text-wrap:balance;word-break:keep-all;overflow-wrap:break-word;border:0;border-top:2px solid var(--c-ink)/* divider:strong */;max-width:none}
.qna-section__title::before{content:none;display:none}
.qna-section__title::after{content:none;display:none}
/* 항상 펼친 카드 — surface 배경 + 좌측 accent rail + 부드러운 깊이감 */
.qna{position:relative;margin:0 0 var(--space-4);padding:var(--space-6) var(--space-6) var(--space-5);background:var(--c-surface);border:1px solid var(--c-border);border-left:3px solid var(--c-accent);border-radius:var(--radius-lg);box-shadow:0 1px 2px var(--c-shadow-sm)}
.qna:last-of-type{margin-bottom:0}
.qna__q{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:var(--space-3);margin:0 0 var(--space-3);font-family:var(--font-display);font-size:1.1875rem;font-weight:700;line-height:1.45;color:var(--c-ink);letter-spacing:-.02em;word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
/* Q 표식 — accent 배경 둥근 배지 */
.qna__qnum{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-family:var(--font-display);font-weight:700;font-size:.8125rem;letter-spacing:0;color:var(--c-paper);background:var(--c-accent);border-radius:var(--radius-sm);line-height:1;transform:translateY(.05em)}
.qna__qnum::before{content:"Q";display:inline-block;line-height:1}
.qna__qtext{min-width:0}
/* 답변 — 항상 노출(아코디언 제거). 질문 텍스트 시작선에 정렬 */
.qna__a{padding:0 0 0 calc(1.5rem + var(--space-3));background:transparent;border:0;position:relative}
.qna__atext{font-family:var(--font-body);font-size:1.0625rem;line-height:1.78;color:var(--c-ink);word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty;max-width:42rem}
.qna__atext>*:first-child{margin-top:0}
.qna__atext>*:last-child{margin-bottom:0}
.qna__atext p{margin:0 0 var(--space-3)}
.qna__atext p+p{margin-top:var(--space-2)}
.qna__atext strong{color:var(--c-ink);font-weight:700}
.qna__atext ul,.qna__atext ol{margin:var(--space-2) 0 var(--space-3);padding-left:1.25rem}
.qna__atext li{margin:.25rem 0;font-size:1rem;line-height:1.72}
.qna__atext a{font-weight:600}
.qna__mark{display:none}
@media(max-width:640px){.qna-section{margin:3.5rem 0 2rem;padding-top:0}.qna-section__title{font-size:1.5rem;margin-bottom:var(--space-6)}.qna{padding:var(--space-5) var(--space-4) var(--space-4);margin-bottom:var(--space-3)}.qna__q{gap:var(--space-2);font-size:1.0625rem;margin-bottom:var(--space-2)}.qna__qnum{width:1.375rem;height:1.375rem;font-size:.75rem}.qna__a{padding-left:calc(1.375rem + var(--space-2))}.qna__atext{font-size:.9375rem;line-height:1.72}}
@media print{.qna{break-inside:avoid;box-shadow:none}}
/* Phase V — H1~H6 단순화 (장식 0, 단정한 serif, 사이즈/weight로만 위계) */
article h1{position:static;font-family:var(--font-display);font-size:clamp(2.25rem,4vw + 1rem,3rem);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--c-ink);margin:0 0 var(--space-7);text-wrap:balance;word-break:keep-all;overflow-wrap:break-word;border:0;padding:0;text-decoration:none}
article h1::before,article h1::after{content:none;display:none;background:transparent}

article h2::before { content: ""; display: none; }
article h2::after{content:none;display:none}
article h3{position:static;font-family:var(--font-display);font-size:1.375rem;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--c-ink);margin:2.75rem 0 var(--space-3);padding:0;border:0;text-decoration:none;text-wrap:balance;word-break:keep-all;overflow-wrap:break-word}
article h3::before{content:none;display:none}
article h3::after{content:none;display:none;background:transparent;width:0;height:0}
article h4{font-family:var(--font-display);font-style:normal;font-size:1.125rem;font-weight:700;line-height:1.4;letter-spacing:-.015em;color:var(--c-ink);margin:var(--space-7) 0 var(--space-2);border:0;padding:0;text-decoration:none;word-break:keep-all;overflow-wrap:break-word}


/* Mobile (≤700px) */
@media(max-width:700px){article h1{font-size:2rem;line-height:1.1;letter-spacing:-.03em;margin-bottom:var(--space-5)}article h2{font-size:1.625rem;margin:3.5rem 0 var(--space-4);padding-top:var(--space-5)}article h2::after{width:3rem;height:3px}article h3{font-size:1.25rem;margin:2.25rem 0 var(--space-3);padding-left:0}article h3::before{margin-right:.35em}article h4{font-size:1.0625rem;margin-top:var(--space-6)}}

/* ====================================================================== */
/* Phase Y — 모바일 하드닝 (가로 overflow / 컴포넌트 비켜남 / 작은 폰 안전) */
/* ====================================================================== */

/* 1) 가로 overflow 전역 차단 (clip = scroll + sticky 모두 안전) */
html, body { overflow-x: clip; }
body { max-width: 100%; }

/* 2) 표준 이미지 / 폼 요소 경계 안전 */
img, picture, video, canvas, svg, iframe, embed, object,
table, pre, code { max-width: 100%; }
img, picture, video { height: auto; }

/* 3) 본문 table — 모바일에서도 표 형태 유지. 가로 스크롤 폐기 + 셀 줄바꿈 허용 */
.comparison-table-wrap { overflow-x: visible; }
.comparison-table-wrap table { min-width: 0; width: 100%; }

article table { width: 100%; table-layout: auto; }
article table th,
article table td {
  white-space: normal;        /* nowrap 해제 — 셀 안에서 한글 어절 단위 줄바꿈 */
  word-break: keep-all;
  overflow-wrap: break-word;
  vertical-align: top;
}

@media (max-width: 600px) {
  /* 컬럼 많아도 표는 표 — 폰트·패딩 축소로 폭 확보 */
  article table { font-size: .8125rem; line-height: 1.5; }
  article table th,
  article table td {
    padding: var(--space-2) var(--space-2);
    letter-spacing: -.01em;
  }
  article table th {
    font-size: .75rem;
    font-weight: 700;
    color: var(--c-ink);
  }
  /* shortcode 정렬 화살표 모바일에서 자리 차지 — 숨김 */
  .bb-comparison-table .bb-sort-arrow { display: none; }}

@media (max-width: 380px) {
  /* 초소형 폰 추가 축소 */
  article table { font-size: .75rem; }
  article table th,
  article table td { padding: var(--space-1) var(--space-2); }}

/* 5) full-bleed 피규어 우측 indent 보정 — body padding(1.5rem)과 일치 */
@media (max-width: 700px) {
  .article-figure.full-bleed {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    width: calc(100% + 3rem);
  }}

/* 6) compare-cta box-shadow 컨테이너 안전 (우/하 6px 튀어나와도 body overflow:clip이 차단) */
.compare-cta { box-sizing: border-box; max-width: 100%; }
@media (max-width: 480px) {
  .compare-cta { padding: var(--space-5) var(--space-4); box-shadow: 3px 3px 0 var(--c-ink); }
  .compare-cta__head { font-size: 1.25rem; }}

/* 8) 메인 컨테이너 양옆 padding 소형 폰 (≤ 480px) 조정 + 컴포넌트 내부 padding 축소 */
@media (max-width: 480px) {
  body { padding: 0 1rem; }
  .cat-tools-hub { padding: 1.75rem 1.25rem; }
  .post-answer-box { padding: 1.25rem 1.25rem; }
  .post-answer-box ol, .post-answer-box ul { padding-left: 1rem; font-size: 1rem; }
  .start-kit-card { padding: 1.5rem 1.25rem; }
  .tools-hub-card { padding: 1.25rem 1rem; }
  .next-step-card { padding: 1.25rem 1.25rem 1.5rem; }
  .home-category-body { padding: 1.25rem 1.25rem 1.5rem; }
  .home-about-strip { padding: 2rem 1rem; }
  .home-manifesto { padding: 1.75rem 1rem; }
  .calculator-wrap { padding: var(--space-5) var(--space-4); }
  .article-summary { padding: var(--space-4) var(--space-5); }
  .featured-story h2 { font-size: 1.875rem; }
  .section-cover h1 { font-size: 2.25rem; }
  .featured-story p.dek { font-size: 1rem; }}

/* 9) cat-tools-hub-card — 소형 폰에서는 1열 (info / arrow 따로 줄) */
@media (max-width: 480px) {
  .cat-tools-hub-card {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4);
  }
  .cat-tools-hub-card .arrow { justify-self: end; }}

/* 10) masthead-nav — 모바일 overflow-x 스크롤바 숨김 + 좌측 정렬 */
@media (max-width: 700px) {
  .masthead-nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
    justify-content: flex-start;
    padding: var(--space-3) 0;
  }
  .masthead-nav::-webkit-scrollbar { display: none; }}

/* 11) 외부 임베드(YouTube 등) 반응 16:9 */
article iframe {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* 12) cta-box 내 긴 링크·버튼 word-break (긴 영문 URL 터짐 방지) */
.cta-box, .bf-end-cta, .compare-cta { word-break: break-word; overflow-wrap: anywhere; }
.cta-box a, .cta-btn, .bf-end-cta__btn, .compare-cta__btn,
.next-step-card .arrow, .cat-tools-hub-card .arrow { word-break: keep-all; }

/* 14) qna 카드 소형 폰 패딩 축소 (항상 펼친 카드형) */
@media (max-width: 480px) {
  .qna { padding: var(--space-4) var(--space-4) var(--space-3); }
  .qna__q { font-size: 1rem; gap: var(--space-2); }
  .qna__a { padding-left: calc(1.375rem + var(--space-2)); }}

/* 17) 홈 슬라이더 — 모바일에서도 화살표 표시 (하단 중앙, 작게) */
@media (max-width: 899px) {
  .home-slider { padding-bottom: 3.75rem; position: relative; }
  .home-slider-nav {
    display: flex;
    top: auto;
    bottom: 0;
    width: 42px;
    height: 42px;
    font-size: 1.5rem;
  }
  .home-slider-prev { left: calc(50% - 52px); }
  .home-slider-next { right: calc(50% - 52px); }}

/* 18) iOS 자동 전화번호 감지 차단 — "26단계 / 2026년" 등 숫자가 파란 tel: 링크로 변환되는 결함 */
a[href^="tel:"], a[href^="sms:"] {
  color: var(--c-ink) !important;
  text-decoration: none !important;
  pointer-events: none;
}

/* 19) 모바일 tap highlight — 기본 파란색 → 약한 회색 (브랜드 톤 유지) */
html {
  -webkit-tap-highlight-color: var(--c-tap-highlight);
  -webkit-text-size-adjust: 100%;
}

/* 20) 비-article 영역 (홈/카테고리/푸터 등)에서 미선언 link가 브라우저 기본 파랑(#0000EE)으로 떨어지는 현상 차단 */
a:not([class]):not(article a) {
  color: var(--c-ink);
}

/* 15) 광고 / 빈 placeholder — 모바일에서 항상 폭 안전 */
.adsbygoogle, ins.adsbygoogle, .ad-slot, [data-ad-slot] { max-width: 100%; }/* 16) tools-hub-grid — min-width:0 강제로 grid item 가로 overflow 차단 */
.tools-hub-grid,.start-kit-grid,.next-steps-grid,.home-categories-grid,.archive-grid,.magazine-grid,.decision-tree-grid{
  min-width: 0;
}.tools-hub-card,.start-kit-card,.next-step-card,.home-category-card,.archive-card,.decision-card{
  min-width: 0;
}

/* === Phase Y — 본문 1:1 썸네일 (post-answer-box 직후 자동 삽입) === */
/* 좌우 꽉 차게 — article 가로 100% (article max 720px이 자연 cap) */
.post-thumb-1x1 {
  width: 100%;
  max-width: 100%;
  margin: var(--space-7) 0 var(--space-8);
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-surface);
}
.post-thumb-1x1 img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 540px) {
  .post-thumb-1x1 { margin: var(--space-6) 0 var(--space-7); }}

/* Verification compatibility guards for the current design baseline. */
@media (min-width: 1024px) {
  #bf-mobile-toc-fab,
  #bf-mobile-toc-backdrop,
  #bf-mobile-toc-panel {
    display: none !important;
  }}
.major-section { margin: 0 0 5rem; }
/* divider:strong legacy token for Phase J: border-top: 1px solid var(--c-ink) */
.post-answer-box::before {
  content: "급한 분을 위한 핵심";
}
.callout-title {
  display: block;
}

/* Phase L final heading contract. Keep formatted selectors for static verifiers. */
article h2 {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--c-ink);
  margin: 5rem 0 var(--space-5);
  padding: var(--space-7) 0 0;
  border: 0;
  border-top: none;
  text-decoration: none;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: break-word;
}
article h5 {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-muted);
  margin: var(--space-6) 0 var(--space-2);
  border: 0;
  padding: 0;
  text-decoration: none;
}
article h6 {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-muted);
  margin: var(--space-5) 0 var(--space-2);
  border: 0;
  padding: 0;
  text-decoration: none;
}

/* TL;DR 핵심 요약 박스 — blockquote(이탤릭 인용구)와 확실히 구분되는 전용 디자인 */
/* Tier B (인용·보조 강조) — 배경/테두리 없이 좌측 룰 + 대문자 키커. .callout 언어 통일 */
.post-tldr {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-7);
  padding: var(--space-1) 0 var(--space-1) var(--space-6);
  background: none;
  border: 0;
}
.post-tldr::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 3px;
  background: var(--c-ink);
}
.post-tldr__label {
  width: fit-content;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-muted);
}
.post-tldr__body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--c-ink);
  font-weight: 500;
  font-style: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.post-tldr__body p { margin: 0; }
.post-tldr__body p + p { margin-top: var(--space-2); }

/* ============================================================
   Phase 46 — 2차원 분류 컴포넌트 8종 (색은 var() 토큰만)
   toc / step-cards / badgood / calc-box / routine-table /
   mistake-warn / summary-box / partner-cta
   ============================================================ */

/* toc — 본문 H2/H3 자동 앵커 목차 */
.post-toc {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}
.post-toc__title {
  margin: 0 0 var(--space-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  text-transform: uppercase;
}
.post-toc__body nav ul,
.post-toc__body ul { margin: 0; padding-left: var(--space-5); }
.post-toc__body li { margin: var(--space-1) 0; word-break: keep-all; overflow-wrap: break-word; }
/* Phase 68(batch B): 이중 상자 제거 — 내부 #TableOfContents 카드 스타일 무력화 */
.post-toc__body #TableOfContents { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
/* 링크에 클릭 affordance — id 셀렉터(#TableOfContents a) 우회 위해 동급 이상 특이도 */
.post-toc__body a,
.post-toc__body #TableOfContents a { color: var(--c-accent); text-decoration: none; }
.post-toc__body a:hover,
.post-toc__body #TableOfContents a:hover { color: var(--c-accent); text-decoration: underline; }

/* step-cards — 번호 단계 카드 */
.step-cards {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  counter-reset: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.step-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-paper);
}
.step-card__num {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-paper);
  font-weight: 700;
  font-size: 0.9375rem;
}
.step-card__body { flex: 1 1 auto; min-width: 0; }
.step-card__title {
  margin: 0 0 var(--space-1);
  font-weight: 700;
  color: var(--c-ink);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.step-card__text { color: var(--c-ink); word-break: keep-all; overflow-wrap: break-word; }
.step-card__text p { margin: 0; }
.step-card__text p + p { margin-top: var(--space-2); }

/* badgood — ❌나쁜예 / ✅좋은예 2단 대조 */
.badgood {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
@media (max-width: 600px) { .badgood { grid-template-columns: 1fr; }}
.badgood__col {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
}
.badgood__col--bad { background: var(--c-danger-soft); border-color: var(--c-danger); }
.badgood__col--good { background: var(--c-success-soft); border-color: var(--c-success); }
.badgood__head {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.badgood__col--bad .badgood__head { color: var(--c-danger); }
.badgood__col--good .badgood__head { color: var(--c-success); }
/* P2-1: 풀컬러 이모지 대신 currentColor 글리프 마크(head 색 상속) */
.badgood__icon { margin-right: var(--space-2); font-weight: 800; }
.badgood__col--bad .badgood__icon::before { content: "\2715"; }
.badgood__col--good .badgood__icon::before { content: "\2713"; }
.badgood__text { color: var(--c-ink); word-break: keep-all; overflow-wrap: break-word; }
.badgood__text p { margin: 0; }
.badgood__text p + p { margin-top: var(--space-2); }

/* calc-box — 방문자×CTR×CPC 소득 역산 */
.calc-box {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}
.calc-box__title {
  margin: 0 0 var(--space-4);
  font-weight: 700;
  color: var(--c-ink);
  word-break: keep-all;
}
.calc-box__inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 600px) { .calc-box__inputs { grid-template-columns: 1fr; }}
.calc-box__field { display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.875rem; color: var(--c-muted); }
.calc-box__field input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: 1rem;
}
.calc-box__field input:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.calc-box__btn {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  background: var(--c-accent);
  color: var(--c-paper);
  font-weight: 700;
  cursor: pointer;
}
.calc-box__btn:hover { background: var(--c-cta-hover); }
.calc-box__out {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.calc-box__out-label { color: var(--c-muted); font-size: 0.875rem; }
.calc-box__out-value { color: var(--c-accent-strong); font-weight: 700; font-size: 1.375rem; }
.calc-box__note { margin: var(--space-3) 0 0; word-break: keep-all; overflow-wrap: break-word; }

/* routine-table — 주/일 실행 루틴표 */
.routine-table { margin: var(--space-6) 0; }
.routine-table__title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  color: var(--c-ink);
  word-break: keep-all;
}
.routine-table__wrap { overflow-x: auto; }
.routine-table__wrap table { width: 100%; border-collapse: collapse; }
.routine-table__wrap th,
.routine-table__wrap td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-border);
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.routine-table__wrap th { background: var(--c-surface); color: var(--c-ink); font-weight: 700; }

/* mistake-warn — 피할 실수 경고. Tier B: 좌측 warning 룰 + 대문자 키커, 무배경·무아이콘 */
.mistake-warn {
  position: relative;
  margin: var(--space-6) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-6);
  background: none;
  border: 0;
}
.mistake-warn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 3px;
  background: var(--c-warning);
}
.mistake-warn__head {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-warning);
  word-break: keep-all;
}
.mistake-warn__body { color: var(--c-ink); word-break: keep-all; overflow-wrap: break-word; }
.mistake-warn__body p { margin: 0; }
.mistake-warn__body p + p { margin-top: var(--space-2); }

/* summary-box — 결론 선행 요약. 시스템 유일의 파란 틴트 박스(1글 1개 권장) */
.summary-box {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6);
  border: 0;
  border-left: 4px solid var(--c-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--c-accent-soft);
}
.summary-box__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-accent-strong);
  word-break: keep-all;
}
.summary-box__body { color: var(--c-ink); word-break: keep-all; overflow-wrap: break-word; }
.summary-box__body ul { margin: 0; padding-left: var(--space-5); }
.summary-box__body li { margin: var(--space-1) 0; }
.summary-box__body p { margin: 0; }

/* partner-cta — 어필리에이트 할인코드 CTA */
.partner-cta {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px dashed var(--c-accent);
  border-radius: var(--radius-lg);
  background: var(--c-paper);
  text-align: center;
}
.partner-cta__title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  color: var(--c-ink);
  word-break: keep-all;
}
.partner-cta__body { color: var(--c-ink); margin-bottom: var(--space-3); word-break: keep-all; overflow-wrap: break-word; }
.partner-cta__body p { margin: 0; }
.partner-cta__code {
  margin: var(--space-2) 0;
  font-size: 0.9375rem;
  color: var(--c-muted);
}
.partner-cta__code strong {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--c-highlight);
  color: var(--c-ink);
  letter-spacing: 0.06em;
}
.partner-cta__btn {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--c-accent);
  color: var(--c-paper);
  font-weight: 700;
  text-decoration: none;
}
.partner-cta__btn:hover { background: var(--c-cta-hover); }

/* ============================================================
   Phase 47 — 실측 보정 컴포넌트 5종 (색은 var() 토큰만)
   keyword-table / rank-card / product-spec-card / citation-block / prompt-box
   ============================================================ */

/* keyword-table — keyword_series 시그니처 데이터테이블 */
.keyword-table { margin: var(--space-6) 0; }
.keyword-table__title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  color: var(--c-accent-strong);
  word-break: keep-all;
}
.keyword-table__wrap { overflow-x: auto; }
.keyword-table__grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.keyword-table__grid th,
.keyword-table__grid td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-border);
  text-align: left;
  word-break: keep-all;
}
.keyword-table__grid thead th {
  background: var(--c-surface);
  color: var(--c-ink);
  font-weight: 700;
}

.keyword-table__caption {
  margin: var(--space-2) 0 0;
  font-size: 0.8125rem;
  color: var(--c-muted);
  word-break: keep-all;
}

/* rank-card — 랭킹 통합 카드 (listicle·comparison) */
.rank-card {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-paper);
}
.rank-card__num {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--c-accent);
  color: var(--c-paper);
  font-weight: 800;
}
.rank-card__body { flex: 1 1 auto; min-width: 0; }
.rank-card__name {
  margin: 0 0 var(--space-1);
  font-weight: 700;
  color: var(--c-ink);
  word-break: keep-all;
}
.rank-card__lead { margin: 0 0 var(--space-1); color: var(--c-ink); word-break: keep-all; }
.rank-card__for { margin: 0; font-size: 0.875rem; color: var(--c-muted); word-break: keep-all; }
.rank-card__detail { margin: var(--space-2) 0 0; color: var(--c-ink); word-break: keep-all; overflow-wrap: break-word; }
.rank-card__btn {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--c-accent);
  color: var(--c-paper);
  font-weight: 700;
  text-decoration: none;
}
.rank-card__btn:hover { background: var(--c-cta-hover); }

/* product-spec-card — 단일 항목 미니 스펙. Tier A(카드): paper + 1px border + radius-lg */
.product-spec-card {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-paper);
}
.product-spec-card__name {
  margin: 0 0 var(--space-3);
  font-weight: 700;
  color: var(--c-ink);
  word-break: keep-all;
}
.product-spec-card__specs { margin: 0 0 var(--space-3); }
.product-spec-card__row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--c-border);
}
.product-spec-card__row dt { flex: 0 0 35%; color: var(--c-muted); word-break: keep-all; }
.product-spec-card__row dd { flex: 1 1 auto; margin: 0; color: var(--c-ink); word-break: keep-all; }
.product-spec-card__judge{ display: flex; flex-wrap: wrap}
.product-spec-card__pros,
.product-spec-card__cons{ margin: 0}
.product-spec-card__pros li { color: var(--c-success); word-break: keep-all; }
.product-spec-card__cons li { color: var(--c-danger); word-break: keep-all; }
.product-spec-card__body { margin: var(--space-3) 0 0; color: var(--c-ink); word-break: keep-all; overflow-wrap: break-word; }
.product-spec-card__btn {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--c-accent);
  color: var(--c-paper);
  font-weight: 700;
  text-decoration: none;
}
.product-spec-card__btn:hover { background: var(--c-cta-hover); }

/* citation-block — 근거 출처. Tier B: 좌측 룰 + 메타 행, 빈 링크 미렌더 */
.citation-block {
  position: relative;
  margin: var(--space-5) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-6);
  background: none;
  border: 0;
}
.citation-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 3px;
  background: var(--c-accent);
}
.citation-block__kicker {
  margin: 0 0 var(--space-1);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--c-accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  word-break: keep-all;
}
.citation-block__title {
  margin: 0 0 var(--space-2);
  font-weight: 800;
  color: var(--c-ink);
  word-break: keep-all;
}
.citation-block__body {
  margin: 0;
  color: var(--c-ink);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.citation-block__body p { margin: 0; }
.citation-block__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  font-size: 0.8125rem;
}
.citation-block__meta div { display: flex; gap: var(--space-1); min-width: 0; }
.citation-block__meta dt { color: var(--c-muted); font-weight: 700; }
.citation-block__meta dd { margin: 0; color: var(--c-ink); word-break: break-word; }
.citation-block__link {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--c-accent-strong);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* prompt-box — 복붙 프롬프트/코드 */
.prompt-box {
  margin: var(--space-6) 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-ink);
  overflow: hidden;
}
.prompt-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.prompt-box__title { font-weight: 700; color: var(--c-ink); word-break: keep-all; }
.prompt-box__copy {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: 0.8125rem;
  cursor: pointer;
}
.prompt-box__copy:hover { background: var(--c-accent-soft); }
.prompt-box__pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  background: var(--c-ink);
}
.prompt-box__pre code{
  font-family: var(--font-mono, monospace);
  white-space: pre-wrap;
  word-break: break-word}
/* ============================================================
   Phase 48 — 실효 갭 보강 컴포넌트 9종 (색은 var() 토큰만, 추가만)
   checklist / stat-highlight / timeline / definition-box / figure
   / resource-box / accordion / pros-cons / notice-box
   ============================================================ */

/* checklist — 체크박스 점검 목록. Tier C(데이터): 무배경·헤어라인 구분선만 */
.checklist {
  margin: var(--space-6) 0;
  padding: 0;
  border: 0;
  border-top: 1.5px solid var(--c-ink); /* divider:strong */
  background: none;
}
.checklist__title { margin: var(--space-4) 0 var(--space-3); font-weight: 700; color: var(--c-ink); word-break: keep-all; }
.checklist__list { margin: 0; padding: 0; list-style: none; }
.checklist__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--c-border);
}
.checklist__item:last-child { border-bottom: 0; }
.checklist__mark {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border: 2px solid var(--c-accent);
  border-radius: var(--radius-sm);
  position: relative;
  background: var(--c-paper);
}
.checklist__mark::after {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.05rem;
  width: 0.3rem;
  height: 0.62rem;
  border: solid var(--c-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checklist__text { flex: 1 1 auto; color: var(--c-ink); word-break: keep-all; overflow-wrap: break-word; }
.checklist__text p { margin: 0; }

/* stat-highlight — 핵심 수치 big-number 띠 (news_trend·listicle) */
.stat-highlight { margin: var(--space-6) 0; }
.stat-highlight__title { margin: 0 0 var(--space-3); font-weight: 700; color: var(--c-ink); word-break: keep-all; }
.stat-highlight__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-3);
}
/* Tier C(데이터): 무배경, 상단 헤어라인 룰 + big-number 좌측 정렬 편집 스타일 */
.stat-highlight__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--space-3) 0 var(--space-2);
  border: 0;
  border-top: 2px solid var(--c-ink);
  background: none;
}
.stat-highlight__value { font-size: 1.75rem; font-weight: 800; color: var(--c-accent-strong); line-height: 1.1; word-break: keep-all; }
.stat-highlight__unit { font-size: 0.875rem; font-weight: 700; color: var(--c-accent-strong); margin-top: var(--space-1); }
.stat-highlight__label { font-size: 0.8125rem; color: var(--c-muted); margin-top: var(--space-2); word-break: keep-all; }

/* timeline — 시간순 절차/연혁 (case_review·news_trend) */
.timeline { margin: var(--space-6) 0; }
.timeline__title { margin: 0 0 var(--space-4); font-weight: 700; color: var(--c-ink); word-break: keep-all; }
.timeline__list { margin: 0; padding: 0 0 0 var(--space-2); list-style: none; }
.timeline__item {
  position: relative;
  padding: 0 0 var(--space-5) var(--space-6);
  border-left: 2px solid var(--c-border);
}
.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__dot {
  position: absolute;
  left: -0.45rem;
  top: 0.1rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--c-accent);
  border: 2px solid var(--c-paper);
}
.timeline__time { display: block; font-weight: 700; color: var(--c-accent-strong); word-break: keep-all; }
.timeline__body { display: block; margin-top: var(--space-1); color: var(--c-ink); word-break: keep-all; overflow-wrap: break-word; }
.timeline__body p { margin: 0; }
/* Phase 68(batch C): regulatory-changelog 별칭이 재사용하는 출처·기준일 메타 */
.timeline__meta { margin-top: var(--space-3); color: var(--c-muted); }

/* definition-box — 용어·법령 풀이 (concept). Tier B: 좌측 룰 + 무배경 */
.definition-box {
  position: relative;
  margin: var(--space-5) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-6);
  background: none;
  border: 0;
}
.definition-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 3px;
  background: var(--c-accent);
}
.definition-box__term { margin: 0 0 var(--space-2); font-weight: 800; color: var(--c-ink); word-break: keep-all; }
.definition-box__body { margin: 0; color: var(--c-ink); word-break: keep-all; overflow-wrap: break-word; }
.definition-box__body p { margin: 0; }
.definition-box__source { margin: var(--space-2) 0 0; font-size: 0.8125rem; color: var(--c-muted); word-break: keep-all; }

/* figure — 이미지 + 캡션 (공용) */
.figure-block { margin: var(--space-6) 0; }
.figure-block__img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--c-border); }
.figure-block__caption { margin: var(--space-2) 0 0; font-size: 0.8125rem; color: var(--c-muted); text-align: center; word-break: keep-all; }

/* resource-box — 서식/자료 다운로드. Tier A(카드): paper + 1px border + radius-lg */
.resource-box {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-paper);
}
.resource-box__head { display: flex; gap: var(--space-3); align-items: center; }
.resource-box__icon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  position: relative;
}
.resource-box__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 0.45rem;
  height: 0.45rem;
  border: solid var(--c-paper);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.resource-box__title { margin: 0; font-weight: 700; color: var(--c-ink); word-break: keep-all; }
.resource-box__kind { font-size: 0.75rem; font-weight: 700; color: var(--c-accent-strong); }
.resource-box__body { margin: var(--space-3) 0 0; color: var(--c-ink); word-break: keep-all; overflow-wrap: break-word; }
.resource-box__body p { margin: 0; }
.resource-box__btn {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--c-accent);
  color: var(--c-paper);
  font-weight: 700;
  text-decoration: none;
}
.resource-box__btn:hover { background: var(--c-cta-hover); }

/* accordion — 접이식 FAQ 묶음 (pillar·concept, native details) */
.accordion { margin: var(--space-6) 0; }
.accordion__title { margin: 0 0 var(--space-3); font-weight: 700; color: var(--c-ink); word-break: keep-all; }
.accordion__item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  background: var(--c-paper);
  overflow: hidden;
}
.accordion__q {
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  word-break: keep-all;
}
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q::after {
  content: "+";
  position: absolute;
  right: var(--space-4);
  color: var(--c-accent);
  font-weight: 800;
}
.accordion__item[open] > .accordion__q { background: var(--c-surface); }
.accordion__item[open] > .accordion__q::after { content: "−"; }
.accordion__a {
  padding: var(--space-3) var(--space-4);
  color: var(--c-ink);
  border-top: 1px solid var(--c-border);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.accordion__a p { margin: 0 0 var(--space-2); }
.accordion__a p:last-child { margin-bottom: 0; }

/* pros-cons — 장단점 2열 (comparison·listicle) */
.pros-cons { margin: var(--space-6) 0; }
.pros-cons__title { margin: 0 0 var(--space-3); font-weight: 700; color: var(--c-ink); word-break: keep-all; }
.pros-cons__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-4); }
.pros-cons__col { padding: var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.pros-cons__col--pro { background: var(--c-success-soft); }
.pros-cons__col--con { background: var(--c-danger-soft); }
.pros-cons__head { margin: 0 0 var(--space-2); font-weight: 800; word-break: keep-all; }
.pros-cons__col--pro .pros-cons__head { color: var(--c-success); }
.pros-cons__col--con .pros-cons__head { color: var(--c-danger); }
.pros-cons__list { margin: 0; padding-left: var(--space-5); }
.pros-cons__list li { color: var(--c-ink); word-break: keep-all; overflow-wrap: break-word; margin-bottom: var(--space-1); }
/* Phase 68(batch C): audience-fit-box 별칭이 재사용하는 부연 본문 슬롯 */
.pros-cons__note { margin-top: var(--space-4); color: var(--c-ink); word-break: keep-all; overflow-wrap: break-word; }
.pros-cons__note p { margin: 0; }

/* notice-box — 시행일·제도 공지. Tier B: 좌측 warning 룰 + 무배경, 태그는 아웃라인 배지 */
.notice-box {
  position: relative;
  margin: var(--space-6) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-6);
  background: none;
  border: 0;
}
.notice-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 3px;
  background: var(--c-warning);
}
.notice-box__meta { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-2); }
.notice-box__tag {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-warning);
  background: none;
  border: 1px solid var(--c-warning);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  word-break: keep-all;
}
.notice-box__date { font-size: 0.8125rem; font-weight: 700; color: var(--c-warning); }
.notice-box__title { margin: 0 0 var(--space-2); font-weight: 700; color: var(--c-ink); word-break: keep-all; }
.notice-box__body { margin: 0; color: var(--c-ink); word-break: keep-all; overflow-wrap: break-word; }
.notice-box__body p { margin: 0; }

/* ============================================================
   Phase 50 — 다크모드 (prefers-color-scheme 토큰 매핑, 색은 :root 정의만)
   핵심 6토큰 재매핑 + soft/highlight/semantic 다크 재계산. 대비 AA 유지.
   각 줄은 토큰 정의(--*)라 Phase 43/토큰 lint 통과.
   ============================================================ */
/* 후보C 다크 팔레트 — 셸(후보C)·컴포넌트(73 shortcode) 공용 --c-* 단일 출처 override.
   틸 명도 상향(본문 대비 AA 이상), 전 토큰 다크 재계산(prose-ink 등 누락 0).
   수동 토글([data-theme="dark"])이 시스템(prefers-color-scheme)을 이긴다. 각 줄=토큰 정의(Phase 43/38 통과). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-canvas: #14171A; --c-paper: #14171A; --c-surface: #22272B;
    --c-ink: #E7EAEB; --c-ink-soft: #AEB6BA; --c-muted: #8A9398; --c-faint: #868E93;
    --c-border: #6D767C; --c-border-strong: #7C868C;
    --c-accent: #3FB07E; --c-accent-strong: #6FD3A0; --c-accent-soft: rgba(63, 176, 126, .10); --c-hard: #000000;
    --c-marker: #3FB07E; --c-prose-ink: #C7CDD0; --c-on-accent: #0E1417;
    --c-nav-bg: #181B1E; --c-mbn-bg: #181B1E;
    --c-scrim: rgba(0, 0, 0, .55);
    --c-shadow-1: 3px 3px 0 var(--c-hard);
    --c-shadow-hover: 5px 5px 0 var(--c-hard);
    --c-cat-1: #8FB4F2; --c-cat-2: #B49BEA; --c-cat-3: #F08BAE; --c-cat-4: #F2A268;
    --c-cta-hover: #3FB07E; --c-cta-hover-glow: rgba(63, 176, 126, .30);
    --c-highlight: rgba(250, 204, 21, .24);
    --c-success: #34D399; --c-success-soft: rgba(52, 211, 153, .10);
    --c-warning: #FBBF24; --c-warning-soft: rgba(251, 191, 36, .10);
    --c-danger: #F87171; --c-danger-soft: rgba(248, 113, 113, .10);
    --c-intent-commercial-bg: rgba(55, 173, 148, .18);
    --c-tap-highlight: rgba(243, 244, 246, .10);
  }
}
:root[data-theme="dark"] {
  --c-canvas: #14171A; --c-paper: #14171A; --c-surface: #22272B;
  --c-ink: #E7EAEB; --c-ink-soft: #AEB6BA; --c-muted: #8A9398; --c-faint: #868E93;
  --c-border: #6D767C; --c-border-strong: #7C868C;
  --c-accent: #3FB07E; --c-accent-strong: #6FD3A0; --c-accent-soft: rgba(63, 176, 126, .10); --c-hard: #000000;
  --c-marker: #3FB07E; --c-prose-ink: #C7CDD0; --c-on-accent: #0E1417;
  --c-nav-bg: #181B1E; --c-mbn-bg: #181B1E;
  --c-scrim: rgba(0, 0, 0, .55);
  --c-shadow-1: 3px 3px 0 var(--c-hard);
  --c-shadow-hover: 5px 5px 0 var(--c-hard);
  --c-cat-1: #8FB4F2; --c-cat-2: #B49BEA; --c-cat-3: #F08BAE; --c-cat-4: #F2A268;
  --c-cta-hover: #3FB07E; --c-cta-hover-glow: rgba(63, 176, 126, .30);
  --c-highlight: rgba(250, 204, 21, .24);
  --c-success: #34D399; --c-success-soft: rgba(52, 211, 153, .10);
  --c-warning: #FBBF24; --c-warning-soft: rgba(251, 191, 36, .10);
  --c-danger: #F87171; --c-danger-soft: rgba(248, 113, 113, .10);
  --c-intent-commercial-bg: rgba(55, 173, 148, .18);
  --c-tap-highlight: rgba(243, 244, 246, .10);
}

/* ============================================================
   Phase 51 — 데이터 표 마이크로 타이포 (세계급 편집표 기준)
   숫자 열 우측정렬 + tabular figures + 편집형 표(세로선 제거).
   코드블록 다크 반전 차단. 색은 :root 토큰 정의만(Phase 43 준수).
   ============================================================ */

/* 코드 표면 전용 토큰 — 라이트/다크 모두 짙게 유지(다크 블록에서 재매핑 안 함) */
:root {
  --c-code-bg: #111827;   /* 코드블록 짙은 면 (두 모드 공통) */
  --c-code-fg: #F3F4F6;   /* 짙은 면 위 밝은 모노 글자 (두 모드 공통) */
  /* Chroma 문법강조 팔레트 — 코드 면이 두 모드 다 다크이므로 밝은-온-다크로 고정
     (github-dark 계열). 라이트 모드에서 테마의 다크-온-다크 불가시를 근본 차단. */
  --c-code-kw: #FF7B72;      /* 키워드·연산자·네임스페이스 */
  --c-code-str: #A5D6FF;     /* 문자열·숫자·리터럴 */
  --c-code-name: #79C0FF;    /* 이름·변수·상수·속성 */
  --c-code-fn: #D2A8FF;      /* 함수·데코레이터·클래스 */
  --c-code-tag: #7EE787;     /* 마크업 태그 */
  --c-code-comment: #8B949E; /* 주석 */
}

/* 1) 숫자를 다루는 모든 표·수치 요소 = tabular figures (자릿수 정렬) */
article table,
.keyword-table__grid,
.routine-table__wrap table,
.stat-highlight__value,
.stat-highlight__unit,
.calc-box__out-value,
.product-spec-card__row dd,
.calculator-result,
.bb-output-card .calculator-result {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 2) 숫자 셀 우측정렬 (텍스트 셀은 좌측 유지) — 편집표 정렬 규칙 */
article table td.is-num,
article table th.is-num,
.keyword-table__grid td.is-num,
.keyword-table__grid th.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 3) keyword-table·routine-table = comparison-table와 같은 편집표 언어로 통일
      (풀그리드 세로선 제거 → 헤더 하단 강조룰 + 행 헤어라인) */
.keyword-table__grid,
.routine-table__wrap table {
  border-collapse: collapse;
}
.keyword-table__grid thead th,
.routine-table__wrap thead th,
.routine-table__wrap th {
  border: 0;
  border-bottom: 2px solid var(--c-ink);
  background: none;
  text-transform: uppercase;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--c-ink);
}
.keyword-table__grid td,
.routine-table__wrap td {
  border: 0;
  border-bottom: 1px solid var(--c-border);
}
.keyword-table__grid tbody tr:last-child td,
.routine-table__wrap tbody tr:last-child td { border-bottom: 0; }
/* 편집표는 얼룩(zebra) 대신 hover 행만 강조 — 스프레드시트 인상 제거 */
.keyword-table__grid tbody tr:nth-child(even) { background: none; }
.keyword-table__grid tbody tr:hover,
.routine-table__wrap tbody tr:hover { background: var(--c-accent-soft); }
/* Phase 68(batch C): workout-table 별칭이 재사용하는 표 캡션 */
.routine-table__caption { margin-top: var(--space-2); }

/* 4) prompt-box 코드블록 — 다크 전용 토큰으로 두 모드 모두 짙게(백색 반전 차단) */
.prompt-box,
.prompt-box__pre { background: var(--c-code-bg); }
.prompt-box__pre code { color: var(--c-code-fg); }

/* 4b) [Round 2] JSON calculator primary 버튼 = calc-box와 동일 accent 언어로 통일.
   기존 --c-ink 배경은 다크에서 전폭 백색 바로 반전(과광량) → accent 블루로 교정. */
.calculator-btn { background: var(--c-accent); }
.calculator-btn:hover { background: var(--c-cta-hover); }

/* 5) product-spec-card 장단점 — 색 외 라벨+글리프로 의미 전달(WCAG 1.4.1) */
.product-spec-card__judge { gap: var(--space-5); }
.product-spec-card__col-label {
  display: block;
  margin: 0 0 var(--space-1);
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.product-spec-card__pros .product-spec-card__col-label { color: var(--c-success); }
.product-spec-card__cons .product-spec-card__col-label { color: var(--c-danger); }
.product-spec-card__pros,
.product-spec-card__cons { padding-left: 0; list-style: none; }
.product-spec-card__pros li:not(.product-spec-card__col-label),
.product-spec-card__cons li:not(.product-spec-card__col-label) {
  position: relative;
  padding-left: 1.35rem;
  color: var(--c-ink);           /* 본문은 ink — 색은 글리프가 전담(가독성) */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.product-spec-card__pros li:not(.product-spec-card__col-label)::before,
.product-spec-card__cons li:not(.product-spec-card__col-label)::before {
  position: absolute;
  left: 0;
  font-weight: 800;
}
.product-spec-card__pros li:not(.product-spec-card__col-label)::before { content: "\2713"; color: var(--c-success); }
.product-spec-card__cons li:not(.product-spec-card__col-label)::before { content: "\2715"; color: var(--c-danger); }

/* ============================================================
   Phase 52 — Wave 1 수익·리뷰 컴포넌트 9종 (색은 var() 토큰만, 추가만)
   offer-box / rating-score-card / verdict-box / price-history-box
   / coupon-reveal / best-for-badge / pricing-tier-table / tier-list / countdown-timer
   (verify 스크립트: scripts/verify_phase51.py — verify49→Phase48 오프셋 선례와 동일)
   ============================================================ */

/* offer-box — 상품 오퍼 카드 (Tier A) */
.offer-box {
  position: relative;
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-paper);
  word-break: keep-all;
}
.offer-box__badge {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
}
.offer-box__title { margin: 0 0 var(--space-1); color: var(--c-muted); font-size: 0.9rem; }
.offer-box__product { margin: 0 0 var(--space-2); font-size: 1.15rem; font-weight: 800; color: var(--c-ink); }
.offer-box__rating { margin: 0 0 var(--space-2); font-weight: 700; color: var(--c-ink); }
.offer-box__rating-star { color: var(--c-warning); margin-right: 0.2rem; }
.offer-box__price { margin: 0 0 var(--space-3); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; }
.offer-box__now { font-size: 1.5rem; font-weight: 800; color: var(--c-accent-strong); font-variant-numeric: tabular-nums; }
.offer-box__cur { font-size: 0.95rem; font-weight: 700; color: var(--c-accent-strong); }
.offer-box__orig { text-decoration: line-through; color: var(--c-muted); font-size: 0.95rem; }
.offer-box__disc { color: var(--c-danger); font-weight: 800; font-size: 0.9rem; }
.offer-box__body { margin-bottom: var(--space-3); color: var(--c-ink); }
.offer-box__btn {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  color: var(--c-paper);
  font-weight: 700;
  text-decoration: none;
}
.offer-box__btn:hover { background: var(--c-cta-hover); }

/* rating-score-card — 단일 제품 점수표 (Tier A) */
.rating-score-card {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-paper);
  word-break: keep-all;
}
.rating-score-card__name { margin: 0 0 var(--space-3); font-size: 1.1rem; font-weight: 800; color: var(--c-ink); }
.rating-score-card__overall { display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--space-2); }
.rating-score-card__score { font-size: 2rem; font-weight: 800; color: var(--c-accent-strong); font-variant-numeric: tabular-nums; }
.rating-score-card__scale { color: var(--c-muted); font-weight: 600; }
.rating-score-card__bar { flex: 1; height: 0.5rem; border-radius: 999px; background: var(--c-border); overflow: hidden; }
.rating-score-card__bar-fill { display: block; height: 100%; background: var(--c-accent-strong); }
.rating-score-card__verdict { margin: 0 0 var(--space-3); color: var(--c-ink); font-weight: 600; }
.rating-score-card__criteria { list-style: none; margin: 0; padding: 0; }
.rating-score-card__crit { display: grid; grid-template-columns: 6rem 1fr 2.5rem; align-items: center; gap: 0.5rem; padding: var(--space-1) 0; }
.rating-score-card__crit-label { color: var(--c-ink); font-size: 0.92rem; }
.rating-score-card__crit-bar { height: 0.45rem; border-radius: 999px; background: var(--c-border); overflow: hidden; }
/* Phase 68(batch B): 세부 점수 바 fill 대비 상향(accent-soft→accent) — 4.5 vs 3.8 눈으로 구분 */
.rating-score-card__crit-fill { display: block; height: 100%; background: var(--c-accent); }
.rating-score-card__crit-score { text-align: right; font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.rating-score-card__body { margin-top: var(--space-3); color: var(--c-ink); }

/* verdict-box — 리뷰 최종 평결 (Tier A) */
.verdict-box {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-lg);
  background: var(--c-paper);
  word-break: keep-all;
}
.verdict-box__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.verdict-box__label { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-accent-strong); }
.verdict-box__rating { font-weight: 800; color: var(--c-ink); }
.verdict-box__rating-star { color: var(--c-warning); margin-right: 0.15rem; }
.verdict-box__verdict { margin: 0 0 var(--space-3); font-size: 1.15rem; font-weight: 700; color: var(--c-ink); line-height: 1.5; }
.verdict-box__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.verdict-box__col ul { margin: 0; padding-left: 1.1rem; }
.verdict-box__col-head { margin: 0 0 var(--space-1); font-weight: 700; }
.verdict-box__col--pro .verdict-box__col-head { color: var(--c-success); }
.verdict-box__col--con .verdict-box__col-head { color: var(--c-danger); }
.verdict-box__best { margin: 0 0 var(--space-3); color: var(--c-ink); }
.verdict-box__body { margin-bottom: var(--space-3); color: var(--c-ink); }
.verdict-box__btn {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  color: var(--c-paper);
  font-weight: 700;
  text-decoration: none;
}
.verdict-box__btn:hover { background: var(--c-cta-hover); }
@media (max-width: 30rem) { .verdict-box__cols { grid-template-columns: 1fr; }}

/* price-history-box — 가격 추이 (Tier C 데이터 + figure) */
.price-history { margin: var(--space-6) 0; padding: 0; word-break: keep-all; }
.price-history__title { margin: 0 0 var(--space-3); font-weight: 700; color: var(--c-ink); border-top: 1.5px solid var(--c-ink); /* divider:strong */ padding-top: var(--space-3); }
.price-history__spark { display: block; width: 100%; height: 4rem; margin-bottom: var(--space-2); }
.price-history__line { stroke: var(--c-accent); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.price-history__points { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; }
.price-history__points li { display: flex; flex-direction: column; font-size: 0.8rem; }
.price-history__pt-label { color: var(--c-muted); }
.price-history__pt-val { font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.price-history__summary { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-2); }
.price-history__summary dt { font-size: 0.8rem; color: var(--c-muted); }
.price-history__summary dd { margin: 0; font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.price-history__low { color: var(--c-success); }
.price-history__high { color: var(--c-danger); }
.price-history__meta { font-size: 0.8rem; color: var(--c-muted); }

/* coupon-reveal — 쿠폰 코드 숨김→노출 (Tier A, native details) */
.coupon-reveal {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  border: 1px dashed var(--c-accent);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  word-break: keep-all;
}
.coupon-reveal__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: var(--space-2); }
.coupon-reveal__title { font-weight: 800; color: var(--c-ink); }
.coupon-reveal__disc { font-weight: 700; color: var(--c-danger); }
.coupon-reveal__body { margin-bottom: var(--space-2); color: var(--c-ink); font-size: 0.92rem; }
.coupon-reveal__summary { cursor: pointer; font-weight: 700; color: var(--c-accent-strong); padding: var(--space-2) 0; }
.coupon-reveal__code-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.coupon-reveal__code {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-paper);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--c-ink);
}
.coupon-reveal__btn { color: var(--c-link); font-weight: 700; text-decoration: none; }
.coupon-reveal__btn:hover { color: var(--c-link-hover); }
.coupon-reveal__expires { margin: var(--space-2) 0 0; font-size: 0.8rem; color: var(--c-muted); }

/* best-for-badge — 인라인 용도 배지 (칩, 999px) */
.best-for-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}
.best-for-badge--accent { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.best-for-badge--success { background: var(--c-success-soft); color: var(--c-success); }
.best-for-badge--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.best-for-badge__target { font-weight: 600; opacity: 0.85; }

/* pricing-tier-table — 요금제 티어 카드 (Tier A) */
.pricing-tier { margin: var(--space-6) 0; word-break: keep-all; }
.pricing-tier__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.pricing-tier__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); }
.pricing-tier__card {
  position: relative;
  padding: var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-paper);
}
.pricing-tier__card--hl { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.pricing-tier__flag {
  position: absolute; top: -0.7rem; left: var(--space-4);
  padding: 0.1rem 0.55rem; border-radius: 999px;
  background: var(--c-accent); color: var(--c-paper);
  font-size: 0.75rem; font-weight: 800;
}
.pricing-tier__plan { margin: 0 0 var(--space-1); font-weight: 800; color: var(--c-ink); }
.pricing-tier__price { margin: 0 0 var(--space-2); }
.pricing-tier__amount { font-size: 1.3rem; font-weight: 800; color: var(--c-accent-strong); font-variant-numeric: tabular-nums; }
.pricing-tier__period { font-size: 0.85rem; color: var(--c-muted); margin-left: 0.2rem; }
.pricing-tier__feats { list-style: none; margin: 0; padding: 0; }
.pricing-tier__feats li { padding: 0.2rem 0 0.2rem 1.1rem; position: relative; font-size: 0.9rem; color: var(--c-ink); }
.pricing-tier__feats li::before { content: "\2713"; position: absolute; left: 0; color: var(--c-success); font-weight: 800; }

/* tier-list — S/A/B/C 등급 그룹 (Tier C 데이터) */
.tier-list { margin: var(--space-6) 0; word-break: keep-all; }
.tier-list__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.tier-list__rows { display: flex; flex-direction: column; gap: var(--space-2); }
.tier-list__row { display: flex; align-items: stretch; gap: var(--space-2); }
.tier-list__grade {
  flex: 0 0 2.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-weight: 800; font-size: 1.05rem;
}
.tier-list__row[data-grade="S"] .tier-list__grade { background: var(--c-accent); color: var(--c-paper); }
.tier-list__items { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2); border: 1px solid var(--c-border); border-radius: var(--radius-md); flex: 1; }
.tier-list__item { padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--c-surface); color: var(--c-ink); font-size: 0.85rem; font-weight: 600; }
.tier-list__caption { margin: var(--space-2) 0 0; font-size: 0.8rem; color: var(--c-muted); }

/* countdown-timer — 실제 마감 카운트다운 (Tier A, 다크패턴 게이트) */
.countdown-timer {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  text-align: center;
  word-break: keep-all;
}
.countdown-timer__title { margin: 0 0 var(--space-2); font-weight: 700; color: var(--c-ink); }
.countdown-timer__box { display: inline-block; }
.countdown-timer__clock {
  font-size: 1.6rem; font-weight: 800;
  color: var(--c-accent-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}
.countdown-timer__expired { margin: 0; font-weight: 700; color: var(--c-muted); }

/* ============================================================
   Phase 53 — Wave 2 신뢰·E-E-A-T 컴포넌트 6종 (색은 var() 토큰만, 추가만)
   author-trust-box / reviewed-by-stamp / advertiser-disclosure
   / methodology-box / disclaimer-box / regulatory-changelog
   (verify 스크립트: scripts/verify_phase52.py — verify N → CSS Phase N+1 오프셋 선례 유지)
   ============================================================ */

/* author-trust-box — 저자 전문성 박스 (E-E-A-T) */
.author-trust {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  word-break: keep-all;
}
.author-trust__head { display: flex; align-items: center; gap: var(--space-3); }
.author-trust__avatar {
  width: 56px; height: 56px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
}
.author-trust__avatar--ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-size: 1.4rem; font-weight: 800;
}
.author-trust__name { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--c-ink); }
.author-trust__cred { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--c-muted); }
.author-trust__bio { margin: var(--space-3) 0 0; color: var(--c-ink); }
.author-trust__body { margin-top: var(--space-2); color: var(--c-ink); }
.author-trust__link {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--c-accent);
  font-weight: 700;
  text-decoration: none;
}
.author-trust__link:hover { color: var(--c-link-hover-strong); }

/* reviewed-by-stamp — 전문가 검수 스탬프 */
.reviewed-by {
  display: flex; align-items: center; gap: 0.5rem;
  margin: var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--c-success);
  border-radius: var(--radius-sm);
  background: var(--c-success-soft);
  font-size: 0.9rem;
  word-break: keep-all;
}
.reviewed-by__icon {
  flex: 0 0 auto;
  width: 1.25rem; height: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--c-success);
  color: var(--c-paper);
  font-size: 0.75rem; font-weight: 800;
}
.reviewed-by__text { color: var(--c-ink); }
.reviewed-by__name { font-weight: 700; }
.reviewed-by__name a { color: var(--c-accent); text-decoration: none; }
.reviewed-by__name a:hover { text-decoration: underline; }
.reviewed-by__role { color: var(--c-muted); }
.reviewed-by__date { color: var(--c-muted); }

/* advertiser-disclosure — 광고/제휴 관계 고지 (FTC·공정위) */
.advertiser-disclosure {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  /* Phase 68(batch B): 광고 고지는 법적 "명확·현저" — 본문을 muted→ink로, 크기도 상향 */
  font-size: 0.875rem;
  color: var(--c-ink);
  word-break: keep-all;
}
.advertiser-disclosure__label {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--c-warning-soft);
  color: var(--c-warning);
  font-size: 0.72rem; font-weight: 700;
}
.advertiser-disclosure__text { color: var(--c-ink); }
.advertiser-disclosure__body { margin-top: var(--space-2); }

/* methodology-box — 평가·선정 방법론 박스 */
.methodology-box {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-paper);
  word-break: keep-all;
}
.methodology-box__title {
  margin: 0 0 var(--space-3);
  font-weight: 800; color: var(--c-ink);
}
.methodology-box__title::before { content: "\1F50E"; margin-right: 0.4rem; }
.methodology-box__body { margin-bottom: var(--space-3); color: var(--c-ink); }
.methodology-box__criteria { margin: 0 0 var(--space-3); padding-left: 1.2rem; color: var(--c-ink); }
.methodology-box__criteria li { margin: 0.2rem 0; }
.methodology-box__meta {
  display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem;
  margin: 0; padding-top: var(--space-3);
  border-top: 1px solid var(--c-border);
  font-size: 0.85rem;
}
.methodology-box__meta div { display: contents; }
.methodology-box__meta dt { color: var(--c-muted); font-weight: 700; }
.methodology-box__meta dd { margin: 0; color: var(--c-ink); }

/* disclaimer-box — 콘텐츠 책임 면책 (투자·의료·법률).
   Phase 68(batch C): 앰버 레인 통일 — peach fill/풀테두리를 걷어내고 notice-box 와 같은
   Tier B 절제 톤(무배경 + 좌측 3px warning 룰 + 대문자 키커 라벨)으로 정리. */
.disclaimer-box {
  position: relative;
  margin: var(--space-6) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-6);
  background: none;
  border: 0;
  border-radius: 0;
  word-break: keep-all;
}
.disclaimer-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 3px;
  background: var(--c-warning);
}
.disclaimer-box__label {
  margin: 0 0 var(--space-2);
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-warning);
}
.disclaimer-box__text { margin: 0; font-size: 0.9rem; color: var(--c-ink); }
.disclaimer-box__body { margin-top: var(--space-2); font-size: 0.9rem; color: var(--c-ink); }
.disclaimer-box--medical::before { background: var(--c-danger); }
.disclaimer-box--medical .disclaimer-box__label { color: var(--c-danger); }

/* Phase 68(batch D): regulatory-changelog는 .timeline 클래스를 그대로 재사용(별칭)하므로
   구 .reg-changelog* 셋(비참조 dead code, 실 템플릿 0건 확인)을 mega-final-gate에서 제거. */

/* ============================================================
   Phase 54 — Wave 3 판정·인터랙션 컴포넌트 6종 (색은 var() 토큰만, 추가만)
   eligibility-checker / eligibility-criteria-box / self-check-quiz
   / audience-fit-box / poll-widget / rate-table
   (verify 스크립트: scripts/verify_phase53.py — verify N → CSS Phase N+1 오프셋 선례 유지)
   ============================================================ */

/* 공용 — 판정형 인터랙션 체크 항목(elig-checker·self-quiz·poll 공통 톤) */
.elig-checker, .self-quiz, .poll-widget {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  word-break: keep-all;
}
.elig-checker__title, .self-quiz__title, .poll-widget__question {
  margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink);
}
.elig-checker__list, .self-quiz__list, .poll-widget__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.elig-checker__label, .self-quiz__label, .poll-widget__label {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.elig-checker__label:hover, .self-quiz__label:hover, .poll-widget__label:hover {
  border-color: var(--c-accent);
}
.elig-checker__box, .self-quiz__box, .poll-widget__radio {
  margin-top: 0.15rem; flex: 0 0 auto; accent-color: var(--c-accent);
}
.elig-checker__text, .self-quiz__text, .poll-widget__text { color: var(--c-ink); }
.elig-checker__note, .self-quiz__note, .poll-widget__note { margin: var(--space-3) 0 0; }

/* eligibility-checker — 판정 결과 */
.elig-checker__result {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 700;
}
.elig-checker__result--pass { background: var(--c-success-soft); color: var(--c-success); }
.elig-checker__result--fail { background: var(--c-warning-soft); color: var(--c-warning); }
.elig-checker__result-icon {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 2px solid currentColor;
  font-size: 0.9rem;
}

/* self-check-quiz — 개수 결과 */
.self-quiz__result {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--c-accent-soft);
}
.self-quiz__result-count {
  font-size: 1.4rem; font-weight: 800; color: var(--c-accent-strong);
  font-variant-numeric: tabular-nums;
}
.self-quiz__result-text { font-weight: 700; color: var(--c-ink); }

/* poll-widget — 내 선택 강조(로컬 저장만, 집계 없음) */
.poll-widget__item--mine .poll-widget__label {
  border-color: var(--c-accent); background: var(--c-accent-soft);
}

/* eligibility-criteria-box — 자격 요건 정적 나열(checklist=행동, 이건 대상 조건) */
.elig-criteria {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  word-break: keep-all;
}
.elig-criteria__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.elig-criteria__body { color: var(--c-ink); }
.elig-criteria__body ul { margin: 0; padding-left: 1.2rem; }
.elig-criteria__body li { margin: 0.3rem 0; }
.elig-criteria__note { margin: var(--space-3) 0 0; }

/* Phase 68(batch D): audience-fit-box는 .pros-cons 클래스를 그대로 재사용(별칭)하므로
   구 .audience-fit* 셋(비참조 dead code, 실 템플릿 0건 확인)을 mega-final-gate에서 제거. */

/* rate-table — 요율 기준표(기준일 강제). Phase 68(batch B): 카드 래핑 제거 →
   comparison-table·keyword-table와 같은 맨몸 편집표(2px ink 헤더룰 + 행 헤어라인 + hover) */
.rate-table {
  margin: var(--space-6) 0;
  word-break: keep-all;
}
.rate-table__title { margin: 0 0 var(--space-2); font-weight: 800; color: var(--c-ink); }
.rate-table__scroll { overflow-x: auto; }
.rate-table__table { width: 100%; border-collapse: collapse; }
.rate-table__asof {
  caption-side: bottom; text-align: left;
  margin-top: var(--space-2); color: var(--c-muted);
}
.rate-table__table th, .rate-table__table td {
  padding: var(--space-3) var(--space-4);
  text-align: left; border: 0; border-bottom: 1px solid var(--c-border);
  color: var(--c-ink);
}
.rate-table__table thead th {
  border-bottom: 2px solid var(--c-ink); background: none;
  text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--c-ink);
}
.rate-table__table tbody tr:last-child th,
.rate-table__table tbody tr:last-child td { border-bottom: 0; }
.rate-table__table tbody tr:hover { background: var(--c-accent-soft); }
.rate-table__label { font-weight: 700; }
.rate-table__num {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--c-accent-strong); white-space: nowrap;
}
.rate-table__note { color: var(--c-muted); }

/* ============================================================
   Phase 55 — Wave 4 버티컬·미디어 컴포넌트 11종 (색은 var() 토큰만, 추가만)
   recipe-card·itinerary-card·before-after-slider·workout-table·code-block·
   video-embed·image-gallery·chart-embed·social-embed·related-cluster-card·ad-slot
   ============================================================ */

/* 런타임 설정 커스텀 프로퍼티 기본값(색 아님 — before-after 슬라이더 위치·갤러리 열 수) */
:root { --ba-pos: 50%; --ig-cols: 3; }

.recipe-card, .itinerary-card {
  margin: 1.6em 0; padding: 1.1em 1.2em;
  border: 1px solid var(--c-border); border-radius: 12px;
  background: var(--c-surface); box-shadow: var(--c-shadow-sm);
  word-break: keep-all; overflow-wrap: anywhere;
}
.recipe-card__img { width: 100%; height: auto; border-radius: 9px; margin-bottom: 0.8em; display: block; }
.recipe-card__title, .itinerary-card__title {
  font-size: 1.18em; font-weight: 800; color: var(--c-ink); margin: 0 0 0.5em;
}
.recipe-card__meta, .itinerary-card__meta {
  display: flex; flex-wrap: wrap; gap: 0.5em 1.1em; margin: 0 0 0.9em; padding: 0; list-style: none;
}
.recipe-card__meta li, .itinerary-card__meta li { display: flex; gap: 0.35em; align-items: baseline; }
.recipe-card__meta-k, .itinerary-card__meta-k { color: var(--c-muted); font-size: 0.86em; }
.recipe-card__meta-v, .itinerary-card__meta-v { color: var(--c-ink); font-weight: 700; }
.recipe-card__cols { display: grid; grid-template-columns: 1fr; gap: 1em; }
@media (min-width: 640px) { .recipe-card__cols { grid-template-columns: 0.9fr 1.1fr; }}
.recipe-card__sub {
  font-size: 0.82em; font-weight: 800; letter-spacing: 0.02em; color: var(--c-accent-strong);
  margin: 0 0 0.4em; text-transform: none;
}
.recipe-card__ing-list, .recipe-card__step-list { margin: 0; padding-left: 1.3em; }
.recipe-card__ing-list li, .recipe-card__step-list li { margin: 0.2em 0; color: var(--c-ink); }
.recipe-card__body, .itinerary-card__body {
  margin-top: 0.9em; padding-top: 0.8em; border-top: 1px solid var(--c-border);
  color: var(--c-muted); font-size: 0.95em; word-break: keep-all;
}
.itinerary-card__list { margin: 0; padding: 0; list-style: none; counter-reset: itin; }
.itinerary-card__day {
  display: flex; gap: 0.8em; padding: 0.6em 0; border-bottom: 1px solid var(--c-border);
}
.itinerary-card__day:last-child { border-bottom: 0; }
.itinerary-card__day-label {
  flex: 0 0 auto; min-width: 4.2em; font-weight: 800; color: var(--c-accent-strong);
}
.itinerary-card__day-body { color: var(--c-ink); word-break: keep-all; }

.ba-slider { margin: 1.6em 0; }
.ba-slider__frame {
  position: relative; width: 100%; overflow: hidden; border-radius: 11px;
  border: 1px solid var(--c-border); line-height: 0; background: var(--c-paper);
}
.ba-slider__img { display: block; width: 100%; height: auto; }
.ba-slider__img--before {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
}
.ba-slider__tag {
  position: absolute; top: 0.6em; padding: 0.15em 0.6em; border-radius: 999px;
  font-size: 0.78em; font-weight: 800; color: var(--c-paper); background: var(--c-chip-ink);
  word-break: keep-all;
}
.ba-slider__tag--before { left: 0.6em; }
.ba-slider__tag--after { right: 0.6em; background: var(--c-accent-strong); }
.ba-slider__divider {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%);
  width: 2px; background: var(--c-paper); box-shadow: 0 0 0 1px var(--c-chip-ink);
  transform: translateX(-1px); pointer-events: none;
}
.ba-slider__range {
  display: block; width: 100%; margin-top: 0.6em; accent-color: var(--c-accent);
}

/* Phase 68(batch D): workout-table은 .routine-table 클래스를 그대로 재사용(별칭)하므로
   구 .workout-table* 셋(비참조 dead code, 실 템플릿 0건 확인)을 mega-final-gate에서 제거. */

.code-block {
  margin: 1.4em 0; border: 1px solid var(--c-border); border-radius: 10px;
  overflow: hidden; background: var(--c-code-bg);
}
.code-block__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.4em 0.8em; background: var(--c-thead-bg); border-bottom: 1px solid var(--c-border);
}
.code-block__file { font-size: 0.8em; color: var(--c-muted); font-family: var(--font-mono); }
.code-block__copy {
  font-size: 0.78em; padding: 0.2em 0.7em; border-radius: 6px; cursor: pointer;
  color: var(--c-link); background: transparent; border: 1px solid var(--c-line-strong);
}
.code-block__copy:hover { background: var(--c-link-hover-bg); color: var(--c-link-hover); }
.code-block__body { overflow-x: auto; }
.code-block__body pre { margin: 0; padding: 0.9em 1em; background: transparent; }
/* Chroma 문법강조 색을 코드 면(항상 다크) 기준 밝은-온-다크로 강제.
   테마 chroma.css 는 라이트=다크토큰/다크=밝은토큰으로 갈라 라이트 모드에서 다크-온-다크
   불가시를 만든다. 여기서 4클래스 특이도로 두 모드 모두 우리 토큰이 이기게 고정한다. */
.code-block .code-block__body .chroma { color: var(--c-code-fg); background: transparent; }
.code-block .code-block__body .chroma .k,
.code-block .code-block__body .chroma .kc,
.code-block .code-block__body .chroma .kd,
.code-block .code-block__body .chroma .kn,
.code-block .code-block__body .chroma .kp,
.code-block .code-block__body .chroma .kr,
.code-block .code-block__body .chroma .kt,
.code-block .code-block__body .chroma .o,
.code-block .code-block__body .chroma .ow,
.code-block .code-block__body .chroma .nn { color: var(--c-code-kw); }
.code-block .code-block__body .chroma .s,
.code-block .code-block__body .chroma .sa,
.code-block .code-block__body .chroma .sb,
.code-block .code-block__body .chroma .sc,
.code-block .code-block__body .chroma .dl,
.code-block .code-block__body .chroma .sd,
.code-block .code-block__body .chroma .s2,
.code-block .code-block__body .chroma .se,
.code-block .code-block__body .chroma .sh,
.code-block .code-block__body .chroma .si,
.code-block .code-block__body .chroma .sx,
.code-block .code-block__body .chroma .sr,
.code-block .code-block__body .chroma .s1,
.code-block .code-block__body .chroma .ss,
.code-block .code-block__body .chroma .l,
.code-block .code-block__body .chroma .m,
.code-block .code-block__body .chroma .mb,
.code-block .code-block__body .chroma .mf,
.code-block .code-block__body .chroma .mh,
.code-block .code-block__body .chroma .mi,
.code-block .code-block__body .chroma .il,
.code-block .code-block__body .chroma .mo { color: var(--c-code-str); }
.code-block .code-block__body .chroma .na,
.code-block .code-block__body .chroma .nb,
.code-block .code-block__body .chroma .no,
.code-block .code-block__body .chroma .nl,
.code-block .code-block__body .chroma .py,
.code-block .code-block__body .chroma .nv,
.code-block .code-block__body .chroma .vc,
.code-block .code-block__body .chroma .vg,
.code-block .code-block__body .chroma .vi,
.code-block .code-block__body .chroma .vm { color: var(--c-code-name); }
.code-block .code-block__body .chroma .nf,
.code-block .code-block__body .chroma .fm,
.code-block .code-block__body .chroma .nd,
.code-block .code-block__body .chroma .nc,
.code-block .code-block__body .chroma .ne { color: var(--c-code-fn); }
.code-block .code-block__body .chroma .nt { color: var(--c-code-tag); }
.code-block .code-block__body .chroma .c,
.code-block .code-block__body .chroma .ch,
.code-block .code-block__body .chroma .cm,
.code-block .code-block__body .chroma .c1,
.code-block .code-block__body .chroma .cs,
.code-block .code-block__body .chroma .cp,
.code-block .code-block__body .chroma .cpf { color: var(--c-code-comment); }
.code-block .code-block__body .chroma .p,
.code-block .code-block__body .chroma .nx,
.code-block .code-block__body .chroma .w { color: var(--c-code-fg); }

.video-embed {
  position: relative; margin: 1.6em 0; width: 100%; overflow: hidden;
  border-radius: 11px; background: var(--c-chip-ink); border: 1px solid var(--c-border);
}
.video-embed--16x9 { aspect-ratio: 16 / 9; }
.video-embed--4x3 { aspect-ratio: 4 / 3; }
.video-embed__facade, .video-embed__iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.video-embed__facade {
  display: flex; flex-direction: column; gap: 0.6em; align-items: center; justify-content: center;
  cursor: pointer; background: var(--c-overlay-backdrop); color: var(--c-paper);
}
.video-embed__play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.2em; height: 3.2em; border-radius: 999px; font-size: 1.1em;
  background: var(--c-accent-strong); color: var(--c-paper);
}
.video-embed__cap { font-size: 0.92em; font-weight: 700; color: var(--c-paper); word-break: keep-all; padding: 0 1em; text-align: center; }

.image-gallery { margin: 1.6em 0; }
.image-gallery__title { font-weight: 800; color: var(--c-ink); margin: 0 0 0.6em; word-break: keep-all; }
.image-gallery__grid {
  display: grid; gap: 0.6em;
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, calc(100% / var(--ig-cols, 3) - 0.6em), 100%), 1fr));
}
.image-gallery__item {
  display: block; border-radius: 9px; overflow: hidden; border: 1px solid var(--c-border);
  background: var(--c-paper); text-decoration: none;
}
.image-gallery__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.image-gallery__cap {
  display: block; padding: 0.35em 0.55em; font-size: 0.82em; color: var(--c-muted); word-break: keep-all;
}

.chart-embed { margin: 1.6em 0; word-break: keep-all; }
.chart-embed__title { font-weight: 800; color: var(--c-ink); margin: 0 0 0.6em; }
.chart-embed__svg { width: 100%; height: auto; max-width: 480px; }
.chart-embed__svg--pie { max-width: 260px; }
.chart-embed__axis { font-size: 11px; fill: var(--c-muted); }
.chart-embed__val { font-size: 11px; fill: var(--c-muted); font-variant-numeric: tabular-nums; }
.chart-embed__line { stroke: var(--c-accent-strong); stroke-width: 2.5; }
.chart-embed__dot { fill: var(--c-accent-strong); }
/* 단일 시리즈 막대 = 단색 accent (명도만 값 비례 — fill-opacity 인라인). 무지개 금지. */
.chart-embed__bar { fill: var(--c-accent); }
/* seg--N = 범주별 구분이 본질인 pie 전용 */
.chart-embed__seg--0 { fill: var(--c-accent); }
.chart-embed__seg--1 { fill: var(--c-success); }
.chart-embed__seg--2 { fill: var(--c-warning); }
.chart-embed__seg--3 { fill: var(--c-danger); }
.chart-embed__seg--4 { fill: var(--c-link); }
.chart-embed__seg--5 { fill: var(--c-muted); }
.chart-embed__caption { margin-top: 0.5em; }
.chart-embed__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.social-embed { margin: 1.5em 0; }
.social-embed__quote {
  margin: 0; padding: 1em 1.1em; border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent);
  border-radius: 10px; background: var(--c-surface); word-break: keep-all;
}
.social-embed__badge {
  display: inline-block; font-size: 0.74em; font-weight: 800; color: var(--c-muted);
  margin-bottom: 0.5em; letter-spacing: 0.02em;
}
.social-embed__text { margin: 0 0 0.6em; color: var(--c-ink); line-height: 1.6; }
.social-embed__meta { display: flex; flex-wrap: wrap; gap: 0.4em 0.9em; align-items: baseline; }
.social-embed__author { font-style: normal; font-weight: 700; color: var(--c-muted); }
.social-embed__link { color: var(--c-link); font-weight: 700; font-size: 0.9em; }
.social-embed__link:hover { color: var(--c-link-hover); }

.related-cluster {
  margin: 1.8em 0; padding: 1em 1.2em; border-radius: 11px;
  background: var(--c-paper); border: 1px solid var(--c-border); word-break: keep-all;
}
.related-cluster__title { font-weight: 800; color: var(--c-ink); margin: 0 0 0.6em; }
.related-cluster__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35em; }
.related-cluster__item { padding-left: 1em; position: relative; }
.related-cluster__item::before { content: "→"; position: absolute; left: 0; color: var(--c-accent); }
.related-cluster__link { color: var(--c-link); font-weight: 600; text-decoration: none; }
.related-cluster__link:hover { color: var(--c-link-hover); text-decoration: underline; }

.ad-slot { margin: 1.8em 0; text-align: center; }
.ad-slot__label {
  display: block; font-size: 0.72em; color: var(--c-muted); letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 0.3em;
}
.ad-slot__ins { display: block; min-height: 90px; background: var(--c-paper); }

/* ============================================================
   Phase 56 — vertical pack: 금융·보험·이민·법률·의료 전용 5종 (색은 var() 토큰만, 추가만)
   amortization-table·coverage-matrix·country-matrix·statute-box·dosage-card
   ============================================================ */

/* 스크린리더 전용(색 아님 — o/x 글리프 옆 텍스트 라벨, WCAG 1.4.1) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.amort-table, .cov-matrix, .country-matrix { margin: 1.6em 0; word-break: keep-all; }
.amort-table__title, .cov-matrix__title, .country-matrix__title {
  font-weight: 800; color: var(--c-ink); margin: 0 0 0.5em;
}
.amort-table__scroll, .cov-matrix__scroll, .country-matrix__scroll { overflow-x: auto; }
.amort-table__table, .cov-matrix__table, .country-matrix__table {
  width: 100%; border-collapse: collapse; font-size: 0.94em;
}
.amort-table__table th, .amort-table__table td,
.cov-matrix__table th, .cov-matrix__table td,
.country-matrix__table th, .country-matrix__table td {
  padding: 0.55em 0.7em; border-bottom: 1px solid var(--c-border); text-align: left;
}
.amort-table__table thead th,
.cov-matrix__table thead th,
.country-matrix__table thead th {
  color: var(--c-muted); font-size: 0.85em; font-weight: 700;
  background: var(--c-paper); border-bottom: 2px solid var(--c-ink);
}
.amort-table__no, .cov-matrix__row, .country-matrix__req {
  color: var(--c-ink); font-weight: 700; word-break: keep-all;
}
.amort-table__table td.is-num, .amort-table__table th.is-num,
.country-matrix__cell.is-num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.amort-table__asof, .country-matrix__asof {
  caption-side: bottom; text-align: left; margin-top: 0.5em;
}
.cov-matrix__cell { text-align: center; font-variant-numeric: tabular-nums; }
.cov-matrix__cell.is-yes { color: var(--c-success); font-weight: 800; }
.cov-matrix__cell.is-no { color: var(--c-muted); font-weight: 700; }
.cov-matrix__cell.is-val { color: var(--c-ink); font-weight: 600; }
.cov-matrix__cell.is-empty { color: var(--c-muted); }
.cov-matrix__plan, .country-matrix__co { color: var(--c-ink); font-weight: 700; }
.cov-matrix__meta, .country-matrix__meta { margin-top: 0.5em; }

.statute-box {
  margin: 1.6em 0; padding: 0.3em 0 0.3em 1.1em;
  border-left: 3px solid var(--c-accent); word-break: keep-all;
}
.statute-box__kicker {
  font-size: 0.78em; font-weight: 800; letter-spacing: 0.03em;
  color: var(--c-accent-strong); margin: 0 0 0.35em; text-transform: none;
}
.statute-box__head { margin: 0 0 0.45em; }
.statute-box__law { font-style: normal; font-weight: 800; color: var(--c-ink); }
.statute-box__article { color: var(--c-muted); font-weight: 600; }
.statute-box__quote {
  margin: 0 0 0.5em; padding: 0; border: 0; color: var(--c-ink);
  font-size: 0.96em; line-height: 1.7;
}
.statute-box__meta { margin: 0.3em 0; }
.statute-box__link {
  display: inline-block; margin-top: 0.2em; font-size: 0.88em; font-weight: 700;
  color: var(--c-link); text-decoration: none;
}
.statute-box__link:hover { color: var(--c-link-hover); text-decoration: underline; }

.dosage-card {
  margin: 1.6em 0; padding: 1.1em 1.2em; border-radius: 12px;
  border: 1px solid var(--c-border); background: var(--c-surface);
  box-shadow: var(--c-shadow-sm); word-break: keep-all;
}
.dosage-card__kicker {
  font-size: 0.78em; font-weight: 800; letter-spacing: 0.03em;
  color: var(--c-muted); margin: 0 0 0.25em;
}
.dosage-card__name { font-size: 1.14em; font-weight: 800; color: var(--c-ink); margin: 0 0 0.7em; }
.dosage-card__grid {
  display: grid; grid-template-columns: 1fr; gap: 0.4em 1.1em; margin: 0 0 0.8em;
}
@media (min-width: 520px) { .dosage-card__grid { grid-template-columns: 1fr 1fr; }}
.dosage-card__grid div { display: flex; gap: 0.5em; align-items: baseline; }
.dosage-card__grid dt { flex: 0 0 auto; min-width: 4.2em; color: var(--c-muted); font-size: 0.86em; }
.dosage-card__grid dd { margin: 0; color: var(--c-ink); font-weight: 700; }
.dosage-card__warn, .dosage-card__contra {
  margin: 0.6em 0; padding-left: 0.9em; border-left: 3px solid var(--c-warning);
}
.dosage-card__contra { border-left-color: var(--c-danger); }
.dosage-card__warn-h, .dosage-card__contra-h {
  margin: 0 0 0.2em; font-size: 0.82em; font-weight: 800; color: var(--c-warning);
}
.dosage-card__contra-h { color: var(--c-danger); }
.dosage-card__warn ul, .dosage-card__contra ul { margin: 0; padding-left: 1.2em; }
.dosage-card__warn li, .dosage-card__contra li { color: var(--c-ink); margin: 0.15em 0; }
.dosage-card__advice {
  margin: 0.9em 0 0.5em; padding-top: 0.7em; border-top: 1px solid var(--c-border);
  color: var(--c-muted); font-size: 0.9em; font-weight: 600; word-break: keep-all;
}
.dosage-card__src { margin: 0.3em 0 0; }
.dosage-card__src a { color: var(--c-link); text-decoration: none; }
.dosage-card__src a:hover { color: var(--c-link-hover); text-decoration: underline; }

/* ============================================================
   Phase 57 — vertical pack 2: 부동산·엔터·이벤트 전용 3종 (색은 var() 토큰만, 추가만)
   property-card·media-work-card·event-info-card
   ============================================================ */

.property-card, .media-work-card, .event-info-card {
  margin: 1.6em 0; padding: 1.1em 1.2em; border-radius: 12px;
  border: 1px solid var(--c-border); background: var(--c-surface);
  box-shadow: var(--c-shadow-sm); word-break: keep-all;
}
.property-card__head, .media-work-card__head, .event-info-card__head { margin: 0 0 0.7em; }
.property-card__kicker, .media-work-card__kicker, .event-info-card__kicker {
  display: inline-block; font-size: 0.78em; font-weight: 800; letter-spacing: 0.03em;
  color: var(--c-accent-strong); margin: 0 0 0.25em;
}
.property-card__name, .media-work-card__title, .event-info-card__name {
  font-size: 1.16em; font-weight: 800; color: var(--c-ink); margin: 0; line-height: 1.35;
}
.property-card__addr { margin: 0.25em 0 0; color: var(--c-muted); font-size: 0.9em; }

/* 공통 dl 스펙 그리드 (라벨/값 2열, 모바일 1열) */
.property-card__specs, .media-work-card__specs, .event-info-card__specs {
  display: grid; grid-template-columns: 1fr; gap: 0.35em 1.1em; margin: 0.2em 0 0.8em;
}
@media (min-width: 520px) {
  .property-card__specs, .media-work-card__specs { grid-template-columns: 1fr 1fr; }}
.property-card__row, .media-work-card__row, .event-info-card__row {
  display: flex; gap: 0.6em; align-items: baseline;
}
.property-card__row dt, .media-work-card__row dt, .event-info-card__row dt {
  flex: 0 0 auto; min-width: 4.6em; color: var(--c-muted); font-size: 0.86em;
}
.property-card__row dd, .media-work-card__row dd, .event-info-card__row dd {
  margin: 0; color: var(--c-ink); font-weight: 700;
}

/* property-card 가격 강조(매물 핵심 지표) */
.property-card__price {
  display: flex; align-items: baseline; gap: 0.5em; margin: 0 0 0.7em;
  padding-bottom: 0.6em; border-bottom: 1px solid var(--c-border);
}
.property-card__price-k { color: var(--c-muted); font-size: 0.82em; }
.property-card__price-v {
  color: var(--c-accent-strong); font-weight: 800; font-size: 1.12em;
  font-variant-numeric: tabular-nums;
}

/* media-work-card 평점(별 + 척도) */
.media-work-card__rating {
  margin: 0.5em 0 0; color: var(--c-ink); font-weight: 800; font-variant-numeric: tabular-nums;
}
.media-work-card__star { color: var(--c-accent-strong); margin-right: 0.2em; }
.media-work-card__scale { color: var(--c-muted); font-weight: 600; font-size: 0.85em; }

/* 공통 본문 + CTA 버튼 (offer-box 버튼 언어와 통일) */
.property-card__body, .media-work-card__body, .event-info-card__body {
  margin: 0.2em 0 0.8em; color: var(--c-ink); word-break: keep-all;
}
.property-card__btn, .media-work-card__btn, .event-info-card__btn {
  display: inline-block; margin-top: 0.3em; padding: 0.55em 1.1em; border-radius: var(--radius-sm);
  background: var(--c-accent); color: var(--c-paper); font-weight: 700;
  text-decoration: none; font-size: 0.92em;
}
.property-card__btn:hover, .media-work-card__btn:hover, .event-info-card__btn:hover {
  background: var(--c-cta-hover); color: var(--c-paper);
}

/* ============================================================
   Phase 68 — 비평 batch B: rest 상태·대비·글리프 마감 (색은 var() 토큰만)
   ============================================================ */

/* ① eligibility-checker / ② self-check-quiz — 판정 전 rest 상태 카피
   (기존 [hidden] 이 .elig-checker__result{display:flex} 로 무력화돼 빈 원/0 이 노출되던 결함 대체) */
.elig-checker__result--rest {
  background: var(--c-surface); color: var(--c-muted);
  border: 1px dashed var(--c-border); font-weight: 500;
}
.elig-checker__result--rest .elig-checker__result-icon { display: none; }
.self-quiz__result--rest {
  background: var(--c-surface); color: var(--c-muted);
  border: 1px dashed var(--c-border);
}
.self-quiz__result--rest .self-quiz__result-count { display: none; }
.self-quiz__result--rest .self-quiz__result-text { color: var(--c-muted); font-weight: 500; }

/* ① 체크박스 native 스타일 업그레이드 — 큰 카드 행에서 왜소하던 무스타일 체크박스 교체
   (poll-widget 은 radio 라 accent-color 유지, 체크박스만 커스텀) */
.elig-checker__box, .self-quiz__box {
  appearance: none; -webkit-appearance: none;
  width: 1.2rem; height: 1.2rem; margin-top: 0.1rem;
  border: 1.5px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-paper); cursor: pointer;
  display: grid; place-content: center;
  transition: border-color 0.12s, background 0.12s;
}
.elig-checker__box::before, .self-quiz__box::before {
  content: "✓"; font-size: 0.85rem; font-weight: 800; line-height: 1;
  color: var(--c-paper); transform: scale(0); transition: transform 0.12s;
}
.elig-checker__box:checked, .self-quiz__box:checked {
  background: var(--c-accent); border-color: var(--c-accent);
}
.elig-checker__box:checked::before, .self-quiz__box:checked::before { transform: scale(1); }
.elig-checker__box:focus-visible, .self-quiz__box:focus-visible {
  outline: 2px solid var(--c-accent); outline-offset: 2px;
}
.elig-checker__label:has(:checked), .self-quiz__label:has(:checked) {
  border-color: var(--c-accent); background: var(--c-accent-soft);
}

/* ③④ calculator / calc-box — 계산 전 rest 안내 + [hidden] 출력 정상 은닉
   (.calculator-wrap .bb-outputs{display:grid} 가 [hidden] 을 눌러 빈 결과카드가 노출되던 결함 교정) */
.calculator-wrap .bb-outputs[hidden] { display: none; }
.bb-rest-hint {
  margin: var(--space-4) 0 0; padding: var(--space-4);
  border: 1px dashed var(--c-border); border-radius: var(--radius-md);
  background: var(--c-surface); color: var(--c-muted);
  font-size: 0.9rem; text-align: center; word-break: keep-all;
}
.bb-rest-hint[hidden] { display: none; }

/* ⑩ callout — 4타입 의미 텍스트 글리프 노출(이모지 금지) + 색·글리프 이중 부호화(WCAG 1.4.1)
   (기존 .callout-icon{display:none} 을 동급 특이도 후행 규칙으로 오버라이드) */
.callout-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; margin: 0 0 var(--space-2);
  border-radius: 999px; font-size: 0.75rem; font-weight: 800;
  font-style: normal; font-family: var(--font-body); line-height: 1;
}
.callout--tip .callout-icon { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.callout--warning .callout-icon { background: var(--c-warning-soft); color: var(--c-warning); }
.callout--check .callout-icon { background: var(--c-success-soft); color: var(--c-success); }
.callout--danger .callout-icon { background: var(--c-danger-soft); color: var(--c-danger); }

/* ============================================================
   Phase 58 — 에디토리얼·범용 컴포넌트 18종 (색은 var() 토큰만, 추가만)
   fact-check-verdict·correction-update-stamp·sidenote·why-it-matters-lead·
   inline-glossary-term·person-dossier·annotated-source·go-deeper-box·
   testimonial-card·tabbed-content·progress-bar·bookmark-card·feature-icon-box·
   versus-box·alert-bar·icon-list·read-more-toggle·highlight-mark
   ============================================================ */

.fc-verdict {
  margin: 1.6em 0; padding: 1em 1.2em; border-radius: 12px;
  border: 1px solid var(--c-border); border-left: 4px solid var(--c-muted);
  background: var(--c-surface); box-shadow: var(--c-shadow-sm); word-break: keep-all;
}
.fc-verdict--true, .fc-verdict--mostly-true { border-left-color: var(--c-success); }
.fc-verdict--half { border-left-color: var(--c-warning); }
.fc-verdict--false, .fc-verdict--mostly-false { border-left-color: var(--c-danger); }
.fc-verdict__head { display: flex; align-items: center; gap: 0.6em; margin: 0 0 0.5em; flex-wrap: wrap; }
.fc-verdict__kicker { font-size: 0.76em; font-weight: 800; letter-spacing: 0.04em; color: var(--c-muted); }
.fc-verdict__badge {
  font-size: 0.82em; font-weight: 800; padding: 0.15em 0.7em; border-radius: 999px;
  background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-ink);
}
.fc-verdict--true .fc-verdict__badge, .fc-verdict--mostly-true .fc-verdict__badge { background: var(--c-success-soft); color: var(--c-success); border-color: var(--c-success); }
.fc-verdict--half .fc-verdict__badge { background: var(--c-warning-soft); color: var(--c-warning); border-color: var(--c-warning); }
.fc-verdict--false .fc-verdict__badge, .fc-verdict--mostly-false .fc-verdict__badge { background: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger); }
.fc-verdict__claim { margin: 0 0 0.5em; font-weight: 700; color: var(--c-ink); font-size: 1.02em; line-height: 1.5; }
.fc-verdict__body { margin: 0 0 0.5em; color: var(--c-ink); word-break: keep-all; }
.fc-verdict__meta { margin: 0.3em 0 0; }
.fc-verdict__meta a { color: var(--c-link); }

.cu-stamp {
  display: flex; gap: 0.7em; align-items: flex-start; margin: 1.4em 0;
  padding: 0.7em 0.9em; border-radius: var(--radius-sm);
  background: var(--c-surface); border: 1px dashed var(--c-border); word-break: keep-all;
}
.cu-stamp__tag {
  flex: 0 0 auto; font-size: 0.78em; font-weight: 800; letter-spacing: 0.02em;
  padding: 0.15em 0.6em; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent-strong);
}
.cu-stamp--correction .cu-stamp__tag { background: var(--c-warning-soft); color: var(--c-warning); }
.cu-stamp__date { display: block; font-size: 0.8em; color: var(--c-muted); margin: 0 0 0.15em; }
.cu-stamp__text { color: var(--c-ink); font-size: 0.94em; line-height: 1.55; }
.cu-stamp__text p:last-child { margin-bottom: 0; }

.sidenote__marker {
  cursor: pointer; color: var(--c-accent-strong); font-weight: 800;
  vertical-align: super; font-size: 0.72em; padding: 0 0.15em; line-height: 0;
}
.sidenote__marker:hover { color: var(--c-cta-hover); }
.sidenote { font-size: 0.85em; color: var(--c-muted); line-height: 1.55; word-break: keep-all; }
@media (max-width: 1239px) {
  .sidenote__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
  .sidenote { display: none; margin: 0.5em 0 0.9em 0.4em; padding-left: 0.9em; border-left: 2px solid var(--c-border); }
  .sidenote__toggle:checked ~ .sidenote { display: block; }}
@media (min-width: 1240px) {
  .sidenote__marker { color: var(--c-muted); cursor: default; }
  .sidenote__toggle { display: none; }
  .sidenote { float: right; clear: right; width: 14em; margin: 0.1em -16em 0.6em 0; padding-left: 0.9em; border-left: 2px solid var(--c-border); }}

.wim-lead {
  margin: 1.5em 0; padding: 0.4em 0 0.4em 1.1em; border-left: 3px solid var(--c-accent);
  display: grid; gap: 0.7em; word-break: keep-all;
}
.wim-lead__row { display: grid; gap: 0.15em; }
.wim-lead__label {
  font-size: 0.78em; font-weight: 800; letter-spacing: 0.02em; color: var(--c-accent-strong);
  text-transform: none;
}
.wim-lead__text { margin: 0; color: var(--c-ink); line-height: 1.55; }

.gloss-term { position: relative; display: inline; border-bottom: 1px dotted var(--c-accent); cursor: help; } /* divider:strong */
.gloss-term__word { color: inherit; }
.gloss-term__pop {
  position: absolute; left: 0; bottom: 1.7em; z-index: 30; width: max-content; max-width: 18em;
  padding: 0.6em 0.8em; border-radius: var(--radius-sm); background: var(--c-ink); color: var(--c-paper);
  box-shadow: var(--c-shadow-md); font-size: 0.84em; line-height: 1.45; font-weight: 400;
  word-break: keep-all; opacity: 0; visibility: hidden; transition: opacity 0.12s ease;
}
.gloss-term__pop-term { display: block; font-weight: 800; margin: 0 0 0.2em; color: var(--c-paper); }
.gloss-term:hover .gloss-term__pop, .gloss-term:focus-within .gloss-term__pop { opacity: 1; visibility: visible; }

.person-dossier {
  margin: 1.5em 0; padding: 0.9em 1.1em; border-radius: 12px;
  border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: var(--c-shadow-sm);
  word-break: keep-all;
}
.person-dossier__kicker { font-size: 0.74em; font-weight: 800; letter-spacing: 0.05em; color: var(--c-muted); }
.person-dossier__name { margin: 0.15em 0 0; font-size: 1.08em; font-weight: 800; color: var(--c-ink); }
.person-dossier__role { font-size: 0.82em; font-weight: 700; color: var(--c-accent-strong); }
.person-dossier__aff { margin: 0.1em 0 0; font-size: 0.86em; color: var(--c-muted); }
.person-dossier__known { margin: 0.5em 0 0; font-size: 0.92em; color: var(--c-ink); line-height: 1.5; }
.person-dossier__known-k { font-weight: 800; color: var(--c-muted); margin-right: 0.3em; }
.person-dossier__body { margin: 0.5em 0 0; color: var(--c-ink); }
.person-dossier__link { display: inline-block; margin-top: 0.4em; font-weight: 700; font-size: 0.9em; color: var(--c-link); text-decoration: none; }
.person-dossier__link:hover { color: var(--c-link-hover); }

.annot-source { margin: 1.6em 0; padding: 0; word-break: keep-all; }
.annot-source__quote {
  margin: 0; padding: 0.7em 1em; border-left: 4px solid var(--c-line-strong);
  background: var(--c-surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--c-ink); font-style: normal; line-height: 1.6;
}
.annot-source__cite { margin: 0.35em 0 0 1em; }
.annot-source__cite a { color: var(--c-link); }
.annot-source__note {
  display: flex; gap: 0.6em; margin: 0.6em 0 0 1em; padding: 0.5em 0.8em;
  border-radius: var(--radius-sm); background: var(--c-accent-soft);
}
.annot-source__note-tag { flex: 0 0 auto; font-size: 0.76em; font-weight: 800; color: var(--c-accent-strong); padding-top: 0.15em; }
.annot-source__note-text { color: var(--c-ink); font-size: 0.94em; line-height: 1.55; }
.annot-source__note-text p:last-child { margin-bottom: 0; }

.go-deeper {
  margin: 1.6em 0; padding: 0.9em 1.1em; border-radius: 12px;
  border: 1px solid var(--c-border); background: var(--c-surface); word-break: keep-all;
}
.go-deeper__title { margin: 0 0 0.5em; font-weight: 800; color: var(--c-ink); display: flex; align-items: center; gap: 0.4em; }
.go-deeper__arrow { color: var(--c-accent-strong); font-weight: 900; }
.go-deeper__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35em; }
.go-deeper__item { padding-left: 0.9em; position: relative; }
.go-deeper__item::before { content: "›"; position: absolute; left: 0; color: var(--c-muted); font-weight: 800; }
.go-deeper__item a { color: var(--c-link); font-weight: 600; }
.go-deeper__item a:hover { color: var(--c-link-hover); }

.testimonial-card {
  margin: 1.6em 0; padding: 1.1em 1.2em; border-radius: 12px;
  border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: var(--c-shadow-sm);
  word-break: keep-all;
}
.testimonial-card__stars { margin: 0 0 0.4em; letter-spacing: 0.05em; }
.testimonial-card__star { color: var(--c-line-strong); font-size: 1.05em; }
.testimonial-card__star.is-on { color: var(--c-accent-strong); }
.testimonial-card__quote { margin: 0 0 0.6em; color: var(--c-ink); font-size: 1.02em; line-height: 1.6; font-style: normal; }
.testimonial-card__quote::before { content: "“"; color: var(--c-muted); font-weight: 800; margin-right: 0.05em; }
.testimonial-card__quote::after { content: "”"; color: var(--c-muted); font-weight: 800; }
.testimonial-card__by { display: flex; align-items: baseline; gap: 0.5em; flex-wrap: wrap; }
.testimonial-card__name { font-weight: 800; color: var(--c-ink); }
.testimonial-card__role { font-size: 0.86em; color: var(--c-accent-strong); font-weight: 700; }
.testimonial-card__src { font-size: 0.82em; }

.tabbed { margin: 1.6em 0; word-break: keep-all; }
.tabbed__radio { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.tabbed__label {
  display: inline-block; padding: 0.5em 1em; cursor: pointer; font-weight: 700; font-size: 0.94em;
  color: var(--c-muted); border-bottom: 2px solid var(--c-border); margin-bottom: -1px;
}
.tabbed__label:hover { color: var(--c-ink); }
.tabbed__radio:checked + .tabbed__label { color: var(--c-accent-strong); border-bottom-color: var(--c-accent); }
.tabbed__radio:focus-visible + .tabbed__label { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.tabbed__panels {
  border: 1px solid var(--c-border); border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
  padding: 1em 1.1em; background: var(--c-surface);
}
.tabbed__panel { display: none; color: var(--c-ink); }
.tabbed__panel p:last-child { margin-bottom: 0; }
.tabbed__radio:nth-of-type(1):checked ~ .tabbed__panels > .tabbed__panel:nth-child(1),
.tabbed__radio:nth-of-type(2):checked ~ .tabbed__panels > .tabbed__panel:nth-child(2),
.tabbed__radio:nth-of-type(3):checked ~ .tabbed__panels > .tabbed__panel:nth-child(3),
.tabbed__radio:nth-of-type(4):checked ~ .tabbed__panels > .tabbed__panel:nth-child(4),
.tabbed__radio:nth-of-type(5):checked ~ .tabbed__panels > .tabbed__panel:nth-child(5),
.tabbed__radio:nth-of-type(6):checked ~ .tabbed__panels > .tabbed__panel:nth-child(6),
.tabbed__radio:nth-of-type(7):checked ~ .tabbed__panels > .tabbed__panel:nth-child(7),
.tabbed__radio:nth-of-type(8):checked ~ .tabbed__panels > .tabbed__panel:nth-child(8) { display: block; }

.progress-bar { margin: 1.4em 0; word-break: keep-all; }
.progress-bar__title { margin: 0 0 0.6em; font-weight: 800; color: var(--c-ink); }
.progress-bar__row { margin: 0 0 0.6em; }
.progress-bar__meta { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.25em; }
.progress-bar__label { font-size: 0.9em; font-weight: 700; color: var(--c-ink); }
.progress-bar__pct { font-size: 0.85em; font-weight: 800; color: var(--c-accent-strong); font-variant-numeric: tabular-nums; }
.progress-bar__track { height: 0.6em; border-radius: 999px; background: var(--c-border); overflow: hidden; }
.progress-bar__fill { height: 100%; border-radius: 999px; background: var(--c-accent); transition: width 0.3s ease; }
.progress-bar__caption { margin: 0.2em 0 0; }

.bookmark-card {
  display: flex; align-items: stretch; gap: 0; margin: 1.6em 0; overflow: hidden;
  border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface);
  box-shadow: var(--c-shadow-sm); text-decoration: none; word-break: keep-all; transition: box-shadow 0.15s ease;
}
.bookmark-card:hover { box-shadow: var(--c-shadow-md); }
.bookmark-card__text { flex: 1 1 auto; padding: 0.9em 1.1em; min-width: 0; }
.bookmark-card__title { margin: 0 0 0.3em; font-weight: 800; color: var(--c-ink); line-height: 1.4; }
.bookmark-card__desc {
  margin: 0 0 0.5em; font-size: 0.9em; color: var(--c-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bookmark-card__site { margin: 0; display: flex; align-items: center; gap: 0.4em; font-size: 0.82em; color: var(--c-muted); }
.bookmark-card__favicon { border-radius: 3px; flex: 0 0 auto; }
.bookmark-card__thumb { flex: 0 0 34%; max-width: 180px; overflow: hidden; background: var(--c-surface); }
.bookmark-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.feat-icons {
  display: grid; grid-template-columns: 1fr; gap: 0.9em; margin: 1.6em 0; word-break: keep-all;
}
@media (min-width: 560px) {
  .feat-icons { grid-template-columns: repeat(3, 1fr); }
  .feat-icons[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
  .feat-icons[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }}
.feat-icons__cell {
  padding: 0.9em 1em; border: 1px solid var(--c-border); border-radius: 12px;
  background: var(--c-surface);
}
.feat-icons__glyph {
  display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em;
  border-radius: 8px; background: var(--c-accent-soft); color: var(--c-accent-strong);
  font-size: 1.15em; font-weight: 800; margin: 0 0 0.5em;
}
.feat-icons__title { margin: 0 0 0.25em; font-weight: 800; color: var(--c-ink); }
.feat-icons__desc { margin: 0; font-size: 0.9em; color: var(--c-muted); line-height: 1.5; }

.versus-box {
  margin: 1.6em 0; padding: 1.1em 1.2em; border-radius: 12px;
  border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: var(--c-shadow-sm);
  word-break: keep-all;
}
.versus-box__hero { display: flex; align-items: stretch; gap: 0.6em; margin: 0 0 0.9em; }
.versus-box__side {
  flex: 1 1 0; text-align: center; padding: 0.7em 0.5em; border-radius: 10px;
  border: 1px solid var(--c-border); background: var(--c-paper);
}
.versus-box__side.is-winner { border-color: var(--c-accent); background: var(--c-accent-soft); }
.versus-box__name { display: block; font-weight: 800; color: var(--c-ink); font-size: 1.05em; }
.versus-box__crown {
  display: inline-block; margin-top: 0.35em; font-size: 0.74em; font-weight: 800;
  padding: 0.12em 0.6em; border-radius: 999px; background: var(--c-accent); color: var(--c-paper);
}
.versus-box__vs { align-self: center; font-weight: 900; color: var(--c-muted); font-size: 0.9em; }
.versus-box__rounds { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.versus-box__rounds th, .versus-box__rounds td { padding: 0.45em 0.6em; border-bottom: 1px solid var(--c-border); text-align: center; }
.versus-box__rounds thead th { color: var(--c-muted); font-size: 0.85em; font-weight: 700; }
.versus-box__rounds tbody th { text-align: left; color: var(--c-ink); font-weight: 700; }
.versus-box__rounds td { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.versus-box__rounds td.is-round-win { color: var(--c-accent-strong); font-weight: 800; background: var(--c-accent-soft); }
.versus-box__mark { color: var(--c-accent-strong); font-size: 0.8em; }
.versus-box__body { margin: 0.8em 0 0; color: var(--c-ink); }
.versus-box__caption { margin: 0.5em 0 0; }

.alert-bar {
  display: flex; align-items: center; gap: 0.8em; margin: 1.2em 0; padding: 0.6em 1em;
  border-radius: var(--radius-sm); border: 1px solid var(--c-border); background: var(--c-surface);
  word-break: keep-all;
}
.alert-bar--info { background: var(--c-surface); }
.alert-bar--update { background: var(--c-accent-soft); border-color: var(--c-accent); }
.alert-bar--warning { background: var(--c-warning-soft); border-color: var(--c-warning); }
.alert-bar--promo { background: var(--c-accent); border-color: var(--c-accent); }
.alert-bar__msg { margin: 0; flex: 1 1 auto; color: var(--c-ink); font-size: 0.94em; font-weight: 600; }
.alert-bar--promo .alert-bar__msg { color: var(--c-paper); }
.alert-bar__cta { flex: 0 0 auto; font-weight: 800; font-size: 0.9em; color: var(--c-link); text-decoration: none; }
.alert-bar--promo .alert-bar__cta { color: var(--c-paper); text-decoration: underline; }
.alert-bar__close {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; font-size: 0.9em;
  color: var(--c-muted); line-height: 1; padding: 0.2em 0.3em;
}
.alert-bar--promo .alert-bar__close { color: var(--c-paper); }
.alert-bar__close:hover { color: var(--c-ink); }

.icon-list { margin: 1.4em 0; word-break: keep-all; }
.icon-list__title { margin: 0 0 0.5em; font-weight: 800; color: var(--c-ink); }
.icon-list__ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4em; }
.icon-list__item { display: flex; gap: 0.55em; align-items: baseline; }
.icon-list__glyph { flex: 0 0 auto; color: var(--c-accent-strong); font-weight: 800; }
.icon-list__text { color: var(--c-ink); line-height: 1.55; }

.read-more { margin: 1.4em 0; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); word-break: keep-all; }
.read-more__summary {
  cursor: pointer; padding: 0.6em 1em; font-weight: 700; color: var(--c-accent-strong);
  list-style: none; user-select: none;
}
.read-more__summary::-webkit-details-marker { display: none; }
.read-more__summary::before { content: "▸"; margin-right: 0.4em; color: var(--c-muted); font-weight: 800; }
.read-more[open] .read-more__summary::before { content: "▾"; }
.read-more__body { padding: 0 1em 0.9em; color: var(--c-ink); }
.read-more__body p:last-child { margin-bottom: 0; }

.hl-mark { background: var(--c-highlight); color: inherit; padding: 0 0.14em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl-mark--warning { background: var(--c-warning-soft); }
.hl-mark--success { background: var(--c-success-soft); }

/* ============================================================
   Phase 59 — 버티컬 시그니처 컴포넌트 17종 (색은 var() 토큰만, 추가만)
   tco-breakdown·salary-band·nutrition-facts·ingredient-scaler·size-chart·
   odds-table·responsible-gambling-notice·benchmark-bar·seasonal-calendar·
   milestone-tracker·best-time-to-visit·cosmetic-ingredient-analysis·
   exercise-swap·standings-table·trip-budget-breakdown·game-stat-block·care-spec-card
   공통: word-break:keep-all, 표 계열은 가로 스크롤 래퍼, 숫자 셀 is-num tabular-nums
   ============================================================ */

.tco-breakdown, .salary-band, .nutrition-facts, .ing-scaler, .size-chart,
.odds-table, .rg-notice, .benchmark-bar, .seasonal-cal, .milestone-tracker,
.btv, .cia, .ex-swap, .standings, .trip-budget, .game-stat, .care-spec {
  word-break: keep-all; margin: 1.6em 0;
}
.size-chart__scroll, .odds-table__scroll, .seasonal-cal__scroll,
.cia__scroll, .ex-swap__scroll, .standings__scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}

.tco-breakdown { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.tco-breakdown__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.tco-breakdown__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; }
.tco-breakdown__row { display: grid; grid-template-columns: 7em 1fr auto; align-items: center; gap: 0.6em; }
.tco-breakdown__label { color: var(--c-ink); font-size: 0.92em; }
.tco-breakdown__bar { height: 0.7em; min-width: 2px; border-radius: 4px; background: var(--c-accent); display: block; }
.tco-breakdown__amt { color: var(--c-ink); font-weight: 700; white-space: nowrap; }
.tco-breakdown__total { display: flex; justify-content: space-between; margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 2px solid var(--c-border); }
.tco-breakdown__total-k { font-weight: 800; color: var(--c-ink); }
.tco-breakdown__total-v { font-weight: 800; color: var(--c-accent-strong); }
.tco-breakdown__src { margin: 0.5em 0 0; }

.salary-band { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.salary-band__title { margin: 0 0 var(--space-4); font-weight: 800; color: var(--c-ink); }
.salary-band__track { position: relative; height: 1.4em; border-radius: 999px; background: var(--c-accent-soft); margin: 0 0 var(--space-3); }
.salary-band__iqr { position: absolute; top: 0; bottom: 0; background: var(--c-accent); border-radius: 999px; opacity: 0.55; }
.salary-band__median { position: absolute; top: -0.2em; bottom: -0.2em; width: 3px; background: var(--c-ink); transform: translateX(-50%); }
.salary-band__mark { position: absolute; top: 50%; width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--c-accent-strong); border: 2px solid var(--c-paper); transform: translate(-50%, -50%); box-shadow: var(--shadow-sm); }
.salary-band__ticks { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 0.5em; }
.salary-band__ticks li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.salary-band__tk { font-size: 0.78em; color: var(--c-muted); }
.salary-band__tv { font-weight: 800; color: var(--c-ink); }
.salary-band__unit { margin: 0.6em 0 0; }

.nutrition-facts { border: 2px solid var(--c-ink); border-radius: var(--radius-sm); background: var(--c-paper); padding: var(--space-4); max-width: 22rem; }
.nutrition-facts__title { margin: 0; font-weight: 800; font-size: 1.15em; color: var(--c-ink); border-bottom: 6px solid var(--c-ink); padding-bottom: 0.2em; }
.nutrition-facts__serving { margin: 0.3em 0; font-size: 0.85em; color: var(--c-muted); }
.nutrition-facts__cal { display: flex; justify-content: space-between; align-items: baseline; margin: 0.3em 0; padding: 0.3em 0; border-top: 4px solid var(--c-ink); border-bottom: 1px solid var(--c-border); font-weight: 800; color: var(--c-ink); }
.nutrition-facts__cal-v { font-size: 1.3em; }
.nutrition-facts__table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.nutrition-facts__table th, .nutrition-facts__table td { padding: 0.35em 0.2em; border-bottom: 1px solid var(--c-border); text-align: left; color: var(--c-ink); }
.nutrition-facts__table td.is-num, .nutrition-facts__table th.is-num { text-align: right; }
.nutrition-facts__note { margin: 0.6em 0 0; font-size: 0.75em; }

.ing-scaler { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.ing-scaler__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5em; margin-bottom: var(--space-3); }
.ing-scaler__title { margin: 0; font-weight: 800; color: var(--c-ink); }
.ing-scaler__ctrl { display: flex; align-items: center; gap: 0.3em; }
.ing-scaler__btn { border: 1px solid var(--c-border); background: var(--c-paper); color: var(--c-ink); border-radius: var(--radius-sm); padding: 0.25em 0.6em; cursor: pointer; font-weight: 700; font-size: 0.85em; }
.ing-scaler__btn.is-active { background: var(--c-accent); color: var(--c-paper); border-color: var(--c-accent); }
.ing-scaler__serv { font-size: 0.85em; color: var(--c-muted); margin-left: 0.4em; }
.ing-scaler__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4em; }
.ing-scaler__row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.4em; align-items: baseline; padding-bottom: 0.4em; border-bottom: 1px dashed var(--c-border); }
.ing-scaler__name { color: var(--c-ink); }
.ing-scaler__qty { font-weight: 800; color: var(--c-accent-strong); }
.ing-scaler__unit { color: var(--c-muted); font-size: 0.9em; }

.size-chart { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.size-chart__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.size-chart__table { width: 100%; border-collapse: collapse; }
.size-chart__table th, .size-chart__table td { padding: 0.5em 0.7em; border-bottom: 1px solid var(--c-border); text-align: left; color: var(--c-ink); white-space: nowrap; }
.size-chart__table thead th { background: var(--c-accent-soft); font-weight: 700; }
.size-chart__table td.is-num, .size-chart__table th.is-num { text-align: center; }
.size-chart__sz { font-weight: 800; background: var(--c-surface); }
.size-chart__note { margin: 0.6em 0 0; }

.odds-table { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.odds-table__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.odds-table__table { width: 100%; border-collapse: collapse; }
.odds-table__asof { text-align: left; padding-bottom: 0.5em; }
.odds-table__table th, .odds-table__table td { padding: 0.5em 0.7em; border-bottom: 1px solid var(--c-border); text-align: left; color: var(--c-ink); white-space: nowrap; }
.odds-table__table td.is-num, .odds-table__table th.is-num { text-align: right; }
.odds-table__book { font-weight: 700; }
.odds-table__warn { margin: 0.6em 0 0; color: var(--c-warning); }

.rg-notice { display: flex; gap: 0.8em; align-items: flex-start; border: 1px solid var(--c-warning); border-left: 4px solid var(--c-warning); border-radius: var(--radius-sm); background: var(--c-warning-soft); padding: var(--space-3) var(--space-4); }
.rg-notice__badge { flex: 0 0 auto; font-weight: 800; color: var(--c-paper); background: var(--c-warning); border-radius: var(--radius-sm); padding: 0.15em 0.5em; font-size: 0.9em; }
.rg-notice__lead { margin: 0 0 0.3em; font-weight: 700; color: var(--c-ink); }
.rg-notice__help { margin: 0; font-size: 0.9em; color: var(--c-ink); }
.rg-notice__help a { color: var(--c-link); }

.benchmark-bar { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.benchmark-bar__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.benchmark-bar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; }
.benchmark-bar__row { display: grid; grid-template-columns: 8em 1fr auto; align-items: center; gap: 0.6em; }
.benchmark-bar__label { color: var(--c-ink); font-size: 0.9em; }
.benchmark-bar__crown { font-size: 0.7em; font-weight: 800; color: var(--c-paper); background: var(--c-accent-strong); border-radius: 3px; padding: 0 0.3em; }
.benchmark-bar__track { background: var(--c-accent-soft); border-radius: 4px; height: 0.85em; overflow: hidden; }
.benchmark-bar__fill { display: block; height: 100%; background: var(--c-accent); border-radius: 4px; }
.benchmark-bar__row.is-win .benchmark-bar__fill { background: var(--c-accent-strong); }
.benchmark-bar__val { font-weight: 800; color: var(--c-ink); }
.benchmark-bar__foot { margin: 0.6em 0 0; }

.seasonal-cal { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.seasonal-cal__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.seasonal-cal__table { border-collapse: collapse; width: 100%; min-width: 34rem; }
.seasonal-cal__table th, .seasonal-cal__table td { border: 1px solid var(--c-border); text-align: center; }
.seasonal-cal__mh, .seasonal-cal__corner { background: var(--c-surface); font-size: 0.8em; padding: 0.3em; color: var(--c-muted); }
.seasonal-cal__rh { text-align: left; padding: 0.3em 0.5em; font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.seasonal-cal__cell { padding: 0.2em; height: 2.1em; }
.seasonal-cal__tx { font-size: 0.68em; color: var(--c-ink); }
.seasonal-cal__cell.is-seed { background: var(--c-accent-soft); }
.seasonal-cal__cell.is-plant { background: var(--c-success-soft); }
.seasonal-cal__cell.is-harvest { background: var(--c-warning-soft); }
.seasonal-cal__cell.is-care { background: var(--c-surface); }
.seasonal-cal__cell.is-active { background: var(--c-accent-soft); }
.seasonal-cal__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.8em; margin: 0.6em 0 0; padding: 0; }
.seasonal-cal__legend li { display: flex; align-items: center; gap: 0.3em; }
.seasonal-cal__lg { width: 0.9em; height: 0.9em; border-radius: 3px; border: 1px solid var(--c-border); }
.seasonal-cal__lg.is-seed { background: var(--c-accent-soft); }
.seasonal-cal__lg.is-plant { background: var(--c-success-soft); }
.seasonal-cal__lg.is-harvest { background: var(--c-warning-soft); }
.seasonal-cal__lg.is-care { background: var(--c-surface); }

.milestone-tracker { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.milestone-tracker__title { margin: 0; font-weight: 800; color: var(--c-ink); }
.milestone-tracker__age { margin: 0.2em 0 var(--space-3); font-size: 0.85em; color: var(--c-accent-strong); font-weight: 700; }
.milestone-tracker__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.7em; }
.milestone-tracker__domain { border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-paper); padding: var(--space-3); }
.milestone-tracker__dh { margin: 0 0 0.4em; font-weight: 800; color: var(--c-accent-strong); font-size: 0.9em; }
.milestone-tracker__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3em; }
.milestone-tracker__items li { color: var(--c-ink); font-size: 0.9em; padding-left: 1em; position: relative; }
.milestone-tracker__items li::before { content: "✓"; position: absolute; left: 0; color: var(--c-success); font-weight: 800; }
.milestone-tracker__note { margin: 0.7em 0 0; font-size: 0.78em; }

.btv { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.btv__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.btv__strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.btv__cell { display: flex; flex-direction: column; align-items: center; padding: 0.4em 0.1em; border-radius: 3px; text-align: center; min-height: 3.2em; }
.btv__mo { font-weight: 800; font-size: 0.8em; color: var(--c-ink); }
.btv__memo { font-size: 0.6em; color: var(--c-ink); line-height: 1.2; margin-top: 0.2em; }
.btv__cell.is-best { background: var(--c-success-soft); }
.btv__cell.is-high { background: var(--c-warning-soft); }
.btv__cell.is-mid { background: var(--c-surface); }
.btv__cell.is-low { background: var(--c-accent-soft); }
.btv__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.8em; margin: 0.6em 0 0; padding: 0; }
.btv__legend li { display: flex; align-items: center; gap: 0.3em; }
.btv__lg { width: 0.9em; height: 0.9em; border-radius: 3px; border: 1px solid var(--c-border); }
.btv__lg.is-best { background: var(--c-success-soft); }
.btv__lg.is-high { background: var(--c-warning-soft); }
.btv__lg.is-mid { background: var(--c-surface); }
.btv__lg.is-low { background: var(--c-accent-soft); }

.cia { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.cia__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.cia__table { width: 100%; border-collapse: collapse; }
.cia__table th, .cia__table td { padding: 0.45em 0.6em; border-bottom: 1px solid var(--c-border); text-align: left; color: var(--c-ink); }
.cia__table td.is-num, .cia__table th.is-num { text-align: center; }
.cia__inci { font-weight: 700; white-space: nowrap; }
.cia__com, .cia__risk { display: inline-block; min-width: 1.6em; text-align: center; border-radius: 3px; padding: 0.05em 0.4em; font-weight: 700; font-size: 0.85em; }
.cia__com.is-low, .cia__risk.is-low { background: var(--c-success-soft); color: var(--c-success); }
.cia__com.is-mid, .cia__risk.is-mid { background: var(--c-warning-soft); color: var(--c-warning); }
.cia__com.is-high, .cia__risk.is-high { background: var(--c-danger-soft); color: var(--c-danger); }
.cia__note { margin: 0.6em 0 0; font-size: 0.78em; }

.ex-swap { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.ex-swap__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.ex-swap__muscle { font-weight: 500; }
.ex-swap__table { width: 100%; border-collapse: collapse; }
.ex-swap__table th, .ex-swap__table td { padding: 0.5em 0.7em; border-bottom: 1px solid var(--c-border); text-align: left; color: var(--c-ink); }
.ex-swap__table thead th { background: var(--c-accent-soft); font-weight: 700; font-size: 0.9em; }
.ex-swap__orig { font-weight: 800; }
.ex-swap__note { margin: 0.6em 0 0; }

.standings { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.standings__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.standings__table { width: 100%; border-collapse: collapse; }
.standings__asof { text-align: left; padding-bottom: 0.5em; }
.standings__table th, .standings__table td { padding: 0.4em 0.5em; border-bottom: 1px solid var(--c-border); text-align: left; color: var(--c-ink); }
.standings__table td.is-num, .standings__table th.is-num { text-align: center; }
.standings__rank { font-weight: 800; }
.standings__team { font-weight: 700; white-space: nowrap; }
.standings__pt { font-weight: 800; color: var(--c-accent-strong); }
.standings__form { white-space: nowrap; }
.standings__f { display: inline-block; width: 1.4em; text-align: center; border-radius: 3px; font-size: 0.72em; font-weight: 700; color: var(--c-paper); margin-right: 1px; }
.standings__f.is-w { background: var(--c-success); }
.standings__f.is-d { background: var(--c-muted); }
.standings__f.is-l { background: var(--c-danger); }

.trip-budget { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.trip-budget__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.trip-budget__table { width: 100%; border-collapse: collapse; }
.trip-budget__table th, .trip-budget__table td { padding: 0.45em 0.6em; border-bottom: 1px solid var(--c-border); text-align: left; color: var(--c-ink); }
.trip-budget__table td.is-num, .trip-budget__table th.is-num { text-align: right; white-space: nowrap; }
.trip-budget__total th, .trip-budget__total td { border-top: 2px solid var(--c-border); border-bottom: 0; font-weight: 800; color: var(--c-accent-strong); }
.trip-budget__per { list-style: none; display: flex; flex-wrap: wrap; gap: 1em; margin: 0.6em 0 0; padding: 0; }

.game-stat { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.game-stat__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--c-border); }
.game-stat__type { font-size: 0.72em; font-weight: 800; color: var(--c-paper); background: var(--c-accent-strong); border-radius: 3px; padding: 0.1em 0.4em; }
.game-stat__name { font-weight: 800; font-size: 1.1em; color: var(--c-ink); }
.game-stat__lv { margin-left: auto; font-size: 0.82em; color: var(--c-muted); font-weight: 700; }
.game-stat__vitals { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 0.5em; }
.game-stat__vitals li { display: flex; flex-direction: column; }
.game-stat__k { font-size: 0.75em; color: var(--c-muted); }
.game-stat__v { font-weight: 800; color: var(--c-ink); }
.game-stat__tags { display: grid; gap: 0.4em; }
.game-stat__tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em; }
.game-stat__tk { font-size: 0.78em; font-weight: 700; color: var(--c-muted); min-width: 2.6em; }
.game-stat__tag { font-size: 0.8em; border-radius: 3px; padding: 0.1em 0.5em; font-weight: 700; }
.game-stat__tag.is-weak { background: var(--c-danger-soft); color: var(--c-danger); }
.game-stat__tag.is-resist { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.game-stat__tag.is-drop { background: var(--c-warning-soft); color: var(--c-warning); }
.game-stat__tip { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--c-border); color: var(--c-ink); font-size: 0.92em; }
.game-stat__tip p:last-child { margin-bottom: 0; }

.care-spec { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.care-spec__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin-bottom: var(--space-3); }
.care-spec__name { font-weight: 800; font-size: 1.1em; color: var(--c-ink); }
.care-spec__type { font-size: 0.75em; font-weight: 700; color: var(--c-paper); background: var(--c-accent); border-radius: 3px; padding: 0.1em 0.45em; }
.care-spec__grid { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.5em; }
.care-spec__cell { display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-paper); padding: 0.4em 0.6em; }
.care-spec__k { font-size: 0.72em; color: var(--c-muted); }
.care-spec__v { font-weight: 700; color: var(--c-ink); }
.care-spec__tox { display: flex; gap: 0.5em; align-items: baseline; margin: 0; padding: 0.5em 0.7em; border-radius: var(--radius-sm); background: var(--c-success-soft); }
.care-spec__tox.is-toxic { background: var(--c-danger-soft); }
.care-spec__tox-k { flex: 0 0 auto; font-weight: 800; font-size: 0.82em; color: var(--c-success); }
.care-spec__tox.is-toxic .care-spec__tox-k { color: var(--c-danger); }
.care-spec__tox-v { color: var(--c-ink); font-size: 0.9em; }
.care-spec__body { margin-top: var(--space-3); color: var(--c-ink); font-size: 0.92em; }
.care-spec__body p:last-child { margin-bottom: 0; }

/* ============================================================
   Phase 60 — 전환·CRO 컴포넌트 10종 (색은 var() 토큰만, 추가만)
   where-to-buy-box·sticky-buy-bar·product-finder-quiz·deal-grid·
   reading-progress-bar·section-pill-nav·floating-share-bar·back-to-top·
   sticky-pick-card·editor-choice-seal
   공통: word-break:keep-all, sticky/floating은 닫기 버튼·prefers-reduced-motion 존중,
   본문·광고 가림 금지(하단 얇은 바/모서리 소형 버튼). 버튼은 .offer-box__btn 셸 톤 재사용.
   ============================================================ */

.wtb, .deal-grid, .pfq, .editor-seal { word-break: keep-all; margin: 1.6em 0; }
.sticky-buy-bar, .pill-nav, .share-bar, .back-to-top, .sticky-pick,
.reading-progress { word-break: keep-all; }

.wtb { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.wtb__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; margin-bottom: var(--space-3); }
.wtb__title { font-weight: 800; color: var(--c-ink); }
.wtb__product { color: var(--c-muted); font-size: 0.92em; }
.wtb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; }
.wtb__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.8em; padding: 0.6em 0.7em; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-paper); }
.wtb__store { font-weight: 700; color: var(--c-ink); }
.wtb__price { font-weight: 700; color: var(--c-accent-strong); }
.wtb__stock { font-size: 0.82em; color: var(--c-muted); }
.wtb__btn { margin-left: auto; display: inline-block; padding: 0.45rem 0.9rem; border-radius: var(--radius-sm); background: var(--c-accent); color: var(--c-paper); font-weight: 700; text-decoration: none; }
.wtb__btn:hover { background: var(--c-cta-hover); }
.wtb__nolink { margin-left: auto; font-size: 0.82em; color: var(--c-muted); }
.wtb__note { margin: var(--space-3) 0 0; }

.sticky-buy-bar__anchor { display: block; height: 1px; }
.sticky-buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0.9em; background: var(--c-surface); border-top: 1px solid var(--c-border); box-shadow: var(--c-shadow-lg); transform: translateY(0); }
@media (prefers-reduced-motion: no-preference) { .sticky-buy-bar { transition: transform 0.2s ease; }}
.sticky-buy-bar__info { display: flex; flex-direction: column; min-width: 0; }
.sticky-buy-bar__product { font-weight: 700; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-buy-bar__meta { display: flex; gap: 0.6em; font-size: 0.85em; }
.sticky-buy-bar__rating { color: var(--c-warning); font-weight: 700; }
.sticky-buy-bar__price { color: var(--c-accent-strong); font-weight: 700; }
.sticky-buy-bar__btn { margin-left: auto; flex: 0 0 auto; padding: 0.55rem 1rem; border-radius: var(--radius-sm); background: var(--c-accent); color: var(--c-paper); font-weight: 800; text-decoration: none; }
.sticky-buy-bar__btn:hover { background: var(--c-cta-hover); }
.sticky-buy-bar__close { flex: 0 0 auto; border: none; background: transparent; color: var(--c-muted); font-size: 1em; cursor: pointer; padding: 0.2em 0.4em; line-height: 1; }

.pfq { border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); padding: var(--space-4) var(--space-5); }
.pfq__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.pfq__q { border: none; margin: 0 0 var(--space-3); padding: 0; }
.pfq__q-label { font-weight: 700; color: var(--c-ink); padding: 0; margin-bottom: 0.4em; }
.pfq__opts { display: flex; flex-wrap: wrap; gap: 0.5em; }
.pfq__opt { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.35em 0.7em; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-paper); cursor: pointer; font-size: 0.9em; color: var(--c-ink); }
.pfq__opt:hover { border-color: var(--c-accent); }
.pfq__go { margin-top: 0.4em; padding: 0.5rem 1.1rem; border: none; border-radius: var(--radius-sm); background: var(--c-accent); color: var(--c-paper); font-weight: 700; cursor: pointer; }
.pfq__go:hover { background: var(--c-cta-hover); }
.pfq__result { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--c-accent-soft); border-radius: var(--radius-sm); background: var(--c-accent-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.8em; }
.pfq__result--todo, .pfq__result--none { background: var(--c-paper); border-color: var(--c-border); color: var(--c-muted); }
.pfq__result-badge { font-size: 0.72em; font-weight: 800; padding: 0.15em 0.5em; border-radius: var(--radius-sm); background: var(--c-accent); color: var(--c-paper); }
.pfq__result-name { color: var(--c-ink); font-size: 1.05em; }
.pfq__result-desc { color: var(--c-muted); font-size: 0.9em; }
.pfq__result-btn { margin-left: auto; padding: 0.4rem 0.9rem; border-radius: var(--radius-sm); background: var(--c-accent); color: var(--c-paper); font-weight: 700; text-decoration: none; }
.pfq__result-btn:hover { background: var(--c-cta-hover); }
.pfq__note { margin: var(--space-3) 0 0; }

.deal-grid { }
.deal-grid__title { margin: 0 0 var(--space-3); font-weight: 800; color: var(--c-ink); }
.deal-grid__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8em; }
.deal-grid__card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4em; padding: 0.9em 1em; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); }
.deal-grid__card.is-expired { opacity: 0.6; }
.deal-grid__disc { font-weight: 800; font-size: 0.82em; padding: 0.15em 0.55em; border-radius: var(--radius-sm); background: var(--c-danger-soft); color: var(--c-danger); }
.deal-grid__name { font-weight: 700; color: var(--c-ink); }
.deal-grid__code { align-self: stretch; font-family: var(--font-mono, monospace); text-align: center; padding: 0.35em; border: 1px dashed var(--c-line-strong); border-radius: var(--radius-sm); background: var(--c-paper); color: var(--c-ink); }
.deal-grid__exp { margin: 0; }
.deal-grid__btn { margin-top: 0.2em; align-self: stretch; text-align: center; padding: 0.45rem 0.9rem; border-radius: var(--radius-sm); background: var(--c-accent); color: var(--c-paper); font-weight: 700; text-decoration: none; }
.deal-grid__btn:hover { background: var(--c-cta-hover); }
.deal-grid__closed { margin-top: 0.2em; font-size: 0.85em; font-weight: 700; color: var(--c-muted); }

.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; background: transparent; pointer-events: none; }
.reading-progress__fill { display: block; height: 100%; width: 0; background: var(--c-accent); }
@media (prefers-reduced-motion: no-preference) { .reading-progress__fill { transition: width 0.08s ease-out; }}

.pill-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.6em; background: var(--c-surface); border-bottom: 1px solid var(--c-border); box-shadow: var(--c-shadow-sm); margin: 1.4em 0; }
.pill-nav__title { flex: 0 0 auto; font-weight: 800; font-size: 0.85em; color: var(--c-muted); }
.pill-nav__list { flex: 1 1 auto; list-style: none; margin: 0; padding: 0; display: flex; gap: 0.4em; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.pill-nav__item { flex: 0 0 auto; }
.pill-nav__pill { display: inline-block; padding: 0.3em 0.75em; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-paper); color: var(--c-ink); font-size: 0.85em; text-decoration: none; white-space: nowrap; }
.pill-nav__pill:hover { border-color: var(--c-accent); color: var(--c-accent-strong); }
.pill-nav__close { flex: 0 0 auto; border: none; background: transparent; color: var(--c-muted); cursor: pointer; padding: 0.2em 0.4em; line-height: 1; }

.share-bar { position: fixed; left: 0.6em; bottom: 5.5em; z-index: 55; display: flex; flex-direction: column; align-items: center; gap: 0.4em; padding: 0.5em 0.45em; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--c-shadow-md); }
.share-bar__label { font-size: 0.7em; font-weight: 800; color: var(--c-muted); }
.share-bar__btn { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border: 1px solid var(--c-border); border-radius: 50%; background: var(--c-paper); color: var(--c-ink); font-weight: 800; font-size: 0.85em; text-decoration: none; cursor: pointer; }
.share-bar__btn:hover { border-color: var(--c-accent); color: var(--c-accent-strong); }
.share-bar__btn--copy { width: auto; border-radius: 999px; padding: 0 0.6em; font-size: 0.72em; }
.share-bar__close { border: none; background: transparent; color: var(--c-muted); cursor: pointer; padding: 0.1em 0.3em; line-height: 1; font-size: 0.85em; }
@media (max-width: 640px) { .share-bar { flex-direction: row; left: 0; right: 0; bottom: 0; border-radius: 0; border-left: none; border-right: none; justify-content: center; }}

.back-to-top { position: fixed; right: 1em; bottom: 5.5em; z-index: 55; display: inline-flex; align-items: center; gap: 0.35em; padding: 0.5em 0.8em; border: 2px solid var(--c-ink); border-radius: 0; background: var(--c-paper); color: var(--c-ink); box-shadow: var(--c-shadow-1); cursor: pointer; font-size: 0.85em; }
.back-to-top:hover { border-color: var(--c-accent); color: var(--c-accent-strong); }
.back-to-top__arrow { font-weight: 800; }
@media (max-width: 640px) { .back-to-top__txt { display: none; } .back-to-top { padding: 0.6em; }}

.sticky-pick { position: fixed; right: 1em; bottom: 1em; z-index: 56; width: min(300px, calc(100vw - 2em)); display: flex; flex-direction: column; gap: 0.4em; padding: 0.8em 0.9em; background: var(--c-surface); border: 1px solid var(--c-accent-soft); border-radius: var(--radius-md); box-shadow: var(--c-shadow-lg); }
.sticky-pick__toggle { display: none; }
.sticky-pick.is-collapsed .sticky-pick__body { display: none; }
.sticky-pick.is-collapsed .sticky-pick__toggle { display: inline-block; }
.sticky-pick__badge { align-self: flex-start; font-size: 0.7em; font-weight: 800; padding: 0.15em 0.55em; border-radius: var(--radius-sm); background: var(--c-accent); color: var(--c-paper); }
.sticky-pick__product { font-weight: 800; color: var(--c-ink); }
.sticky-pick__meta { display: flex; gap: 0.7em; font-size: 0.85em; }
.sticky-pick__rating { color: var(--c-warning); font-weight: 700; }
.sticky-pick__price { color: var(--c-accent-strong); font-weight: 700; }
.sticky-pick__btn { margin-top: 0.2em; text-align: center; padding: 0.5rem 1rem; border-radius: var(--radius-sm); background: var(--c-accent); color: var(--c-paper); font-weight: 800; text-decoration: none; }
.sticky-pick__btn:hover { background: var(--c-cta-hover); }
.sticky-pick__close { position: absolute; top: 0.3em; right: 0.4em; border: none; background: transparent; color: var(--c-muted); cursor: pointer; line-height: 1; }
.sticky-pick__toggle { border: none; background: transparent; color: var(--c-accent-strong); font-weight: 800; cursor: pointer; }
@media (max-width: 640px) { .sticky-pick { right: 0; left: 0; bottom: 0; width: auto; border-radius: 0; border-left: none; border-right: none; flex-direction: row; flex-wrap: wrap; align-items: center; } .sticky-pick__btn { margin-left: auto; margin-top: 0; }}

.editor-seal { display: flex; align-items: center; gap: 0.9em; padding: var(--space-4) var(--space-5); border: 1px solid var(--c-accent-soft); border-radius: var(--radius-md); background: var(--c-accent-soft); }
.editor-seal__medal { position: relative; flex: 0 0 auto; width: 3.2em; height: 3.6em; }
.editor-seal__ribbon-l, .editor-seal__ribbon-r { position: absolute; bottom: 0; width: 0.7em; height: 1.4em; background: var(--c-accent); }
.editor-seal__ribbon-l { left: 0.85em; transform: rotate(12deg); }
.editor-seal__ribbon-r { right: 0.85em; transform: rotate(-12deg); }
.editor-seal__disc { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--c-accent); display: flex; align-items: center; justify-content: center; box-shadow: var(--c-shadow-sm); }
.editor-seal__star { color: var(--c-paper); font-size: 1.3em; }
.editor-seal__label { margin: 0; font-weight: 800; font-size: 0.8em; letter-spacing: 0.03em; color: var(--c-accent-strong); text-transform: uppercase; }
.editor-seal__year { color: var(--c-muted); }
.editor-seal__product { margin: 0.15em 0 0; font-weight: 800; color: var(--c-ink); font-size: 1.05em; }
.editor-seal__reason { margin-top: 0.3em; color: var(--c-ink); font-size: 0.92em; }
.editor-seal__reason p:last-child { margin-bottom: 0; }


/* ===================================================================== */
/* 후보C 레이아웃 레이어 (UAG 9.6) — 순백·NanumSquare Neo·틸 에디토리얼       */
/* 팔레트는 :root 단일 출처 토큰만(Phase 43). 기존 shortcode 컴포넌트는      */
/* --c-* 재바인딩으로 자동 조화(레이아웃 레이어만 교체, 컴포넌트 클래스 미포함) */
/* ===================================================================== */
:root{
  /* 폰트 — 본문=시스템 스택(무CDN), 디스플레이=NanumSquare Neo self-host */
  --font-body:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --font-display:'NanumSquare Neo',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  /* 후보B 네오브루탈 팔레트 (규격 변수) — 캔버스/서피스 분리, 단일 그린 액센트 */
  --c-canvas:#F3F4F2; --c-paper:#FFFFFF; --c-surface:#E6E7E3;
  --c-ink:#141414; --c-ink-soft:#3A3A38; --c-muted:#5E5F5A; --c-faint:#666763;
  --c-border:#141414; --c-border-strong:#141414;
  --c-accent:#107049; --c-accent-strong:#0B5537; --c-accent-soft:#DCEDE4;
  --c-marker:#107049;
  --c-r:0px; --c-r-s:0px; --c-hard:#141414;
  --c-shadow-1:3px 3px 0 var(--c-hard);
  --c-shadow-hover:5px 5px 0 var(--c-hard);
  /* 카테고리 색 = 썸네일 컬러블록 전용(UI 액센트는 그린 하나) */
  --c-cat-1:#2A5EC0; --c-cat-2:#6D28D9; --c-cat-3:#B0245A; --c-cat-4:#A83E04;
  /* 파생 토큰 — 하드코딩 금지(Phase 43): 흰 글자·솔리드 배경·하드 오프셋 그림자 */
  --c-on-accent:#FFFFFF; --c-prose-ink:#2A2A28;
  --c-nav-bg:#FFFFFF; --c-mbn-bg:#FFFFFF;
  --c-scrim:rgba(20,20,20,.42);
  --c-fab-shadow:3px 3px 0 var(--c-hard);
  --c-mbn-shadow:0 -2px 0 var(--c-border);
  --c-chip:var(--c-ink); --c-sc:var(--c-accent);
  --c-tc:var(--c-accent); /* 썸네일 폴백 카테고리 틴트 기본값(인라인 --c-tc가 override) */
}

/* NanumSquare Neo — static/fonts/ self-host(CDN 0). SIL OFL 1.1 (c)NAVER: /fonts/NanumSquareNeo-OFL.txt */
/* KS X 1001 서브셋(웨이트당 149KB). size-adjust/메트릭 오버라이드 = 폴백 스택 근사 → swap 리플로우/CLS 0 */
@font-face{font-family:'NanumSquare Neo';font-weight:400 500;font-style:normal;font-display:swap;size-adjust:90%;ascent-override:88%;descent-override:22%;line-gap-override:0%;src:url("/fonts/NanumSquareNeo-Regular.woff2") format('woff2'), url("/fonts/NanumSquareNeo-Regular.woff") format('woff')}
@font-face{font-family:'NanumSquare Neo';font-weight:600 700;font-style:normal;font-display:swap;size-adjust:90%;ascent-override:88%;descent-override:22%;line-gap-override:0%;src:url("/fonts/NanumSquareNeo-Bold.woff2") format('woff2'), url("/fonts/NanumSquareNeo-Bold.woff") format('woff')}
@font-face{font-family:'NanumSquare Neo';font-weight:800 900;font-style:normal;font-display:swap;size-adjust:90%;ascent-override:88%;descent-override:22%;line-gap-override:0%;src:url("/fonts/NanumSquareNeo-ExtraBold.woff2") format('woff2'), url("/fonts/NanumSquareNeo-ExtraBold.woff") format('woff')}

/* 후보C 기본 — body 폭 제약 해제(컨테이너가 폭 담당) */
body.cc{max-width:none;margin:0;padding:0;font-family:var(--font-body);background:var(--c-canvas);color:var(--c-ink);-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.cc :focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.cc [tabindex="-1"]:focus{outline:none}
.cc .skip-link{position:absolute;left:8px;top:-56px;z-index:120;background:var(--c-accent);color:var(--c-on-accent);padding:9px 16px;border-radius:0 0 var(--c-r-s) var(--c-r-s);font-family:var(--font-display);font-weight:700;font-size:13px;text-decoration:none;transition:top .18s}
.cc .skip-link:focus{top:0}

/* ===== 상단 네비 ===== */
.site-nav{position:sticky;top:0;left:0;right:0;z-index:60;background:var(--c-nav-bg);border-bottom:2px solid var(--c-ink)}
.nav-inner{max-width:72rem;margin:0 auto;padding:0 16px;width:100%}
@media(min-width:768px){.nav-inner{padding:0 24px}}
/* 2단 마스트헤드: 로고 | (검색·토글) / 카테고리 풀폭 바(모바일=가로 스크롤 바) */
.nav-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'logo logo right' 'links links links';align-items:center;row-gap:12px;column-gap:16px;height:auto;padding:12px 0}
@media(min-width:768px){.nav-row{padding:14px 0}}
.nav-left{display:contents}
.nav-logo{grid-area:logo;justify-self:start;display:flex;align-items:center;gap:9px;text-decoration:none}
.nav-logo-badge{width:28px;height:28px;border-radius:0;display:flex;align-items:center;justify-content:center;background:var(--c-accent);color:var(--c-on-accent);flex-shrink:0}
.nav-logo-badge svg{width:16px;height:16px}
.nav-logo-badge img{width:28px;height:28px;border-radius:0;object-fit:cover}
.nav-logo-txt{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--c-ink);letter-spacing:-.01em}
.nav-links{grid-area:links;justify-self:stretch;display:flex;align-items:stretch;gap:0;border:2px solid var(--c-ink);box-shadow:2px 2px 0 var(--c-hard);overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav-links a{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--c-ink);text-decoration:none;padding:9px 16px;border-right:2px solid var(--c-ink);white-space:nowrap;transition:background .08s steps(3),color .08s steps(3)}
.nav-links a:last-child{border-right:0}
.nav-links a:hover,.nav-links a.current{background:var(--c-accent);color:var(--c-on-accent)}
.nav-right{grid-area:right;justify-self:end;display:inline-flex;align-items:center;gap:10px}
.nav-search{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--c-ink);border-radius:0;background:var(--c-paper);color:var(--c-ink);cursor:pointer;box-shadow:2px 2px 0 var(--c-hard);transition:transform .08s steps(3),box-shadow .08s steps(3),background .1s;text-decoration:none}
.nav-search:hover{background:var(--c-accent);color:var(--c-on-accent);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--c-hard)}
.nav-search:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--c-hard)}
.nav-search svg{width:19px;height:19px}
/* 다크 모드 토글 버튼 (nav-search 옆) — 사각 하드보더 */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--c-ink);border-radius:0;background:var(--c-paper);color:var(--c-ink);cursor:pointer;box-shadow:2px 2px 0 var(--c-hard);transition:transform .08s steps(3),box-shadow .08s steps(3),background .1s}
.theme-toggle:hover{background:var(--c-accent);color:var(--c-on-accent);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--c-hard)}
.theme-toggle svg{width:19px;height:19px}
@media(max-width:640px){.nav-row{grid-template-columns:1fr auto;grid-template-areas:'logo right' 'links links';row-gap:11px}.nav-links{box-shadow:none}}
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:inline-flex}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ic-moon{display:none}
  :root:not([data-theme="light"]) .theme-toggle .ic-sun{display:inline-flex}
}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:inline-flex}
:root[data-theme="light"] .theme-toggle .ic-moon{display:inline-flex}
:root[data-theme="light"] .theme-toggle .ic-sun{display:none}

/* ===== 홈 ===== */
.home{background:var(--c-canvas)}
.home-feed{max-width:72rem;margin:0 auto;padding:28px 22px 76px;width:100%}
@media(min-width:768px){.home-feed{padding:36px 24px 96px}}
.home-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:34px 0 22px;padding-bottom:14px;border-bottom:1px solid var(--c-border)}
.home-sec-head h2{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--c-ink);letter-spacing:.01em}
.home-sec-head .more{font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--c-accent-strong);text-decoration:none;white-space:nowrap;transition:color .15s}
.home-sec-head .more:hover{color:var(--c-accent)}
.lead-card{display:grid;grid-template-columns:1fr;gap:0;background:var(--c-paper);border:2px solid var(--c-ink);border-radius:var(--c-r);overflow:hidden;text-decoration:none;box-shadow:var(--c-shadow-1);transition:transform .08s steps(3),box-shadow .08s steps(3)}
.lead-card:hover{transform:translate(-2px,-2px);box-shadow:var(--c-shadow-hover);border-color:var(--c-ink)}
@media(min-width:720px){.lead-card{grid-template-columns:minmax(0,40%) 1fr;align-items:stretch}}
.lead-card .lc-thumb{position:relative;aspect-ratio:1/1;height:100%;border-bottom:2px solid var(--c-ink);overflow:hidden}
@media(min-width:720px){.lead-card .lc-thumb{border-bottom:none;border-right:2px solid var(--c-ink)}}
.lead-card .lc-thumb img{width:100%;height:100%;object-fit:cover}
.lead-card .lc-body{padding:22px 22px 24px;display:flex;flex-direction:column;justify-content:center}
@media(min-width:768px){.lead-card .lc-body{padding:32px 36px}}
.lead-card .lc-cat{margin-bottom:12px}
.lead-card h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.35rem,3.2vw,1.85rem);line-height:1.3;color:var(--c-ink);letter-spacing:-.015em;margin-bottom:12px;word-break:keep-all}
.lead-card:hover h2{color:var(--c-accent-strong)}
.lead-card p{font-family:var(--font-body);font-size:14px;line-height:1.7;color:var(--c-ink-soft);word-break:keep-all;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cat-sec{margin-top:46px}
.cat-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--c-ink)}
.cat-sec-head .cs-title{display:flex;align-items:center;gap:10px}
.cat-sec-head .cs-bar{width:12px;height:12px;border-radius:0;background:var(--c-ink)}
.cat-sec-head h2{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--c-ink);letter-spacing:-.01em}
.cat-sec-head .more{font-family:var(--font-body);font-weight:700;font-size:13px;color:var(--c-sc,var(--c-accent-strong));text-decoration:none;white-space:nowrap;transition:opacity .15s}
.cat-sec-head .more:hover{opacity:.65}
/* 썸네일 폴백 — 카테고리색 틴트(--c-tc, 인라인 주입). color-mix 미지원 시 --c-surface 자동 폴백 */
/* 썸네일 폴백 = 카테고리 솔리드 컬러블록(--c-tc 인라인 주입). 흰 청키 아이콘 */
.imgph{position:relative;background:var(--c-tc, var(--c-accent));display:flex;align-items:center;justify-content:center}
.imgph .ph{color:var(--c-on-accent)}
.imgph .ph svg{width:26px;height:26px;opacity:.9}

/* ===== 카드 시스템 (홈·목록 공용) ===== */
.blog-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:560px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.blog-grid{grid-template-columns:1fr 1fr 1fr}}
.blog-grid-link{display:block;text-decoration:none}
.blog-grid-card{background:var(--c-paper);border:2px solid var(--c-ink);border-radius:var(--c-r);overflow:hidden;height:100%;display:flex;flex-direction:column;box-shadow:var(--c-shadow-1);transition:transform .08s steps(3),box-shadow .08s steps(3)}
.blog-grid-card:hover{transform:translate(-2px,-2px);box-shadow:var(--c-shadow-hover);border-color:var(--c-ink)}
.blog-grid-thumb{width:100%;aspect-ratio:1/1;overflow:hidden;position:relative;border-bottom:2px solid var(--c-ink)}
.blog-grid-thumb img{width:100%;height:100%;object-fit:cover}
.blog-grid-thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.card-body{padding:16px 16px 18px}
.card-meta{margin-bottom:9px}
.blog-card-title{font-family:var(--font-body);font-size:15.5px;font-weight:700;color:var(--c-ink);line-height:1.5;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .15s;word-break:keep-all}
.blog-grid-card:hover .blog-card-title{color:var(--c-accent-strong)}
.cat-chip{display:inline-flex;align-items:center;font-family:var(--font-body);font-size:.8125rem;font-weight:700;line-height:1.3;color:var(--c-chip,var(--c-ink));text-decoration:none}
a.cat-chip:hover{opacity:.82}
.article-metarow .cat-chip{font-size:12px}

/* ===== 목록 ===== */
.list-page{background:var(--c-canvas);padding-bottom:76px}
.list-container{max-width:66rem;margin:0 auto;padding:28px 18px;width:100%}
@media(min-width:768px){.list-container{padding:44px 18px}}
.list-toolbar{margin-bottom:26px;padding-bottom:16px;border-bottom:1px solid var(--c-border)}
.blog-tabs{display:none;flex-wrap:wrap;align-items:center;gap:8px}
@media(min-width:768px){.blog-tabs{display:flex}}
.blog-tab{font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--c-ink-soft);text-decoration:none;padding:7px 15px;border:2px solid var(--c-ink);border-radius:0;background:var(--c-paper);transition:all .12s;white-space:nowrap}
.blog-tab:hover{border-color:var(--c-accent);color:var(--c-accent-strong)}
.blog-tab.is-active{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent)}
.blog-mobile-select{font-family:var(--font-body);font-size:14px;font-weight:600;padding:9px 30px 9px 14px;border:2px solid var(--c-ink);border-radius:0;background:var(--c-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23107049' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--c-ink);outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;width:100%;max-width:280px}
@media(min-width:768px){.mobile-only-select{display:none}}
.pagination-wrap{margin-top:48px;display:flex;justify-content:center}
.pagination{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:13px;user-select:none;flex-wrap:wrap;justify-content:center}
.pagination>span,.pagination>a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border:2px solid var(--c-ink);border-radius:var(--c-r-s);background:var(--c-paper);color:var(--c-ink-soft);text-decoration:none;transition:all .12s}
.pagination>a:hover{border-color:var(--c-accent);color:var(--c-accent-strong);transform:translateY(-1px)}
.pagination>span.current{background:var(--c-accent);color:var(--c-on-accent);border-color:var(--c-accent);font-weight:700}
.pagination>span.gap{border:none;background:none;color:var(--c-faint)}

/* ===== 글 상세 ===== */
.detail-page{background:var(--c-canvas);padding-bottom:76px;position:relative}
.blog-progress-wrap{position:sticky;top:57px;left:0;right:0;height:2px;z-index:55;background:transparent}
@media(min-width:768px){.blog-progress-wrap{top:63px}}
.blog-progress-bar{height:100%;background:var(--c-accent);transform-origin:left;transform:scaleX(0);transition:transform .1s ease-out}
.detail-container{max-width:62rem;margin:0 auto;padding:20px 18px;width:100%}
@media(min-width:768px){.detail-container{padding:34px 18px}}
.breadcrumb{margin-bottom:16px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-family:var(--font-body);font-size:12px;margin:0;padding:0}
.breadcrumb li{margin:0;padding:0}
.breadcrumb li::before{display:none}
.breadcrumb a{color:var(--c-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--c-accent-strong)}
.breadcrumb li[aria-hidden]{color:var(--c-faint)}
.breadcrumb li[aria-current]{color:var(--c-ink-soft);font-weight:600;max-width:56vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-layout{display:block}
@media(min-width:1024px){.detail-layout{display:flex;gap:44px;align-items:flex-start}}
.detail-main{min-width:0}
@media(min-width:1024px){.detail-main{flex:1;max-width:44rem}}
.toc-aside{display:none}
@media(min-width:1024px){.toc-aside{display:block;width:224px;flex-shrink:0;position:sticky;top:92px;max-height:calc(100vh - 116px);overflow-y:auto}}
.toc-inner{position:relative;padding:2px 0 2px 18px}
.toc-inner::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--c-border)}
.toc-ind{position:absolute;left:-1px;width:3px;border-radius:2px;background:var(--c-accent);top:0;height:0;transition:top .28s cubic-bezier(.4,0,.2,1),height .28s cubic-bezier(.4,0,.2,1)}
.toc-head{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--c-muted);margin-bottom:12px}
.toc-list{list-style:none;padding:0;margin:0}
.toc-list li{margin:0;padding:0}
.toc-list li::before{display:none}
.toc-list a{display:block;font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--c-muted);text-decoration:none;padding:6px 0;transition:color .18s}
.toc-list a:hover{color:var(--c-ink)}
.toc-list a.is-current{color:var(--c-accent-strong);font-weight:700}
.toc-list li.lvl-3 a{padding-left:14px;font-size:12px;color:var(--c-faint)}
.toc-list li.lvl-3 a.is-current{color:var(--c-accent-strong)}
.toc-fab{display:none;position:fixed;right:16px;bottom:76px;z-index:58;align-items:center;gap:7px;height:46px;padding:0 18px;border-radius:0;background:var(--c-ink);color:var(--c-on-accent);font-family:var(--font-display);font-weight:700;font-size:13px;box-shadow:var(--c-fab-shadow);cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;border:none}
.toc-fab svg{width:16px;height:16px}
.toc-fab.show{display:inline-flex;opacity:1;transform:translateY(0)}
@media(min-width:1024px){.toc-fab{display:none!important}}
.toc-sheet{position:fixed;inset:0;z-index:70;display:none}
.toc-sheet.open{display:block}
.toc-sheet .scrim{position:absolute;inset:0;background:var(--c-scrim);opacity:0;transition:opacity .25s}
.toc-sheet.open .scrim{opacity:1}
.toc-sheet .panel{position:absolute;left:0;right:0;bottom:0;background:var(--c-paper);border-radius:18px 18px 0 0;padding:8px 20px max(20px,env(safe-area-inset-bottom));max-height:72vh;overflow-y:auto;transform:translateY(100%);transition:transform .28s cubic-bezier(.32,.72,0,1)}
.toc-sheet.open .panel{transform:translateY(0)}
.toc-sheet .grip{width:38px;height:4px;border-radius:2px;background:var(--c-border-strong);margin:8px auto 12px}
.toc-sheet .sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.toc-sheet .sheet-head h4{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--c-ink)}
.toc-sheet .sheet-close{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:var(--c-muted);border-radius:0;border:none;background:none;cursor:pointer}
.toc-sheet .toc-list a{font-size:15px;padding:12px 0;min-height:46px;display:flex;align-items:center;border-bottom:1px solid var(--c-border);color:var(--c-ink-soft)}
.toc-sheet .toc-list a.is-current{color:var(--c-accent-strong);font-weight:700}
.toc-sheet .toc-list li:last-child a{border-bottom:none}
.blog-article-card{background:var(--c-paper);border:1px solid var(--c-border);border-radius:var(--c-r);box-shadow:var(--c-shadow-1);overflow:hidden;margin-bottom:20px}
/* 커버 = 전 썸네일 1:1 규격 통일. 풀폭 와이드 폐기 → 본문 컬럼 안 상단 중앙 1:1(과대 방지 max-width) */
.article-thumb{width:100%;max-width:340px;margin:22px auto 0;aspect-ratio:1/1;overflow:hidden;position:relative;border:1px solid var(--c-border);border-radius:var(--c-r)}
@media(min-width:768px){.article-thumb{max-width:380px;margin:32px auto 0}}
.article-thumb img{width:100%;height:100%;object-fit:cover}
.article-thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--c-faint)}
.article-thumb .ph svg{width:32px;height:32px;opacity:.7}
.article-head{padding:22px 22px 0}
@media(min-width:768px){.article-head{padding:32px 40px 0}}
.article-metarow{margin-bottom:12px}
.blog-article-card .article-title{font-family:var(--font-display);font-weight:800;color:var(--c-ink);line-height:1.32;font-size:clamp(1.4rem,4.4vw,1.9rem);margin:0 0 14px;letter-spacing:-.015em;word-break:keep-all;border:0;padding:0}
.article-byline{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--c-border)}
.article-author{font-family:var(--font-body);font-size:12px;color:var(--c-ink-soft);font-weight:600}
.article-tags{display:flex;gap:6px;flex-wrap:wrap}
.article-tags span{font-family:var(--font-body);font-size:11px;color:var(--c-muted)}
.article-tags span::before{content:'#';color:var(--c-faint)}
.article-body{padding:22px}
@media(min-width:768px){.article-body{padding:26px 40px 0}}

/* 본문 프로즈 (마크다운 본문 전용 — 컴포넌트 shortcode는 자체 스타일 유지) */
.prose-blog{font-family:var(--font-body);font-size:16.5px;line-height:1.86;color:var(--c-prose-ink);word-break:keep-all;overflow-wrap:break-word}
.prose-blog p{margin:1.1em 0}
.prose-blog p.lead{font-size:18px;line-height:1.78;color:var(--c-ink);font-weight:500;margin:0 0 .6em}
.prose-blog .lead-points{margin:0 0 1.6em;padding:0;list-style:none}
.prose-blog .lead-points li{position:relative;padding-left:22px;font-family:var(--font-body);font-size:15px;line-height:1.7;color:var(--c-ink-soft);margin:7px 0;word-break:keep-all}
.prose-blog .lead-points li::before{content:'';position:absolute;left:0;top:.66em;width:12px;height:2px;background:var(--c-accent)}
.prose-blog .lead-points strong{color:var(--c-ink);font-weight:700}
.prose-blog h2{display:table;font-family:var(--font-display);font-weight:800;font-size:1.34em;color:var(--c-ink);margin:1.9em 0 .7em;padding:0;line-height:1.3;letter-spacing:-.01em;scroll-margin-top:88px;background-image:linear-gradient(var(--c-marker),var(--c-marker));background-repeat:no-repeat;background-position:0 .78em;background-size:100% .36em;border:0}
.prose-blog h2::before{display:none}
.prose-blog h3{font-family:var(--font-display);font-weight:700;font-size:1.12em;color:var(--c-accent-strong);margin:1.6em 0 .5em;padding:0;scroll-margin-top:88px;border:0}
.prose-blog h3::before{display:none}
.prose-blog a{color:var(--c-accent-strong);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--c-marker);text-decoration-thickness:2px;word-break:break-all}
.prose-blog a:hover{text-decoration-color:var(--c-accent)}
.prose-blog strong{font-weight:700;color:var(--c-ink)}
.prose-blog ul:not([class]){margin:1.1em 0;padding:0;list-style:none}
.prose-blog ul:not([class])>li{position:relative;padding-left:20px;margin:.5em 0}
.prose-blog ul:not([class])>li::before{content:'';position:absolute;left:0;top:.72em;width:9px;height:9px;border-radius:2px;background:var(--c-accent);opacity:.85}
.prose-blog ol:not([class]){margin:1.1em 0 1.1em 1.2em;padding:0}
.prose-blog ol:not([class])>li{margin:.5em 0;padding-left:4px}
.prose-blog blockquote{margin:1.7em 0;padding:2px 0 2px 22px;border-left:3px solid var(--c-accent);font-family:var(--font-display);font-weight:700;font-size:1.16em;line-height:1.5;color:var(--c-ink);letter-spacing:-.01em}
.prose-blog blockquote p{margin:0}
/* 마크다운 표(클래스 없는 것만) — shortcode 표(.bb-comparison-table 등)는 자체 스타일 */
.prose-blog table:not([class]){border-collapse:collapse;width:100%;font-family:var(--font-body);font-size:14px;margin:1.4em 0;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose-blog table:not([class]) th,.prose-blog table:not([class]) td{border-bottom:1px solid var(--c-border);padding:11px 13px;text-align:left;vertical-align:top;word-break:keep-all}
.prose-blog table:not([class]) thead th{background:var(--c-surface);color:var(--c-ink);font-weight:700;border-bottom:2px solid var(--c-accent)}
/* 상세페이지에서 인라인 {{< toc >}} 박스 중복 숨김(사이드바/FAB 목차가 규격) */
.detail-main .post-toc{display:none}

/* 링크 복사 액션 */
.article-actions{display:flex;align-items:center;justify-content:center;padding:24px 22px 22px;border-top:1px solid var(--c-border)}
@media(min-width:768px){.article-actions{padding:26px 40px 32px}}
.blog-share-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border:1px solid var(--c-border);border-radius:0;background:var(--c-paper);font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--c-ink-soft);cursor:pointer;transition:all .15s}
.blog-share-btn:hover{border-color:var(--c-accent);color:var(--c-accent-strong)}
.blog-share-btn svg{width:15px;height:15px}

/* 관련(추천) 글 */
.related-card{background:var(--c-paper);border:1px solid var(--c-border);border-radius:var(--c-r);box-shadow:var(--c-shadow-1);padding:22px;margin-bottom:8px}
@media(min-width:768px){.related-card{padding:26px 30px}}
.related-card h3{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--c-ink);margin:0 0 16px;letter-spacing:-.01em;padding:0;border:0}
.related-card h3::before{display:none}
.related-list{display:flex;flex-direction:column}
.related-item{display:flex;gap:14px;align-items:center;text-decoration:none;padding:14px 0;border-top:1px solid var(--c-border);position:relative}
.related-item:first-child{border-top:none;padding-top:0}
.related-thumb{width:64px;height:64px;flex-shrink:0;aspect-ratio:1/1;border-radius:10px;overflow:hidden;position:relative;border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center}
.related-thumb img{width:100%;height:100%;object-fit:cover}
.related-thumb svg{width:20px;height:20px;color:var(--c-faint);opacity:.7}
.related-text{min-width:0;flex:1}
.related-item .rmeta{margin-bottom:4px}
.related-item .rcat{font-family:var(--font-body);font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.related-item .rcat::before{content:'';width:6px;height:6px;border-radius:2px;background:currentColor}
.related-item .rtitle{font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--c-ink);line-height:1.5;transition:color .15s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.related-item:hover .rtitle{color:var(--c-accent-strong)}
.related-item .rgo{flex-shrink:0;color:var(--c-faint);opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s}
.related-item:hover .rgo{opacity:1;transform:translateX(0);color:var(--c-accent)}
.related-item .rgo svg{width:16px;height:16px}

/* 공용 버튼·칩행·빈상태 */
.btn-primary{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--c-on-accent);background:var(--c-accent);padding:12px 22px;border-radius:0;text-decoration:none;transition:background .15s;border:none;cursor:pointer}
.btn-primary:hover{background:var(--c-accent-strong)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.chip-row a{font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--c-ink-soft);text-decoration:none;padding:8px 15px;border:1px solid var(--c-border);border-radius:0;transition:all .15s}
.chip-row a:hover{border-color:var(--c-accent);color:var(--c-accent-strong)}
.empty-state{text-align:center;padding:46px 20px;border:1px solid var(--c-border);border-radius:var(--c-r);background:var(--c-paper)}
.empty-state .es-ic{width:52px;height:52px;margin:0 auto 14px;border-radius:0;background:var(--c-surface);display:flex;align-items:center;justify-content:center;color:var(--c-faint)}
.empty-state .es-ic svg{width:24px;height:24px}
.empty-state h3{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--c-ink);margin-bottom:8px;padding:0;border:0}
.empty-state h3::before{display:none}
.empty-state p{font-family:var(--font-body);font-size:13.5px;line-height:1.6;color:var(--c-ink-soft);max-width:26em;margin:0 auto 4px;word-break:keep-all}

/* 검색 */
.search-head{max-width:60rem;margin:0 auto;padding:30px 18px 4px;width:100%}
.search-box{display:flex;gap:8px;margin-bottom:20px}
.search-box input{flex:1;min-width:0;font-family:var(--font-body);font-size:15px;padding:12px 16px;border:1px solid var(--c-border);border-radius:0;background:var(--c-paper);color:var(--c-ink);outline:none;transition:border-color .15s}
.search-box input:focus{border-color:var(--c-accent)}
.search-box button{flex-shrink:0;font-family:var(--font-display);font-weight:700;font-size:14px;padding:0 20px;min-height:46px;border-radius:0;background:var(--c-accent);color:var(--c-on-accent);cursor:pointer;border:none}
.search-meta{font-family:var(--font-body);font-size:13.5px;color:var(--c-muted);margin-bottom:18px}
.search-meta b{color:var(--c-ink);font-weight:700}

/* 404 */
.err-inner{max-width:40rem;margin:0 auto;padding:64px 22px 88px;text-align:center}
.err-code{font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,17vw,7rem);line-height:1;color:var(--c-surface);letter-spacing:-.04em;-webkit-text-stroke:1px var(--c-border-strong)}
.err-inner h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,4vw,1.9rem);color:var(--c-ink);letter-spacing:-.02em;margin:6px 0 10px;border:0;padding:0}
.err-inner p{font-family:var(--font-body);font-size:14.5px;line-height:1.7;color:var(--c-ink-soft);max-width:24em;margin:0 auto 22px;word-break:keep-all}

/* 정적 페이지 (about·privacy·contact lean) */
.static-page{background:var(--c-paper);padding-bottom:76px}
.static-container{max-width:44rem;margin:0 auto;padding:36px 20px 0;width:100%}
.static-container>h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,4.4vw,2.2rem);color:var(--c-ink);letter-spacing:-.02em;margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid var(--c-border)}

/* 푸터 (.c-footer — 레거시 .site-footer와 분리) — 전 뷰포트 노출(개인정보/문의 법적 접근 보장) */
.c-footer{display:block;background:transparent;border-top:1px solid var(--c-border);font-family:var(--font-body);margin-top:0}
.c-footer .footer-inner{max-width:72rem;margin:0 auto;padding:26px 24px}
/* 모바일: 하단 고정 네비(60px)에 가리지 않도록 여백 확보 */
@media(max-width:1023px){.c-footer .footer-inner{padding:22px 20px calc(22px + 64px);text-align:center}.c-footer .footer-row{flex-direction:column;gap:10px;justify-content:center}}
.c-footer .footer-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.c-footer .footer-links{display:flex;align-items:center;gap:16px;font-size:12px;color:var(--c-muted)}
.c-footer .footer-links a{color:var(--c-ink-soft);text-decoration:none;transition:color .12s}
.c-footer .footer-links a:first-child{font-weight:600}
.c-footer .footer-links a:hover{color:var(--c-accent-strong)}
.c-footer .footer-copy{font-size:11px;color:var(--c-faint);margin:0}

/* 모바일 하단 네비 */
.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:56;border-top:2px solid var(--c-ink);background:var(--c-mbn-bg);box-shadow:var(--c-mbn-shadow)}
@media(min-width:1024px){.mobile-bottom-nav{display:none}}
.mbn-row{display:flex;align-items:center;justify-content:space-around;height:60px;max-width:64rem;margin:0 auto}
.mobile-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;font-family:var(--font-display);font-weight:600;font-size:10px;color:var(--c-muted);padding:4px 0;text-decoration:none;transition:color .15s}
.mobile-nav-item.is-active{color:var(--c-accent-strong)}
.mobile-nav-item.is-active span{box-shadow:inset 0 -2px 0 var(--c-accent)}
.mobile-nav-item svg{width:19px;height:19px}

/* 모바일 우선 쾌적화 */
@media(max-width:1023px){
  .blog-tab{padding:10px 14px;min-height:44px;display:inline-flex;align-items:center}
  .pagination>span,.pagination>a{min-width:44px;height:44px}
  .blog-share-btn{min-height:44px}
  .nav-search{width:44px;height:44px}
  .prose-blog{font-size:16px;line-height:1.82}
  .prose-blog p.lead{font-size:16.5px}
  .breadcrumb li[aria-current]{max-width:60vw}
  .detail-page{padding-bottom:84px}
  .list-page{padding-bottom:84px}
}
@media(max-width:479px){
  .list-container{padding:22px 16px}
  .detail-container{padding:16px 16px}
  .article-head{padding:20px 20px 0}
  .article-body{padding:20px}}
/* ===== 후보C 레이아웃 레이어 끝 ===== */

/* === LIBRARY_PLAN 단계 4 — 이 글을 참조한 글(백링크) === */
/* 색은 전부 :root 토큰만 (Phase 43). 한글 줄바꿈은 keep-all (Phase P). */
.backlinks-card{margin-top:8px}
.backlink-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.backlink-list li{margin:0;padding:0}
.backlink-list li::before{display:none}
.backlink-list a{display:block;padding:9px 12px;border-radius:var(--radius-sm);
  color:var(--c-ink);text-decoration:none;font-size:14px;line-height:1.5;
  word-break:keep-all;overflow-wrap:break-word;border:1px solid transparent}
.backlink-list a:hover{background:var(--c-surface);border-color:var(--c-border)}
.backlink-list a:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

/* === 문의 양식 접수 안내 — /contact/#sent 로 돌아왔을 때만 보인다(JS 0, :target) === */
.contact-sent{display:none;margin:0 0 var(--space-6)}
.contact-sent:target{display:block}
.contact-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}