:root {
  font-family: Inter, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  color: #1b2536;
  background: #f3f6fa;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.shell { min-height: 100vh; max-width: 1420px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 56px); display: flex; flex-direction: column; }
.site-header { min-height: 90px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid #e2e8f0; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #2156cf; color: white; font-size: 25px; font-weight: 700; }
.brand div { display: grid; gap: 1px; }
.brand strong { font-size: 17px; letter-spacing: -.03em; }
.brand div span { color: #708096; font-size: 12px; }
.header-actions { display: flex; gap: 8px; }
main { flex: 1; padding: 44px 0 72px; }
.eyebrow { color: #2358c9; font-size: 12px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { letter-spacing: -.05em; }
h2 { font-size: 21px; letter-spacing: -.04em; }
h3 { font-size: 15px; letter-spacing: -.02em; }
p { line-height: 1.6; color: #6b7a90; }
.button { min-height: 40px; border: 1px solid transparent; border-radius: 9px; padding: 0 16px; font-weight: 700; white-space: nowrap; }
.button:disabled { opacity: .55; cursor: wait; }
.button-primary { color: white; background: #2156cf; box-shadow: 0 3px 8px #183e9b1f; }
.button-primary:hover:not(:disabled) { background: #1748ba; }
.button-ghost { color: #33517c; background: white; border-color: #d9e1ec; }
.button-ghost:hover:not(:disabled) { background: #f4f7fc; }
.button-small { min-height: 34px; font-size: 12px; padding: 0 12px; }
.full-width { width: 100%; }
.notice { max-width: 700px; border-radius: 11px; padding: 13px 16px; margin: 0 0 24px; background: #e9f2ff; color: #164181; border: 1px solid #c9dcfb; line-height: 1.5; }
.notice.error { background: #fff0f0; border-color: #f3c9c9; color: #a23131; }
.auth-card { width: min(100%, 440px); margin: 8vh auto 0; padding: clamp(24px, 5vw, 40px); background: white; border: 1px solid #e1e8f1; border-radius: 18px; box-shadow: 0 20px 60px #1937610d; }
.auth-card h1 { font-size: 29px; margin: 11px 0 12px; }
.auth-card p { font-size: 14px; margin-bottom: 27px; }
form label:not(.drop-area) { display: block; font-weight: 700; font-size: 13px; margin: 19px 0 8px; }
form input:not([type="file"]) { width: 100%; height: 44px; border: 1px solid #d2dce8; border-radius: 9px; padding: 0 12px; background: #fff; color: #1b2536; outline: none; }
form input:not([type="file"]):focus { border-color: #2156cf; box-shadow: 0 0 0 3px #2156cf1a; }
.auth-card form .button { margin-top: 26px; }
.field-help { font-size: 12px !important; line-height: 1.5; margin: 7px 0 0 !important; }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 6px 0 34px; }
.hero h1 { max-width: 720px; font-size: clamp(29px, 3vw, 42px); line-height: 1.25; margin: 14px 0 10px; }
.hero p { margin-bottom: 0; }
.hero-stat { min-width: 150px; border-left: 1px solid #ced9e8; padding-left: 25px; display: flex; align-items: baseline; gap: 5px; color: #708096; font-size: 13px; }
.hero-stat span:first-child { align-self: center; margin-right: 10px; }
.hero-stat strong { color: #1c376e; font-size: 32px; }
.content-grid { display: grid; grid-template-columns: minmax(310px, .87fr) minmax(420px, 1.13fr); align-items: start; gap: 22px; }
.panel { min-width: 0; background: white; border: 1px solid #e1e8f1; border-radius: 17px; padding: clamp(20px, 2.5vw, 30px); box-shadow: 0 9px 30px #19376108; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.section-heading h2 { margin: 8px 0 0; }
.drop-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 180px; text-align: center; border: 1.5px dashed #a9bfe6; background: #f8fbff; border-radius: 12px; color: #24509a; transition: background .15s, border-color .15s; cursor: pointer; padding: 20px; }
.drop-area:hover, .drop-area.dragging { background: #eef5ff; border-color: #2156cf; }
.drop-area strong { font-size: 14px; }
.drop-area span:not(.upload-icon) { color: #71829c; font-size: 12px; }
.drop-area input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-icon { display: grid; place-items: center; background: white; border: 1px solid #dce7f7; width: 43px; height: 43px; border-radius: 11px; font-size: 25px; margin-bottom: 5px; }
.selected-file { min-height: 40px; display: flex; align-items: center; font-size: 12px; color: #6c7c91; overflow-wrap: anywhere; }
.progress { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #5070a6; margin: 0 0 12px; }
.progress-track { flex: 1; height: 6px; border-radius: 4px; background: #e1e9f5; overflow: hidden; }
#progress-fill { width: 0%; height: 100%; background: #2156cf; }
.code-section { border-top: 1px solid #e8eef5; margin-top: 29px; padding-top: 25px; }
.code-heading { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.code-heading h3 { margin-bottom: 4px; }
.code-heading p { font-size: 12px; margin-bottom: 14px; }
pre { margin: 0; border-radius: 10px; padding: 15px; overflow-x: auto; white-space: pre; background: #182640; color: #e8f0ff; font-size: 11px; line-height: 1.6; }
.file-list { display: grid; }
.empty-state { text-align: center; color: #71829a; padding: 55px 18px; background: #f8fafd; border: 1px dashed #d8e2ef; border-radius: 10px; font-size: 14px; }
.file-row { display: flex; justify-content: space-between; align-items: center; min-width: 0; gap: 15px; padding: 16px 0; border-top: 1px solid #edf1f6; }
.file-row:first-child { border-top: 0; padding-top: 0; }
.file-detail { display: flex; align-items: center; min-width: 0; gap: 12px; }
.file-icon { flex: none; display: grid; place-items: center; width: 39px; height: 42px; border-radius: 9px; background: #eef4ff; color: #2759bd; font-size: 17px; }
.file-meta { min-width: 0; }
.file-name { display: block; font-weight: 700; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.file-subtitle { display: block; color: #8491a3; font-size: 11px; margin-top: 4px; }
.file-link { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border: 1px solid #dce5f1; border-radius: 8px; color: #2755a9; font-size: 12px; font-weight: 700; text-decoration: none; }
.file-link:hover { background: #f3f7ff; }
footer { color: #95a2b2; font-size: 11px; border-top: 1px solid #e2e8f0; padding: 20px 0 26px; }
dialog { width: min(100% - 32px, 480px); border: 1px solid #dce5f0; border-radius: 16px; padding: 28px; box-shadow: 0 25px 70px #071a3b35; }
dialog::backdrop { background: #0b1d3b8a; }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; }
.dialog-heading h2 { margin: 7px 0 10px; }
.icon-button { border: 0; background: transparent; color: #697b93; font-size: 26px; line-height: 1; padding: 0 4px; }
.settings-form > p { font-size: 13px; margin-bottom: 20px; }
.settings-form .button-primary { margin-top: 27px; }
.optional { color: #8c99a9; font-weight: 400; }
@media (max-width: 880px) { .content-grid { grid-template-columns: 1fr; } .hero-stat { display: none; } }
@media (max-width: 560px) { .shell { padding: 0 16px; } .site-header { min-height: 72px; } .brand div span { display: none; } .brand-mark { width: 36px; height: 36px; } .header-actions { gap: 5px; } .header-actions .button { padding: 0 10px; font-size: 12px; } main { padding: 26px 0 50px; } .auth-card { margin-top: 5vh; } .hero { margin-bottom: 25px; } .hero h1 { font-size: 28px; } .panel { padding: 20px; } .file-row { align-items: start; } .file-link { margin-top: 3px; } }