@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{font-family:'Noto Sans KR',system-ui,sans-serif;color:#202c3d;background:#f5f6f8;font-synthesis:none;--blue:#285bea;--muted:#7b8493}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.shell{max-width:1080px;margin:auto;padding:0 48px}.topbar{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e8ed}.brand{font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px;letter-spacing:-1px}.brand-icon{background:var(--blue);color:white;width:33px;height:33px;border-radius:10px;font-size:29px;line-height:28px;text-align:center;letter-spacing:-5px;padding-right:4px}.brand-icon span{color:#a6e4da;font-size:20px}.brand-label{font-size:9px;letter-spacing:1.5px;color:#8d96a4;border-left:1px solid #d8dde5;margin-left:6px;padding-left:16px;font-weight:500}.status{font-size:11px;color:#7d8794;display:flex;gap:7px;align-items:center}.status i{height:6px;width:6px;background:#3cbca1;border-radius:50%}.intro{position:relative;padding:64px 0 50px;overflow:hidden}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--blue)}h1{font-size:42px;letter-spacing:-2px;line-height:1.4;margin:17px 0 14px;font-weight:700}.intro p{font-size:13px;color:var(--muted)}.intro-art{position:absolute;right:45px;top:70px;width:215px;height:170px;transform:rotate(-9deg)}.intro-art div{position:absolute;width:114px;height:114px;border-radius:26px;border:1px solid #d9e3fa;background:#eaf0fc;left:5px;top:36px;transform:rotate(-14deg)}.intro-art div:nth-child(2){left:68px;top:5px;background:#dbe6ff;transform:rotate(7deg)}.intro-art div:last-child{left:94px;top:58px;display:grid;place-items:center;background:var(--blue);color:white;font-size:53px;border-color:var(--blue);box-shadow:0 18px 30px #285bea24;transform:rotate(9deg)}.workspace{padding-bottom:65px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}h2{font-size:18px;letter-spacing:-.6px;margin:0}.section-heading h2 span{margin-left:7px;color:var(--blue);font-size:13px;background:#e9edfa;padding:2px 7px;border-radius:6px}.small-label{font-size:9px;letter-spacing:1.5px;color:#9aa2ae}.search{display:flex;align-items:center;gap:12px;border:1px solid #e2e6ec;background:white;border-radius:12px;padding:13px 17px;margin-bottom:22px}.search>span{font-size:26px;color:#8f99aa;line-height:20px}.search input{border:0;outline:none;background:transparent;width:100%;font-size:12px;color:#28354b}.search:focus-within{border-color:var(--blue)}.search input::placeholder{color:#99a1ad}kbd{font-size:11px;border:1px solid #e5e8ee;color:#9ca5b2;padding:0 6px;border-radius:4px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{position:relative;display:flex;flex-direction:column;background:white;border:1px solid #e5e8ed;border-radius:16px;padding:23px;min-height:205px;transition:transform .18s,box-shadow .18s,border-color .18s}.card:hover{transform:translateY(-3px);border-color:#bacaf6;box-shadow:0 10px 25px #273e6f09}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.card-icon{height:39px;width:39px;display:grid;place-items:center;background:#eef2ff;color:var(--blue);border-radius:11px;font-size:18px;font-weight:600}.card:nth-child(3n+2) .card-icon{background:#e9f5f0;color:#35977a}.card:nth-child(3n) .card-icon{background:#fff3e6;color:#c28c40}.card-arrow{color:#98a3b4;font-size:20px}.card h3{font-size:15px;margin:0 0 8px;font-weight:600;overflow-wrap:anywhere}.card p{font-size:12px;color:#8993a2;line-height:1.8;margin:0 0 20px;overflow-wrap:anywhere}.card-path{font-size:9px;color:#a0a8b4;margin-top:auto;padding-top:12px;border-top:1px solid #f0f2f5;overflow-wrap:anywhere}.unavailable{opacity:.65}.empty{text-align:center;background:#fff;border:1px dashed #dce1eb;border-radius:16px;padding:42px 20px}.empty-icon{font-size:35px;color:#b1c4fc}.empty h3{font-size:16px}.empty p,.help{font-size:12px;line-height:1.8;color:var(--muted)}.button{border:0;border-radius:10px;color:white;background:var(--blue);padding:13px 19px;font-weight:600;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:25px}.empty .button{margin-top:12px}footer{padding:24px 0 35px;border-top:1px solid #e4e7ed;display:flex;justify-content:space-between;font-size:9px;color:#98a1af;letter-spacing:.5px}footer b{margin:0 10px;font-weight:400}footer>span:last-child{font-size:8px;letter-spacing:1.3px}.settings-fab{position:fixed;bottom:max(26px,env(safe-area-inset-bottom));right:26px;border:0;border-radius:16px;background:#253348;color:white;box-shadow:0 7px 20px #1c29402b;padding:14px 20px;display:flex;align-items:center;gap:9px;font-size:12px}.settings-fab>span:first-child{font-size:19px}dialog{border:0;border-radius:22px;padding:28px;max-width:620px;width:calc(100% - 30px);max-height:88dvh;color:#253348;box-shadow:0 30px 100px #14203b33}dialog::backdrop{background:#19293f66;backdrop-filter:blur(5px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.dialog-header h2{margin-top:7px;font-size:23px}.icon-button{border:1px solid #e6e9ed;background:white;border-radius:9px;padding:6px 10px;color:#758195}.muted{font-size:12px;color:var(--muted);line-height:1.8}.field{display:flex;flex-direction:column;font-size:11px;font-weight:500;gap:8px;margin:15px 0}.field input,.field select,.field textarea{width:100%;border:1px solid #dce1e9;background:#fafbfd;padding:11px;border-radius:8px;font-size:12px;color:#253348;min-width:0}.field textarea{resize:vertical;min-height:65px}.field :focus{outline:2px solid #b1c4fc;outline-offset:1px}.edit-row{border:1px solid #e0e5ee;border-radius:13px;padding:16px;margin-bottom:13px;background:#fff}.row-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}.row-controls{display:flex;gap:6px}.row-controls button{border:1px solid #e1e6ee;background:#f8f9fc;border-radius:5px;font-size:11px;color:#68768a;padding:3px 8px}.row-controls .delete{color:#bd5353}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.editor-info,.file-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.file-heading{margin:15px 0}.file-heading h3{font-size:13px;margin:0}.text-button{border:0;background:transparent;color:var(--blue);font-size:11px;white-space:nowrap}.add-button{width:100%;border:1px dashed #bacaf1;color:var(--blue);background:#f5f8ff;border-radius:9px;padding:13px;font-size:12px}.dialog-actions{display:flex;justify-content:flex-end;border-top:1px solid #e9edf2;padding-top:18px}.error{color:#bd4040;font-size:12px;line-height:1.8}.error:empty{display:none}#toast{position:fixed;bottom:105px;left:50%;transform:translateX(-50%);background:#243348;color:white;padding:12px 22px;border-radius:10px;font-size:12px;box-shadow:0 6px 30px #17233e26;z-index:10;white-space:nowrap}:focus-visible{outline:3px solid #a9bdf3;outline-offset:3px}
@media(max-width:700px){.shell{padding:0 24px}.topbar{height:80px}.brand-label{display:none}.status{font-size:10px}h1{font-size:34px;letter-spacing:-1.5px}.intro{padding:43px 0 35px}.intro-art{display:none}.intro p{font-size:12px}.cards{grid-template-columns:repeat(2,1fr);gap:12px}.card{padding:18px;min-height:205px}.card h3{font-size:14px}.card p{font-size:11px}.card-top{margin-bottom:19px}.small-label{font-size:8px}footer{margin-bottom:75px}footer>span:last-child{display:none}.settings-fab{right:20px;bottom:max(20px,env(safe-area-inset-bottom))}.workspace{padding-bottom:35px}.field-row{grid-template-columns:1fr;gap:0}dialog{padding:22px}.intro-art div:last-child{box-shadow:none}}@media(max-width:360px){.cards{grid-template-columns:1fr}.intro-art{display:none}.shell{padding:0 18px}}

/* Responsive layout: viewport width in CSS pixels, independent of screen density. */
html { -webkit-text-size-adjust: 100%; }
.shell {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card, .field, .field-row, .editor-info > *, .dialog-header > div { min-width: 0; }
.search input { min-width: 0; font-size: 16px; }
.field input, .field select, .field textarea { min-height: 48px; font-size: 16px; }
.field select { text-overflow: ellipsis; }
.button, .icon-button, .text-button, .row-controls button, .add-button { min-height: 44px; }
.icon-button, .row-controls button { min-width: 44px; }
.text-button { display: inline-flex; align-items: center; }
.row-heading, .editor-info, .file-heading { flex-wrap: wrap; }
.row-controls { flex-wrap: wrap; }
.edit-row, .error, .muted, .help, footer { overflow-wrap: anywhere; }
.card h3 { font-size: 16px; }
.card p, .intro p, .muted, .help { font-size: 14px; }
.card-path, .field, .row-heading { font-size: 12px; }
.button, .text-button, .add-button { font-size: 14px; }
dialog {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 20px;
}
.dialog-actions { padding-bottom: env(safe-area-inset-bottom); }
.settings-fab {
  right: max(20px, calc(env(safe-area-inset-right) + 12px));
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
  min-height: 48px;
}
footer { margin-bottom: calc(80px + env(safe-area-inset-bottom)); }
#toast {
  max-width: calc(100% - 32px);
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  bottom: calc(100px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { .shell { padding-inline: 48px; } }
@media (max-width: 899px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-art { display: none; }
}
@media (max-width: 479px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .shell { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  h1 { font-size: clamp(28px, 8vw, 34px); }
  .card { min-height: 180px; }
  .card-top { margin-bottom: 16px; }
  .card p { margin-bottom: 16px; }
  dialog { padding: 18px; width: calc(100% - 24px); }
  .edit-row { padding: 12px; }
  .row-heading { gap: 8px; }
  .small-label { display: none; }
  kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

/* User-managed header identity. */
.brand { max-width: 100%; gap: 12px; letter-spacing: -.6px; }
#brand-name { overflow-wrap: anywhere; min-width: 0; font-size: 22px; }
.user-icon { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px; background: #e9efff; font-size: 24px; letter-spacing: 0; overflow: hidden; }
.user-icon img { width: 100%; height: 100%; object-fit: cover; }
.topbar { height: auto; min-height: 88px; padding-block: 18px; }
.intro { padding-top: 35px; padding-bottom: 35px; }
.workspace { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.branding-settings { padding: 18px; margin-top: 18px; border: 1px solid #dfe5ef; border-radius: 14px; background: #f8faff; }
.branding-settings h3 { margin: 0 0 16px; font-size: 15px; }
.brand-preview { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; }
#name-preview { overflow-wrap: anywhere; min-width: 0; }
.branding-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.branding-settings input[type=file] { padding: 9px; font-size: 13px; }
@media(max-width:479px) { .topbar { min-height: 76px; } #brand-name { font-size: 20px; } .intro { padding-top: 26px; padding-bottom: 30px; } .branding-settings { padding: 14px; } }

.install-banner { background: #eaf0ff; border: 1px solid #dbe4fc; border-radius: 14px; padding: 18px; margin-bottom: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.install-banner > div { min-width: 0; }
.install-banner strong { font-size: 15px; overflow-wrap: anywhere; }
.install-banner p { font-size: 13px; line-height: 1.8; margin: 6px 0 0; color: #657493; }
.install-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.install-banner .icon-button { background: transparent; border-color: #cfdbf8; }