/* Toss-inspired visual direction. These are project tokens, not an official Toss UI kit. */
:root { color-scheme: light; --blue:#1b64da; --blue-hover:#1554b9; --blue-soft:#edf4ff; --ink:#191f28; --text:#414b5a; --muted:#626d7c; --line:#e9edf2; --surface:#f7f9fc; --radius:20px; font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f2f4f7; font-size:15px; line-height:1.6; word-break:keep-all; }
button,input { font:inherit; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; }
button,a,input { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
[hidden] { display:none !important; }
.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; }
.skip-link { position:fixed; left:20px; top:-80px; padding:10px 18px; z-index:10; background:var(--blue); color:white; border-radius:10px; }
.skip-link:focus { top:12px; }
.site-header { height:76px; display:flex; align-items:center; gap:48px; padding:0 40px; border-bottom:1px solid var(--line); background:white; position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:11px; font-size:19px; letter-spacing:-.6px; white-space:nowrap; font-weight:600; }
.brand strong { font-weight:750; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:var(--blue); color:white; font-size:29px; font-weight:800; line-height:1; padding-bottom:3px; }
.top-nav { display:flex; align-self:stretch; align-items:stretch; gap:32px; font-size:14px; font-weight:600; color:var(--muted); }
.top-nav a { display:flex; align-items:center; position:relative; }
.top-nav a[aria-current="page"] { color:var(--ink); }
.top-nav a[aria-current="page"]:after { content:""; position:absolute; height:3px; bottom:0; left:0; right:0; background:var(--blue); border-radius:3px 3px 0 0; }
.header-label { margin-left:auto; font-size:12px; color:var(--muted); }
.site-layout { display:grid; grid-template-columns:248px minmax(0,1fr); max-width:1600px; margin:auto; }
.sidebar { padding:32px 20px 24px 28px; border-right:1px solid #dce2eb; position:sticky; top:76px; height:calc(100dvh - 76px); overflow:auto; background:#fff; }
.sidebar-home { padding:12px 13px; display:flex; justify-content:space-between; font-weight:700; font-size:14px; border-radius:10px; margin-bottom:26px; }
.sidebar-home span { font-size:12px; color:var(--muted); }
.sidebar-home[aria-current="page"] { color:var(--blue); background:var(--blue-soft); }
.nav-group { margin-bottom:24px; }
.nav-group h2 { font-size:11px; color:var(--muted); font-weight:600; padding:0 13px; margin:0 0 8px; }
.category-nav-link { display:flex; align-items:center; gap:10px; padding:9px 13px; border-radius:10px; color:var(--text); font-size:13px; }
.category-nav-link:hover { background:var(--surface); }
.category-nav-link[aria-current="page"] { color:var(--blue); background:var(--blue-soft); font-weight:700; }
.nav-letter { font-size:10px; font-weight:700; width:22px; height:22px; display:grid; place-items:center; background:#f0f3f8; color:#505c70; border-radius:6px; }
.new-dot { margin-left:auto; color:var(--blue); font-size:9px; font-weight:700; }
.sidebar-note { margin:30px 13px 0; padding-top:20px; border-top:1px solid var(--line); }
.sidebar-note strong { font-size:12px; font-weight:650; }
.sidebar-note p { color:var(--muted); font-size:11px; line-height:1.8; }
main { min-width:0; max-width:1120px; padding:46px 56px 24px; width:100%; margin:auto; outline:none; }
.hero { padding:0 0 34px; }
.hero-kicker { font-weight:650; font-size:13px; color:var(--blue); margin:0 0 12px; }
h1 { font-size:clamp(30px,3vw,42px); line-height:1.35; letter-spacing:-1.7px; margin:0 0 16px; font-weight:750; }
.hero-description { color:var(--muted); margin:0; font-size:15px; line-height:1.8; }
.path-strip { display:flex; align-items:center; gap:16px; padding:20px 24px; background:#e8edf5; border:1px solid #dce3ee; border-radius:16px; margin-bottom:38px; }
.path-step { display:flex; align-items:center; gap:10px; flex:1; }
.step-number { border-radius:50%; width:26px; height:26px; display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--blue); background:#e8effa; }
.path-step strong { font-size:13px; font-weight:650; }
.path-arrow { color:#818c9c; font-size:16px; }
.section-tools { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:19px; }
.section-title { font-size:21px; letter-spacing:-.6px; line-height:1.4; margin:0; }
.section-title span { font-size:13px; font-weight:500; color:var(--muted); margin-left:10px; letter-spacing:0; }
.search-wrap { display:flex; gap:8px; align-items:center; width:250px; background:var(--surface); border:1px solid transparent; border-radius:12px; padding:10px 13px; }
.search-wrap:focus-within { border-color:var(--blue); background:white; }
.search-symbol { font-size:19px; color:var(--muted); line-height:1; }
.search-wrap input { min-width:0; width:100%; border:0; outline:none; background:transparent; font-size:13px; color:var(--ink); }
.search-wrap input::placeholder { color:var(--muted); }
.filters { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:30px; }
.filter { border:0; color:var(--muted); background:transparent; border-radius:10px; padding:9px 13px; font-size:12px; font-weight:650; display:flex; align-items:center; gap:7px; }
.filter:hover { background:var(--surface); }
.filter[aria-pressed="true"] { color:white; background:var(--blue); }
.filter-count { font-size:10px; opacity:.9; }
.category-section { margin-bottom:34px; }
.group-header { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.group-header h3 { font-size:15px; font-weight:700; margin:0; }
.group-header p { color:var(--muted); font-size:12px; margin:0; }
.category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.category-card { border:1.5px solid #cbd4e1; border-radius:var(--radius); padding:18px 22px 20px; display:flex; flex-direction:column; min-height:273px; background:white; box-shadow:0 3px 10px #182d4d07; transition:transform .18s,border-color .18s,box-shadow .18s; }
.category-card:hover { transform:translateY(-3px); border-color:#b6cef4; box-shadow:0 8px 25px #1b64da0a; }
.card-top { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.category-symbol { width:38px; height:38px; display:grid; place-items:center; background:#f0f4fa; border-radius:11px; font-size:15px; font-weight:750; color:#4c5d78; }
.category-card[data-group="publish"] .category-symbol { background:#edf4ff; color:var(--blue); }
.category-card[data-group="data"] .category-symbol { background:#eef1f6; color:#37465d; }
.category-card h4 { font-size:16px; margin:0; font-weight:700; letter-spacing:-.4px; }
.new-badge { color:var(--blue); background:var(--blue-soft); font-weight:700; font-size:9px; border-radius:5px; padding:2px 6px; margin-left:auto; }
.category-card p { color:var(--muted); font-size:13px; margin:0 0 18px; line-height:1.7; }
.card-bottom { margin-top:auto; display:flex; align-items:center; justify-content:space-between; font-size:11px; }
.card-status { color:var(--muted); }
.card-action { color:var(--blue); font-weight:650; }
.empty-search { text-align:center; padding:65px 20px; background:var(--surface); border-radius:var(--radius); }
.empty-search h3 { font-size:20px; margin:0 0 8px; }
.empty-search p { color:var(--muted); margin:0 0 20px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:8px; border:0; background:var(--blue); color:white; padding:12px 19px; border-radius:12px; font-size:13px; font-weight:650; white-space:nowrap; }
.button:hover { background:var(--blue-hover); }
.button-secondary { color:var(--blue); background:var(--blue-soft); }
.button-secondary:hover { background:#e2edff; }
.back-link { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; margin:0 0 30px; }
.detail-intro { padding-bottom:30px; border-bottom:1px solid var(--line); margin-bottom:30px; }
.detail-symbol { width:60px; height:60px; font-size:23px; border-radius:17px; margin-bottom:20px; background:var(--blue-soft); color:var(--blue); }
.detail-intro .hero-kicker { margin-bottom:7px; }
.detail-intro h1 { font-size:36px; margin-bottom:13px; }
.detail-description { color:var(--text); font-size:16px; line-height:1.8; max-width:540px; margin:0; }
.detail-focus { margin-top:22px; font-size:13px; color:var(--muted); }
.topic-section h2 { font-size:21px; margin:0 0 8px; letter-spacing:-.6px; }
.topic-section > p { margin:0 0 23px; color:var(--muted); font-size:13px; }
.topic-list { border:1px solid var(--line); border-radius:var(--radius); padding:4px 23px; }
.topic-row { display:flex; align-items:center; gap:15px; padding:22px 0; }
.topic-row + .topic-row { border-top:1px solid var(--line); }
.topic-number { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.topic-row strong { font-size:15px; font-weight:650; }
.upcoming { margin-left:auto; padding:4px 10px; background:var(--surface); color:var(--muted); font-size:10px; border-radius:7px; white-space:nowrap; }
.detail-note { padding:23px 25px; margin:28px 0; background:var(--surface); border-radius:16px; }
.detail-note strong { font-size:14px; }
.detail-note p { font-size:13px; color:var(--muted); margin:7px 0 0; line-height:1.8; }
.related-links { margin-top:37px; }
.related-links h2 { font-size:15px; margin:0 0 12px; }
.related-links > div { display:flex; flex-wrap:wrap; gap:9px; }
.related-link { background:var(--surface); border-radius:10px; padding:10px 13px; font-size:12px; color:var(--text); }
.related-link:hover { color:var(--blue); background:var(--blue-soft); }
.guide-steps { display:grid; gap:16px; margin-top:30px; }
.guide-step { display:flex; gap:20px; padding:25px; border:1px solid var(--line); border-radius:var(--radius); }
.guide-step h2 { margin:0 0 6px; font-size:17px; }
.guide-step p { margin:0; font-size:14px; color:var(--muted); }
.site-footer { display:flex; justify-content:space-between; gap:15px; padding:26px 0 0; margin-top:46px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.site-footer a:hover { color:var(--blue); }
.noscript { background:var(--surface); padding:20px; border-radius:12px; }
@media(min-width:1450px) { .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } main { padding-left:72px; padding-right:72px; } }
@media(max-width:1120px) { .site-layout { grid-template-columns:214px minmax(0,1fr); } .sidebar { padding-left:17px; padding-right:14px; } main { padding:35px 32px 24px; } .site-header { padding:0 26px; gap:35px; } .category-card { padding:20px; } .header-label { display:none; } .group-header { display:block; } .group-header p { margin-top:3px; } }
@media(max-width:900px) { .site-layout { display:block; } .sidebar { display:none; } main { max-width:810px; padding:35px 30px 24px; } .site-header { justify-content:space-between; } .path-strip { margin-bottom:32px; } }
@media(max-width:560px) { .site-header { height:66px; padding:0 20px; gap:14px; } .brand { font-size:16px; gap:8px; } .brand-mark { width:28px; height:28px; font-size:25px; border-radius:8px; } .top-nav { gap:19px; font-size:12px; } main { padding:29px 20px 20px; } h1 { font-size:31px; letter-spacing:-1.25px; } .hero-description { font-size:13px; } .hero { padding-bottom:27px; } .path-strip { padding:17px 13px; gap:8px; } .path-step { gap:6px; } .path-step strong { font-size:10px; } .step-number { width:21px; height:21px; font-size:9px; flex-shrink:0; } .path-arrow { font-size:12px; } .section-tools { flex-wrap:wrap; gap:15px; } .search-wrap { width:100%; } .section-title { font-size:20px; } .filters { gap:3px; margin-bottom:25px; } .filter { padding:8px 9px; font-size:11px; gap:4px; } .category-grid { grid-template-columns:1fr; gap:12px; } .category-card { min-height:166px; padding:21px; } .card-top { margin-bottom:12px; } .category-card h4 { font-size:17px; } .group-header { margin-bottom:13px; } .group-header p { font-size:11px; } .detail-intro h1 { font-size:31px; } .detail-description { font-size:14px; } .topic-list { padding:2px 18px; } .topic-row { gap:11px; } .topic-row strong { font-size:13px; } .upcoming { padding:3px 7px; font-size:9px; } .detail-note { padding:21px; } .site-footer { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }
@media(max-width:560px) { .search-wrap input { font-size:16px; } }
@media(max-width:380px) { .site-header { padding:0 18px; gap:12px; } .brand { font-size:14px; } .top-nav { font-size:11px; gap:14px; } }
@media(pointer:coarse) { .filter { min-height:44px; } }

.nav-logo { width:22px; height:22px; flex-shrink:0; object-fit:contain; padding:1px; }
.card-logo-stage { height:102px; display:grid; place-items:center; border-radius:12px; background:#f5f7fb; margin-bottom:19px; }
.card-logo { width:74px; height:74px; object-fit:contain; }
.hero-guide-link { display:inline-flex; margin-top:17px; color:var(--blue); font-size:13px; font-weight:650; gap:8px; }
.hero-guide-link:hover { text-decoration:underline; }
.nav-external { margin-left:auto; color:var(--muted); font-size:11px; }
.service-button { margin-top:22px; }
.detail-logo-stage { width:88px; height:88px; display:grid; place-items:center; border-radius:20px; border:1px solid #d6dee9; background:white; margin-bottom:23px; }
.detail-logo { width:58px; height:58px; object-fit:contain; }
.topic-list { background:#fff; border-color:#d3dce8; }
.topic-available { font-size:15px; color:var(--blue); font-weight:650; }
.topic-ready { background:var(--blue-soft); color:var(--blue); }
.available-lessons { margin-bottom:31px; }
.available-lessons h2 { font-size:21px; margin:0 0 15px; letter-spacing:-.6px; }
.lesson-entry { display:flex; align-items:center; gap:17px; padding:23px; background:#fff; border:1px solid #bfd0ea; border-radius:18px; }
.lesson-entry:hover { border-color:var(--blue); }
.lesson-entry-icon { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border-radius:12px; background:var(--blue-soft); color:var(--blue); font-size:14px; font-weight:700; }
.lesson-entry strong { font-size:16px; display:block; }
.lesson-entry-description { display:block; margin-top:6px; font-size:12px; color:var(--muted); }
.lesson-entry-arrow { margin-left:auto; color:var(--blue); }
.lesson-intro { margin-bottom:26px; }
.lesson-description { max-width:720px; font-size:14px; color:var(--text); line-height:1.9; margin:0; }
.lesson-labels { display:flex; flex-wrap:wrap; gap:8px; margin-top:17px; }
.lesson-labels span { color:#495b76; background:#e4eaf3; border-radius:7px; font-size:11px; padding:5px 10px; }
.lesson-guide-section { margin-bottom:30px; }
.lesson-guide-section h2 { font-size:21px; margin:0 0 15px; letter-spacing:-.5px; }
.lesson-list { padding:20px 24px 20px 42px; margin:0; background:#fff; border:1px solid #d3dce8; border-radius:16px; }
.lesson-list li { font-size:14px; line-height:1.9; color:var(--text); padding:4px 0; }
.guide-path { padding:17px 21px; font-size:13px; font-weight:650; background:#e6eefb; color:#174f9d; border-radius:12px; line-height:1.9; margin-bottom:15px; }
.follow-steps { display:grid; gap:13px; }
.follow-step { display:flex; align-items:flex-start; gap:15px; padding:23px; background:#fff; border:1px solid #d3dce8; border-radius:16px; }
.follow-step-number { width:28px; height:28px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; color:var(--blue); background:var(--blue-soft); font-size:12px; font-weight:700; }
.follow-step h3 { font-size:16px; margin:0 0 8px; }
.follow-step p { margin:0; font-size:13px; color:var(--muted); line-height:1.9; }
.guide-section-description { font-size:13px; color:var(--muted); margin:-5px 0 15px; }
.prompt-block { background:#fff; border:1px solid #cbd4e1; border-radius:15px; overflow:hidden; }
.prompt-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 17px; background:#e9eef6; border-bottom:1px solid #d3dce8; }
.prompt-toolbar span { font-size:12px; font-weight:650; color:#445570; }
.copy-prompt { border:1px solid #bbcde8; background:white; color:var(--blue); border-radius:8px; padding:8px 11px; font-size:11px; font-weight:650; white-space:nowrap; }
.copy-prompt:hover { background:var(--blue-soft); }
.prompt-block pre { padding:20px; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); font-size:13px; line-height:1.9; }
.prompt-block code { font-family:inherit; }
.prompt-step { padding:18px; background:white; border:1px solid #d3dce8; border-radius:15px; margin:12px 0; }
.prompt-step summary { font-size:14px; font-weight:650; cursor:pointer; padding:3px 0; }
.prompt-step .prompt-block { margin-top:16px; }
.lesson-checks { display:grid; gap:12px; padding:21px; background:white; border:1px solid #d3dce8; border-radius:16px; }
.lesson-checks label { display:flex; align-items:flex-start; gap:11px; color:var(--text); font-size:13px; line-height:1.8; }
.lesson-checks input { margin:6px 0 0; accent-color:var(--blue); flex-shrink:0; }
.lesson-sources a { display:block; color:var(--blue); font-size:12px; padding:7px 0; line-height:1.8; }
.lesson-sources a:hover { text-decoration:underline; }
@media(max-width:560px) { .card-logo-stage { height:92px; } .card-logo { width:64px; height:64px; } .category-card { min-height:267px; } .lesson-entry { padding:18px; gap:12px; } .lesson-entry strong { font-size:14px; } .lesson-entry-description { font-size:11px; } .lesson-intro h1 { font-size:28px; } .lesson-tab { font-size:13px; padding:11px 15px; } .lesson-guide-section h2 { font-size:19px; } .follow-step { padding:18px; gap:12px; } .follow-step h3 { font-size:14px; } .follow-step p { font-size:12px; } .prompt-step { padding:14px; } .prompt-toolbar { padding:11px 13px; flex-wrap:wrap; } .prompt-block pre { padding:16px; font-size:12px; } .lesson-checks { padding:18px; } }
@media(pointer:coarse) { .copy-prompt { min-height:44px; } .lesson-checks label { min-height:44px; } }