/* ===== App shell ===== */
:root{
  --navy:#003C70; --navy-d:#0A1A2F; --navy-2:#13294A;
  --cyan:#0FC3F4; --cyan-d:#00ADE5; --yellow:#FFEE62; --flame:#FF5826;
  --ink:#1D2433; --ink-2:#4A5468; --muted:#8A8F9C;
  --cream:#FAF7F2; --cream-2:#F3EEE6; --line:#E6DED2; --white:#fff;
  --ok:#1E9E62; --bad:#D9443A;
  --r:14px;
  --font:'Noto Sans KR',system-ui,-apple-system,'Malgun Gothic',sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--cream);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--navy)}
button,input,select,textarea{font:inherit;color:inherit}
.muted{color:var(--muted);font-weight:400}
.serif{font-family:'Fraunces',Georgia,serif}

/* topbar */
.topbar{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--navy-d);color:#fff;border-bottom:1px solid #1d2c44}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex-shrink:0}
.brand-logo{width:36px;height:36px;border-radius:10px;background:#fff;object-fit:contain;padding:3px}
.brand-name{font-size:19px;font-weight:700;letter-spacing:-.3px}
.brand-name b{color:var(--cyan)}
.topnav{display:flex;gap:4px;margin-left:12px}
.topnav a{color:#C9D3E3;text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:500;font-size:14.5px}
.topnav a:hover{background:#ffffff14;color:#fff}
.topnav a.on{background:#ffffff1f;color:#fff}
.usage-pill{margin-left:auto;background:#0FC3F422;color:var(--cyan);border:1px solid #0FC3F455;padding:6px 14px;border-radius:999px;font-weight:700;font-size:13.5px;white-space:nowrap}
.icon-btn{display:none;width:42px;height:42px;border-radius:10px;border:1px solid #ffffff33;background:transparent;color:#fff;font-size:20px;cursor:pointer}

.view{display:none}
.view.on{display:block}
.view.studio.on{display:grid}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:12px;padding:9px 16px;font-weight:700;cursor:pointer;text-decoration:none;font-size:14.5px;transition:transform .08s,background .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#0b4d8a}
.btn-primary:disabled{background:#D9DEE6;color:#8D96A5;cursor:not-allowed}
.btn-white{background:#fff;color:var(--navy-d)}
.btn-outline{background:#fff;border-color:var(--line);color:var(--navy)}
.btn-outline:hover{border-color:var(--navy)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink-2);font-weight:500}
.btn-ghost:hover{border-color:#bfb4a3}
.btn-ghost.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-ghost.danger{color:var(--bad)}
.btn-lg{padding:14px 22px;font-size:16.5px;border-radius:14px}
.btn-block{width:100%}
.link-btn{background:none;border:0;color:var(--navy);text-decoration:underline;cursor:pointer;padding:0;font-size:13px}

/* home */
.hero{background:radial-gradient(1200px 500px at 10% -10%,#16365f 0%,transparent 60%),var(--navy-d);color:#fff;padding:70px 20px 80px}
.hero-inner{max-width:880px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:10px;border:1px solid #0FC3F466;background:#0FC3F414;color:#BFEFFD;padding:8px 18px;border-radius:999px;font-size:15px}
.hero-badge .dot{width:9px;height:9px;border-radius:50%;background:#3BE38B}
.hero h1{font-size:clamp(34px,6vw,64px);line-height:1.12;margin:26px 0 18px;letter-spacing:-1.5px;font-weight:900}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:19px;color:#B9C3D3;max-width:640px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 14px}
.hero-ctas .btn-primary{background:var(--cyan);color:var(--navy-d)}
.hero-ctas .btn-primary:hover{background:#4fd6fa}
.hero-note{font-size:15px!important;color:#8EA0BA!important}
.home-sec{padding:64px 20px;background:#fff}
.home-sec.alt{background:var(--cream)}
.wrap{max-width:900px;margin:0 auto}
.wrap.narrow{max-width:760px;padding:34px 18px 60px}
.home-sec h2{font-size:clamp(24px,3.4vw,34px);margin:14px 0 10px;letter-spacing:-.6px}
.lead{font-size:17px;color:var(--ink-2)}
.chip{display:inline-block;padding:6px 14px;border-radius:10px;font-weight:700;font-size:14px}
.chip-blue{background:#E4EEFB;color:#1E4E8C}
.chip-cyan{background:#DDF6FD;color:#006C8F}
.steps{list-style:none;padding:0;margin:26px 0 34px;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:4px 0 18px 64px;display:flex;flex-direction:column}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:#E6F8FE;color:var(--navy);font-weight:800;display:grid;place-items:center;font-size:18px}
.steps b{font-size:17px}
.steps span{color:var(--ink-2)}
.sample-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.doc-frame{background:var(--cream-2);border-radius:26px;padding:22px;max-height:760px;overflow:auto}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pill{border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:#fff;font-size:14.5px}
.foot{background:var(--navy-d);color:#8EA0BA;text-align:center;padding:26px;font-size:14px}

/* segmented */
.seg{display:inline-flex;background:var(--cream-2);border-radius:14px;padding:4px;gap:2px}
.seg button{border:0;background:transparent;padding:8px 16px;border-radius:11px;cursor:pointer;color:var(--ink-2);font-weight:500}
.seg button.on{background:#fff;color:var(--ink);font-weight:800;box-shadow:0 1px 3px #0000001a}

/* studio layout */
.studio{grid-template-columns:400px minmax(0,1fr) 320px;height:calc(100vh - 64px)}
.panel{background:#FFFDF9;border-right:1px solid var(--line);overflow-y:auto;padding:22px 20px 0;position:relative}
.panel-right{border-right:0;border-left:1px solid var(--line);padding-bottom:30px}
.panel-head{margin-bottom:14px;position:relative}
.panel-head h2{margin:2px 0 0;font-size:30px;letter-spacing:-.5px}
.panel-head .link-btn{position:absolute;right:0;top:4px}
.eyebrow{color:var(--cyan-d);font-weight:800;letter-spacing:2px;font-size:12px}
.field{margin-bottom:14px}
.field label,.sub{display:block;font-weight:700;font-size:13.5px;margin-bottom:6px;color:var(--ink-2)}
.field label .muted{float:right;font-size:12.5px}
.sub{margin-top:14px}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 13px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--cyan-d);box-shadow:0 0 0 3px #0FC3F433}
textarea{resize:vertical;line-height:1.6}
.card-sec{border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:16px;margin-bottom:14px}
.sec-title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16.5px;margin-bottom:12px}
.sec-title .num{width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:14px;flex-shrink:0}
.sec-title .count{margin-left:auto;font-weight:500;color:var(--muted);font-size:13.5px}
.sec-title .count.green{color:var(--ok);font-weight:800}
.tag-blue{margin-left:auto;border:1px solid #9CC1F0;background:#EEF5FE;color:#1E4E8C;border-radius:999px;padding:2px 10px;font-size:12.5px}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.type-btn{text-align:left;border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.type-btn b{font-size:16px}
.type-btn span{font-size:12.5px;color:var(--muted);line-height:1.45}
.type-btn.on{background:var(--navy);border-color:var(--navy);color:#fff}
.type-btn.on span{color:#C6D6EA}
.hint{font-size:13px;color:var(--muted);margin:8px 0 0}
.hint.boxed{background:var(--cream-2);border-radius:10px;padding:10px 12px;color:var(--ink-2);margin:0 0 12px}
.tip-box{background:#F2FBFE;border:1px solid #CBEFFB;border-radius:12px;padding:10px 14px;margin-bottom:10px;font-size:14px;display:grid;gap:4px}
.card-sec .btn-block{margin-bottom:8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sticky-gen{position:sticky;bottom:0;background:linear-gradient(transparent,#FFFDF9 22%);padding:22px 0 18px;margin-top:4px}
.sticky-gen .hint{margin:0 0 8px}

/* activities */
.cat{border:1px solid var(--line);border-left:5px solid var(--c);border-radius:12px;margin-bottom:8px;background:#fff;overflow:hidden}
.cat-head{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;user-select:none}
.cat-head b{color:var(--c);letter-spacing:2px;font-size:15px}
.cat-head .cnt{margin-left:auto;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);font-weight:800;border-radius:999px;padding:1px 10px;font-size:13px}
.cat-head .chev{color:var(--c);transition:transform .2s}
.cat.open .chev{transform:rotate(180deg)}
.cat-body{display:none;padding:0 10px 10px}
.cat.open .cat-body{display:block}
.act{display:flex;align-items:center;gap:8px;padding:8px 6px;border-radius:9px}
.act:hover{background:var(--cream)}
.act input[type=checkbox]{width:18px;height:18px;accent-color:var(--navy);flex-shrink:0}
.act .nm{flex:1;font-size:14px;line-height:1.3}
.act .nm small{display:block;color:var(--muted);font-size:12px}
.act select{width:auto!important;padding:4px 6px!important;font-size:12.5px;border-radius:8px!important}
.order-list{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.order-list .ttl{font-size:12.5px;font-weight:800;color:var(--ink-2);margin-bottom:6px}
.ord{display:flex;align-items:center;gap:6px;font-size:13px;padding:4px 6px;border-radius:8px;background:var(--cream)}
.ord+.ord{margin-top:4px}
.ord i{font-style:normal;width:22px;color:var(--muted);font-weight:700}
.ord span{flex:1}
.ord button{border:1px solid var(--line);background:#fff;border-radius:6px;width:26px;height:24px;cursor:pointer;font-size:12px}

/* design panel */
.logo-row{display:flex;gap:14px;align-items:center;margin:4px 0 6px}
.logo-up{width:84px;height:84px;border:1.5px dashed #F2B98E;background:#FFF7F0;border-radius:14px;display:grid;place-items:center;text-align:center;color:#C2611C;font-size:13px;cursor:pointer;position:relative;overflow:hidden;flex-shrink:0}
.logo-up img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain;background:#fff}
.logo-up img[src=""],.logo-up img:not([src]){display:none}
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.theme-btn{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:10px 4px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;position:relative}
.theme-btn .sw{width:30px;height:30px;border-radius:8px}
.theme-btn.on{border-color:#4F46E5;color:#3730A3;font-weight:800}
.theme-btn .new{position:absolute;top:-8px;right:-6px;background:var(--flame);color:#fff;font-size:10px;font-weight:800;border-radius:6px;padding:1px 6px}
.theme-btn input[type=color]{width:30px;height:30px;border:0;padding:0;background:none;cursor:pointer}
.font-box{background:var(--cream-2);border-radius:14px;padding:10px;display:grid;gap:8px}
.font-card{background:#fff;border-radius:12px;padding:12px}
.font-card b{display:block;color:var(--navy)}
.font-card span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.check-row{display:flex;gap:8px;align-items:center;margin:12px 0 0;font-size:14px;cursor:pointer}
.check-row input{accent-color:var(--navy)}
.panel-right .btn-block{margin-top:14px}
.opt-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin-bottom:8px;cursor:pointer;font-size:14.5px}
.opt-row small{display:block;color:var(--muted);font-size:12px}
.opt-row input{width:20px;height:20px;accent-color:var(--navy)}
.opt-row.disabled{background:var(--cream);color:var(--muted)}
.adj-box{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;margin:6px 0 12px}
.adj-title{display:flex;justify-content:space-between;font-weight:800;color:var(--ink-2);font-size:13.5px;margin-bottom:6px}
.adj{display:grid;grid-template-columns:1fr 30px 56px 30px;align-items:center;gap:6px;padding:4px 0;font-size:14px}
.adj button{height:28px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer}
.adj b{text-align:center;color:#C2611C}
input[type=range]{width:100%;accent-color:var(--navy)}

/* stage */
.stage{background:#E9E4DB;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.stage-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:#F6F2EB;border-bottom:1px solid var(--line);flex-wrap:wrap}
.stage-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stage-note{background:#FFF8D9;border-bottom:1px solid #F1E3A0;padding:8px 16px;font-size:13.5px;color:#6A5A10}
.stage-note.hide{display:none}
.doc-scroll{flex:1;overflow:auto;padding:26px 10px 60px}
.doc-zoom{transform-origin:top center;margin:0 auto;width:210mm}
.progress-box{margin:14px 16px 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.progress-box h4{margin:0 0 8px;font-size:15px}
.prog-item{display:flex;align-items:center;gap:10px;font-size:14px;padding:3px 0}
.prog-item .st{width:20px;text-align:center}
.prog-item.done{color:var(--ok)}
.prog-item.err{color:var(--bad)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid #cfd6e0;border-top-color:var(--navy);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.prog-bar{height:6px;background:var(--cream-2);border-radius:9px;margin-top:10px;overflow:hidden}
.prog-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--navy),var(--cyan));width:0;transition:width .4s}

/* library & settings */
.page-title{font-size:30px;margin:6px 0 6px;letter-spacing:-.5px}
.search{margin:14px 0}
.lib-list{display:grid;gap:10px}
.lib-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px}
.lib-item .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:#E6F8FE;flex-shrink:0}
.lib-item .tx{flex:1;min-width:0}
.lib-item .tx b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-item .tx span{font-size:13px;color:var(--muted)}
.lib-empty{text-align:center;color:var(--muted);padding:50px 0}
.set-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-top:16px}
.set-card h3{margin:0 0 8px;font-size:18px}
.key-row{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}
.key-row input{flex:1;min-width:200px}
.usage-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.usage-table div{background:var(--cream);border-radius:10px;padding:10px 12px;font-size:13.5px}
.usage-table b{display:block;font-size:20px;color:var(--navy)}

/* thumbs */
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.thumbs .th{position:relative;width:64px;height:84px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#fff}
.thumbs .th img{width:100%;height:100%;object-fit:cover}
.thumbs .th b{position:absolute;left:4px;top:4px;background:var(--navy);color:#fff;font-size:11px;border-radius:5px;padding:0 5px}
.thumbs .th button{position:absolute;right:2px;top:2px;border:0;background:#000a;color:#fff;border-radius:5px;cursor:pointer;font-size:11px}

/* tour */
#tour{position:fixed;inset:0;z-index:200}
.tour-hole{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(20,28,40,.55);outline:3px solid var(--cyan);transition:all .25s;pointer-events:none}
.tour-pop{position:fixed;width:min(400px,calc(100vw - 32px));background:#fff;border-radius:20px;padding:20px 22px;box-shadow:0 20px 50px #0005;transition:top .25s,left .25s}
.tour-pop .stp{color:var(--cyan-d);font-weight:800}
.tour-pop h4{margin:6px 0 6px;font-size:21px}
.tour-pop p{margin:0 0 16px;color:var(--ink-2)}
.tour-pop .row{display:flex;align-items:center;gap:8px}
.tour-pop .row .skip{margin-right:auto;background:none;border:0;color:var(--muted);cursor:pointer}

/* toast / modal */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#1D2433;color:#fff;padding:12px 20px;border-radius:12px;z-index:300;max-width:90vw;box-shadow:0 10px 30px #0004;font-size:14.5px}
#toast.err{background:#B42318}
#modal{position:fixed;inset:0;background:#0008;z-index:250;display:grid;place-items:center;padding:16px}
.modal-card{background:#fff;border-radius:20px;padding:22px;max-width:520px;width:100%;max-height:85vh;overflow:auto}
.modal-card h3{margin:0 0 10px}
.modal-card .row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* responsive */
@media (max-width:1280px){
  .studio{grid-template-columns:380px minmax(0,1fr)}
  .panel-right{grid-column:1;border-left:0;border-right:1px solid var(--line);border-top:1px solid var(--line)}
  .studio{height:auto}
  .studio .panel{max-height:none;overflow:visible}
  .studio .stage{grid-column:2;grid-row:1 / span 2;position:sticky;top:64px;height:calc(100vh - 64px)}
  .sticky-gen{position:static}
}
@media (max-width:900px){
  .topnav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--navy-d);padding:10px 16px 16px;margin:0}
  .topnav.open{display:flex}
  .topnav a{padding:14px 12px;font-size:17px;border-bottom:1px solid #ffffff14;border-radius:0}
  .icon-btn{display:block}
  .brand-name{font-size:17px}
  .studio{grid-template-columns:1fr}
  .studio .stage{grid-column:1;grid-row:auto;position:static;height:auto;min-height:70vh}
  .doc-scroll{overflow-x:hidden}
  .panel{border-right:0}
  .usage-pill{font-size:12px;padding:5px 10px}
}
@media (max-width:520px){
  .brand-name small{display:none}
  .type-grid,.two{grid-template-columns:1fr}
  .hero{padding:44px 16px 54px}
  .home-sec{padding:44px 16px}
  .doc-frame{padding:10px;border-radius:16px}
  .brand-name b{display:none}
}

/* ===== print ===== */
#printArea{display:none}
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff!important;height:auto}
  #app,#tour,#toast,#modal{display:none!important}
  #printArea{display:block}
  #printArea .page{margin:0!important;box-shadow:none!important;break-after:page;page-break-after:always}
  #printArea .page:last-child{break-after:auto;page-break-after:auto}
}
.brand-name{display:flex;align-items:baseline;gap:8px;font-family:'Fraunces',Georgia,serif;font-weight:800;font-size:22px}
.brand-name small{font-family:var(--font);font-size:12px;font-weight:500;color:#8EA0BA;letter-spacing:0}
.proxy-ok{background:#E8F8EF;border:1px solid #BDE8CF;color:#126B3E;border-radius:12px;padding:12px 14px;font-weight:600}

/* Claude chat mode */
.modal-card.wide{max-width:760px}
.cf-part{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:10px 0;background:#FFFDF9}
.cf-head{display:flex;gap:10px;align-items:baseline;margin-bottom:8px}
.cf-head b{color:var(--navy)}
.cf-head span{color:var(--ink-2);font-size:14px}
.cf-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cf-part textarea{font-size:13px;font-family:ui-monospace,Consolas,monospace}
.cf-st{font-size:13px;margin-top:6px;min-height:18px}
.cf-st.ok{color:var(--ok);font-weight:700}
.cf-st.bad{color:var(--bad)}
.cf-steps{padding-left:20px;line-height:1.8}
.mode-opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:8px;cursor:pointer}
.mode-opt:has(input:checked){border-color:var(--navy);background:#F2F7FD}
.mode-opt input{margin-top:4px;accent-color:var(--navy);width:18px;height:18px;flex-shrink:0}
.mode-opt b{display:block}
.mode-opt small{display:block;color:var(--ink-2);font-size:13px;margin-top:2px}