:root { --guide-bg: #0d1528; --guide-panel: #15223a; --guide-text: #e7edf9; --guide-muted: #9aa9c2; --guide-line: rgba(160,177,209,.2); --guide-gold: #f4b63d; --guide-violet: #a77bff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 15% -10%, #202d54 0, var(--guide-bg) 38rem); color: var(--guide-text); font-family: Inter, "Noto Sans SC", "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", system-ui, sans-serif; line-height: 1.75; }
a { color: inherit; text-decoration: none; }
.guide-header, .guide-footer { width: min(1120px, calc(100% - 40px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.guide-header { min-height: 76px; border-bottom: 1px solid var(--guide-line); }
.guide-brand { color: var(--guide-gold); font-family: Georgia, serif; font-size: 1.08rem; letter-spacing: .04em; }
.guide-languages { display: flex; gap: .25rem; }
.guide-languages a { color: var(--guide-muted); border: 1px solid transparent; border-radius: 999px; padding: .18rem .48rem; font-size: .76rem; line-height: 1.4; }
.guide-languages a[aria-current="page"] { color: var(--guide-text); border-color: rgba(167,123,255,.7); background: rgba(113,76,187,.22); }
.guide-layout { width: min(1120px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0,760px) 190px; justify-content: space-between; gap: 4.5rem; padding: 4rem 0 5rem; }
.guide-article { min-width: 0; }
.breadcrumb { color: var(--guide-muted); font-size: .9rem; margin-bottom: 2rem; }
.breadcrumb a:hover, .desktop-toc a:hover, .mobile-toc a:hover { color: var(--guide-gold); }
.article-hero { border-bottom: 1px solid var(--guide-line); padding-bottom: 2.5rem; margin-bottom: 2.75rem; }
.article-hero > span, .guide-index > header > span, .guide-card > span, .related-card > span { color: var(--guide-gold); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1, h2 { font-family: Georgia, "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", serif; line-height: 1.3; }
h1 { margin: .7rem 0 1rem; font-size: clamp(2.15rem,5vw,3.6rem); letter-spacing: -.035em; }
h2 { margin: 3rem 0 1.05rem; color: #f2f5fc; font-size: clamp(1.4rem,3vw,1.85rem); }
.article-hero p, .guide-index > header p { margin: 0; color: #c1cce0; font-size: 1.15rem; }
time { display: block; color: var(--guide-muted); margin-top: 1.1rem; font-size: .86rem; }
.article-body p { color: #d2dced; margin: 0 0 1.25rem; font-size: 1.04rem; }
.desktop-toc { align-self: start; position: sticky; top: 2rem; color: var(--guide-muted); font-size: .88rem; }
.desktop-toc ol, .mobile-toc ol { list-style: none; margin: .7rem 0 0; padding: 0; border-left: 1px solid var(--guide-line); }
.desktop-toc li, .mobile-toc li { margin: .4rem 0; }
.desktop-toc a, .mobile-toc a { display: block; padding-left: .8rem; line-height: 1.45; }
.mobile-toc { display: none; border: 1px solid var(--guide-line); border-radius: 14px; padding: 1rem 1.1rem; margin: 0 0 2.25rem; background: rgba(20,34,58,.55); }
.article-note { margin: 2.7rem 0; padding: 1.1rem 1.25rem; border-left: 3px solid var(--guide-violet); border-radius: 0 12px 12px 0; color: var(--guide-muted); background: rgba(113,76,187,.1); font-size: .92rem; }
.article-faq details { border-top: 1px solid var(--guide-line); padding: 1rem 0; }.article-faq details:last-child { border-bottom: 1px solid var(--guide-line); }.article-faq summary { cursor: pointer; color: var(--guide-text); font-weight: 650; }.article-faq details p { color: var(--guide-muted); margin: .8rem 0 .1rem; }
.chart-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; overflow: hidden; min-height: 126px; border: 1px solid rgba(189,157,255,.88); border-radius: 18px; background: linear-gradient(115deg,#3b2575,#162d59); box-shadow: 0 16px 34px rgba(2,8,22,.36), inset 0 1px 0 rgba(255,255,255,.13); padding: 1.35rem 1.45rem; margin: 3rem 0; cursor: pointer; touch-action: manipulation; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }.chart-cta::before { content: ""; position: absolute; pointer-events: none; inset: 0; background: radial-gradient(circle at 89% 15%,rgba(88,208,255,.25),transparent 30%),linear-gradient(120deg,rgba(167,123,255,.12),transparent 45%); }.chart-cta:hover { transform: translateY(-2px); border-color: #f6ce75; box-shadow: 0 21px 42px rgba(2,8,22,.48),0 0 0 3px rgba(244,182,61,.11); }.chart-cta:active { transform: scale(.985); box-shadow: 0 8px 20px rgba(2,8,22,.38); }.chart-cta:focus-visible { outline: 3px solid #f7cf70; outline-offset: 4px; }.chart-cta-copy { position: relative; z-index: 1; display: grid; gap: .32rem; min-width: 0; }.chart-cta-eyebrow { color: #f9cf70; font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }.chart-cta strong { color: #fff; font-size: clamp(1.18rem,2.7vw,1.46rem); line-height: 1.3; }.chart-cta small { color: #d8dff4; font-size: .87rem; line-height: 1.4; }.chart-cta-action { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px; border-radius: 12px; background: linear-gradient(135deg,#ffd66b,#eca928); box-shadow: 0 7px 16px rgba(11,8,31,.3); color: #20153f; padding: .72rem 1rem; font-size: .92rem; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }.chart-cta:hover .chart-cta-action { transform: translateX(3px); box-shadow: 0 10px 19px rgba(11,8,31,.4); }.chart-cta-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.3; }
.guide-index { width: min(1120px,calc(100% - 40px)); margin: 0 auto; padding: 4.5rem 0 5rem; }.guide-index > header { max-width: 720px; margin-bottom: 3rem; }.guide-index h1 { margin-bottom: 1rem; }
.guide-grid, .related-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }.guide-card, .related-card { display: block; border: 1px solid var(--guide-line); border-radius: 16px; background: rgba(23,38,63,.72); padding: 1.5rem; transition: border-color .18s ease, transform .18s ease; }.guide-card:hover, .related-card:hover { border-color: rgba(244,182,61,.65); transform: translateY(-2px); }.guide-card h2, .related-card strong { display: block; margin: .65rem 0; font-size: 1.28rem; }.guide-card p, .related-card small { display: block; color: var(--guide-muted); margin: 0; line-height: 1.6; }.guide-card small { color: #8392ad; margin-top: 1.25rem; font-size: .78rem; }
.related { margin-top: 3.75rem; }.related h2 { margin-bottom: 1.25rem; }.guide-footer { min-height: 92px; border-top: 1px solid var(--guide-line); color: var(--guide-muted); font-size: .82rem; }.guide-footer a:hover { color: var(--guide-gold); }
@media (max-width: 760px) { .guide-header, .guide-footer, .guide-layout, .guide-index { width: min(100% - 32px,680px); }.guide-header { min-height: 64px; }.guide-layout { display: block; padding-top: 2.6rem; }.desktop-toc { display: none; }.mobile-toc { display: block; }.guide-grid, .related-grid { grid-template-columns: 1fr; }.guide-index { padding: 3rem 0 4rem; }.article-hero { padding-bottom: 2rem; margin-bottom: 2rem; }.article-body p { font-size: 1rem; }.guide-footer { flex-wrap: wrap; justify-content: flex-start; column-gap: 1.4rem; padding: 1rem 0; }.chart-cta { display: grid; gap: 1rem; min-height: 0; padding: 1.25rem; }.chart-cta strong { font-size: 1.22rem; }.chart-cta-action { width: 100%; min-height: 52px; font-size: 1rem; }.chart-cta:hover .chart-cta-action { transform: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.chart-cta, .chart-cta-action { transition: none; }.chart-cta:hover, .chart-cta:active, .chart-cta:hover .chart-cta-action { transform: none; } }