:root { --ink:#15233a; --muted:#526078; --paper:#fffdf8; --cream:#f6f0e7; --mint:#b8edcf; --green:#087a5a; --navy:#13233e; --orange:#ff7551; --line:#d9dce1; --radius:1.25rem; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Malgun Gothic",sans-serif; line-height:1.75; word-break:keep-all; }
a { color:inherit; }
.container { width:min(1120px,calc(100% - 2.5rem)); margin:auto; }
.skip-link { position:absolute; left:1rem; top:-4rem; z-index:10; background:#fff; padding:.5rem 1rem; }
.skip-link:focus { top:1rem; }
.hero { min-height:660px; color:white; background:radial-gradient(circle at 83% 22%,#315d75 0,transparent 26%),radial-gradient(circle at 14% 91%,#176153 0,transparent 33%),var(--navy); }
.nav { height:82px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:900; text-decoration:none; font-size:1.15rem; letter-spacing:-.04em; }.brand span { font-weight:500; margin-left:.25rem; }
.nav-cta { font-size:.92rem; font-weight:700; text-underline-offset:.3em; }
.hero-content { padding:6.5rem 0 5rem; }
.eyebrow,.section-kicker { letter-spacing:.13em; font-size:.78rem; font-weight:800; color:var(--green); }
.hero .eyebrow { color:var(--mint); }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { line-height:1.25; letter-spacing:-.045em; }
h1 { max-width:800px; margin-bottom:1.5rem; font-size:clamp(2.7rem,9vw,6.6rem); } h1 em { color:var(--mint); font-style:normal; }
.lead { max-width:630px; font-size:clamp(1.08rem,2.5vw,1.35rem); color:#dae3ee; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin:2.3rem 0; }.button { display:inline-flex; align-items:center; gap:.55rem; min-height:48px; padding:.7rem 1.15rem; border-radius:100px; font-weight:800; text-decoration:none; }.primary { background:var(--mint); color:#093b31; }.text-button { color:white; text-decoration:underline; text-underline-offset:.3em; }
.trust-list { display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; padding:0; color:#c5d2df; font-size:.88rem; list-style:none; }.trust-list li::before { content:"✓ "; color:var(--mint); font-weight:bold; }
.section { padding:5rem 0; }.section h2 { font-size:clamp(2rem,5vw,3.8rem); margin-bottom:2rem; }.section p:not(.section-kicker) { max-width:780px; }.tinted { background:var(--cream); }.dark { background:var(--navy); color:#f6f7f9; }.dark .section-kicker { color:var(--mint); }.dark h2 { color:white; }
.notice { max-width:850px; padding:1rem 1.1rem; margin:1.5rem 0; border-left:4px solid; border-radius:0 .75rem .75rem 0; }.success { background:#e1f5e9; border-color:#20744f; }.warning { background:#fff0df; border-color:#bd5b16; }.info { background:#e6f1fb; border-color:#387cb4; }
.steps,.comparison,.device-grid,.search-grid,.checklist-grid { display:grid; gap:1rem; }.step-card { padding:1.5rem; border:1px solid var(--line); border-radius:var(--radius); background:white; }.step-card h3 { font-size:1.3rem; margin:.65rem 0; }.step-number { color:var(--green); font-weight:900; }
code { padding:.08rem .35rem; background:#e9edf1; color:#15233a; border-radius:.25rem; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.88em; }.glossary-preview { margin-top:2rem; padding:1rem 1.25rem; background:#fff; border-radius:var(--radius); }.glossary-preview summary { cursor:pointer; font-weight:800; }.glossary-preview dl { display:grid; gap:.7rem; }.glossary-preview dl div { display:grid; gap:.15rem; }.glossary-preview dt { font-weight:800; }.glossary-preview dd { margin:0; color:var(--muted); }
.split { display:grid; gap:2.5rem; }.prompt-panel,.migration-card { padding:1.5rem; align-self:start; background:var(--navy); color:white; border-radius:var(--radius); }.panel-label { color:var(--mint); font-size:.78rem; font-weight:800; letter-spacing:.1em; }.prompt-panel blockquote { margin:1rem 0; padding:1rem; background:#22344f; border-radius:.75rem; font-size:.95rem; }.small { font-size:.88rem; color:var(--muted); }.prompt-panel .small { color:#c4d0df; }
.device-grid article { padding:1.5rem; border:1px solid #526078; border-radius:var(--radius); }.device-grid h3 { margin:.75rem 0; font-size:1.35rem; }.device-icon { color:var(--mint); font-size:2rem; }.device-tip { margin-top:1.5rem; color:#d3ddea; }
.relationship { display:grid; gap:1rem; align-items:center; }.relationship div { padding:1.25rem; border:1px solid var(--line); border-radius:var(--radius); }.relationship p { margin:.25rem 0 0; color:var(--muted); font-size:.9rem; }.relationship-label,.tag { display:block; margin-bottom:.3rem; font-size:.74rem; color:var(--green); font-weight:900; letter-spacing:.1em; }.arrow { justify-self:center; color:var(--orange); font-size:1.7rem; font-weight:800; }
.comparison article { padding:1.5rem; background:white; border:1px solid var(--line); border-radius:var(--radius); }.comparison .featured { border:2px solid var(--green); }.comparison h3,.search-grid h3,.checklist-grid h3 { font-size:1.35rem; }.comparison ol,.migration-card ol { padding-left:1.25rem; }.comparison li,.migration-card li { margin:.5rem 0; }
.migration-card { background:#fff3e8; color:var(--ink); border:1px solid #efb47e; }.migration-card p:last-child { color:#8a321b; font-size:.93rem; }.search-grid article,.checklist-grid article { padding:1.5rem; border-radius:var(--radius); background:white; border:1px solid var(--line); }.checklist-grid ul,.safety-list { padding-left:1.3rem; }.checklist-grid li,.safety-list li { margin:.6rem 0; }
.safety { background:#ccefd7; }.safety-list { max-width:760px; margin-bottom:2rem; } footer { padding:2.5rem 0; background:var(--navy); color:#d8e1ec; } footer p { margin:.2rem 0 0; font-size:.9rem; }
:focus-visible { outline:3px solid #f59c00; outline-offset:3px; }
@media (min-width:700px) { .steps { grid-template-columns:repeat(3,1fr); }.device-grid,.search-grid,.checklist-grid,.comparison { grid-template-columns:repeat(2,1fr); }.relationship { grid-template-columns:1fr auto 1fr auto 1fr; }.split { grid-template-columns:1.05fr .95fr; align-items:center; }.section { padding:7rem 0; } }