/* 공무툴즈 사이트 레이아웃. 색·글꼴·간격·모서리는 KAMU 디자인 시스템 토큰(kamu/tokens.css)과
   컴포넌트(kamu/ui.css: kamu-button·kamu-input·kamu-card·kamu-badge·kamu-alert)를 쓴다.
   이 파일에는 사이트 배치만 두고 색을 하드코딩하지 않는다. */
@import url('./kamu/fonts/noto-sans-kr/index.css');
@import url('./kamu/fonts/manrope/index.css');
@import url('./kamu/tokens.css');
@import url('./kamu/ui.css');

body{margin:0;background:var(--kamu-color-canvas);color:var(--kamu-color-text);font-family:var(--kamu-font-body);font-size:var(--kamu-text-md);line-height:var(--kamu-leading);word-break:keep-all}
a{color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--kamu-space-5)}
.muted{color:var(--kamu-color-muted)}
a.kamu-button{text-decoration:none}

/* 머리: KAMU 브랜드(K 심볼 + KAMU + 제품명) — site-patterns의 ks-brand와 같은 모양 */
#site-head{background:var(--kamu-color-surface);border-bottom:1px solid var(--kamu-color-border);position:sticky;top:0;z-index:30}
.headbar{display:flex;align-items:center;gap:var(--kamu-space-5);height:64px}
.ks-brand{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none}
.ks-brand svg{width:34px;height:34px;background:var(--kamu-color-brand);border-radius:4px;color:var(--kamu-color-on-brand)}
.ks-brand strong{font-family:var(--kamu-font-display);font-size:23px;letter-spacing:-.05em}
.ks-product{border-left:1px solid var(--kamu-color-border);padding-left:12px;font-size:15px;font-weight:700}
.ks-name{font-size:17px;font-weight:800;letter-spacing:-.02em}
.brandline{display:flex;align-items:center;gap:12px;min-width:0}
.ks-page{margin:0;border-left:1px solid var(--kamu-color-border);padding-left:12px;font-size:15px;font-weight:800;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.menu{display:flex;align-items:center;gap:var(--kamu-space-1);margin-left:auto}
.menu>a,.tools-menu>summary{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--kamu-space-3);border-radius:var(--kamu-radius-md);text-decoration:none;font-weight:650;font-size:var(--kamu-text-sm);cursor:pointer;list-style:none}
.tools-menu>summary::-webkit-details-marker{display:none}
.tools-menu>summary::after{content:"▾";font-size:11px;margin-left:4px}
.menu>a:hover,.tools-menu>summary:hover{background:var(--kamu-color-subtle)}
.menu>a[aria-current]{background:var(--kamu-color-subtle)}
.tools-menu{position:relative}
.tools-menu .drop{position:absolute;right:0;top:48px;background:var(--kamu-color-surface);border:1px solid var(--kamu-color-border);border-radius:var(--kamu-radius-lg);box-shadow:var(--kamu-shadow-overlay);padding:var(--kamu-space-4);display:grid;grid-template-columns:repeat(3,220px);gap:var(--kamu-space-3) var(--kamu-space-5)}
.tools-menu h4{margin:0 0 6px;font-size:var(--kamu-text-xs);color:var(--kamu-color-muted);font-weight:700}
.tools-menu .drop a{display:flex;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:var(--kamu-radius-sm);text-decoration:none;font-size:var(--kamu-text-sm)}
.tools-menu .drop a:hover{background:var(--kamu-color-subtle)}
.tools-menu .drop a[aria-current]{background:var(--kamu-color-subtle);box-shadow:inset 3px 0 0 var(--kamu-color-brand);font-weight:700}
.tools-menu em{font-style:normal;font-size:11px;color:var(--kamu-color-muted);white-space:nowrap}

.section{padding:var(--kamu-space-12) 0}
.sec-title,.section>.wrap>h2{font-size:var(--kamu-text-lg);font-weight:800;margin-bottom:var(--kamu-space-1)}
.lead{color:var(--kamu-color-muted);margin:0 0 var(--kamu-space-5)}

/* 메인: 첫 화면 */
.hero{background:var(--kamu-color-surface);border-bottom:1px solid var(--kamu-color-border);padding:var(--kamu-space-12) 0}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--kamu-space-8);align-items:center}
.eyebrow{display:inline-block;font-family:var(--kamu-font-display);font-size:11px;font-weight:700;letter-spacing:.13em;margin-bottom:var(--kamu-space-3)}
.hero h1{font-size:var(--kamu-title-size);font-weight:800;line-height:1.25;letter-spacing:-.02em}
.hero h1 mark{background:linear-gradient(transparent 58%,var(--kamu-color-brand) 58%);color:inherit;padding:0 2px}
.hero p.lead{font-size:var(--kamu-text-md);margin:var(--kamu-space-4) 0 var(--kamu-space-5)}
.pills{display:flex;gap:var(--kamu-space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none}
.dropzone{border:2px dashed var(--kamu-color-control-border);border-radius:var(--kamu-radius-lg);padding:var(--kamu-space-8) var(--kamu-space-6);text-align:center;background:var(--kamu-color-canvas);transition:background var(--kamu-duration),border-color var(--kamu-duration)}
.dropzone.drag{border-color:var(--kamu-color-text);background:var(--kamu-color-subtle)}
.dropzone b{display:block;font-size:var(--kamu-text-lg);margin-bottom:var(--kamu-space-1)}
.dropzone .hint{color:var(--kamu-color-muted);font-size:var(--kamu-text-sm);margin:0 0 var(--kamu-space-4)}
.dropzone .types{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:var(--kamu-space-4)}
.dropzone .types span{font-family:var(--kamu-font-display);font-size:var(--kamu-text-xs);font-weight:700;color:var(--kamu-color-muted);border:1px solid var(--kamu-color-border);border-radius:var(--kamu-radius-sm);padding:1px 7px;background:var(--kamu-color-surface)}
.suggest{margin-top:var(--kamu-space-5);text-align:left}
.suggest h3{font-size:var(--kamu-text-sm);margin:0 0 var(--kamu-space-2)}
.suggest .file{font-weight:800;word-break:break-all;box-shadow:inset 0 -6px 0 var(--kamu-color-brand)}
.suggest .cards.small{grid-template-columns:1fr}
.suggest .card{min-height:0;padding:var(--kamu-space-3)}

/* 도구 카드: kamu-card 모양 + 링크 */
.cat{margin-top:var(--kamu-space-6)}
.cat h3{font-size:var(--kamu-text-md);font-weight:800}
.cat>p{margin:0 0 var(--kamu-space-3);color:var(--kamu-color-muted);font-size:var(--kamu-text-sm)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kamu-space-3)}
.cards.small{grid-template-columns:repeat(2,1fr)}
.card{display:flex;align-items:center;gap:var(--kamu-space-3);background:var(--kamu-color-surface);border:1px solid var(--kamu-color-border);border-radius:var(--kamu-radius-lg);padding:var(--kamu-space-4);text-decoration:none;transition:border-color var(--kamu-duration),box-shadow var(--kamu-duration);min-height:88px}
.card:hover{border-color:var(--kamu-color-text);box-shadow:0 2px 0 var(--kamu-color-text)}
.card .ic{flex:none;width:48px;height:48px;border-radius:var(--kamu-radius-md);background:var(--kamu-color-brand);color:var(--kamu-color-on-brand);display:grid;place-items:center;font-weight:800;font-size:12.5px;letter-spacing:-.3px}
.card.soon .ic{background:var(--kamu-color-subtle);color:var(--kamu-color-muted)}
.card .tx{flex:1;display:flex;flex-direction:column;min-width:0}
.card .tx b{font-size:var(--kamu-text-md);font-weight:750}
.card .tx span{font-size:var(--kamu-text-sm);color:var(--kamu-color-muted)}
.card .kamu-badge{align-self:flex-start}

/* 신뢰·문의 */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kamu-space-3)}
.trust .kamu-card b{display:block;font-size:var(--kamu-text-md);margin-bottom:var(--kamu-space-1)}
.trust .kamu-card p{color:var(--kamu-color-muted);font-size:var(--kamu-text-sm)}
.cta{background:var(--kamu-color-text);color:var(--kamu-color-canvas);border-radius:var(--kamu-radius-lg);padding:var(--kamu-space-6) var(--kamu-space-8);display:flex;align-items:center;gap:var(--kamu-space-5);justify-content:space-between;flex-wrap:wrap}
.cta h2{font-size:var(--kamu-text-lg);font-weight:800}
.cta p{margin-top:6px;color:var(--kamu-color-border);font-size:var(--kamu-text-sm)}

/* 도구 페이지 */
.crumb{font-size:var(--kamu-text-xs);color:var(--kamu-color-muted)}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.soon-box{text-align:center}
.soon-box h2{font-size:var(--kamu-text-lg);font-weight:800;margin:var(--kamu-space-3) 0 var(--kamu-space-2)}
.soon-box>p{color:var(--kamu-color-muted);margin:0 auto var(--kamu-space-4);max-width:560px}
.soon-box ol{text-align:left;max-width:520px;margin:0 auto var(--kamu-space-5);color:var(--kamu-color-muted);font-size:var(--kamu-text-sm)}
/* 도구 아래 안내: 작업 화면과, 그리고 두 묶음(이어서 할 일·자주 묻는 질문) 사이에 간격 */
#tool-info{margin-top:var(--kamu-space-8)}
#tool-info>section+section{margin-top:var(--kamu-space-8)}
#tool-info.section{margin-top:0;padding-top:var(--kamu-space-8)}
#tool-info>section:last-child{margin-bottom:var(--kamu-space-4)}
.next h2,.faq h2{font-size:var(--kamu-text-lg);font-weight:800;margin-bottom:var(--kamu-space-3)}
.faq details{background:var(--kamu-color-surface);border:1px solid var(--kamu-color-border);border-radius:var(--kamu-radius-md);padding:var(--kamu-space-3) var(--kamu-space-4);margin-bottom:var(--kamu-space-2)}
.faq summary{cursor:pointer;font-weight:700}
.faq details p{margin-top:var(--kamu-space-2);color:var(--kamu-color-muted);font-size:var(--kamu-text-sm)}
.info-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--kamu-space-6);align-items:start}
.prose h2{font-size:var(--kamu-text-md);font-weight:800;margin:var(--kamu-space-5) 0 var(--kamu-space-1)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--kamu-color-muted);font-size:var(--kamu-text-sm)}
.prose b{color:var(--kamu-color-text)}
.stack{display:grid;gap:var(--kamu-space-4)}
.mailbox{display:grid;gap:2px;padding:var(--kamu-space-4);border-radius:var(--kamu-radius-md);background:var(--kamu-color-subtle)}
.mailbox .addr{font-size:var(--kamu-text-lg);word-break:break-all;user-select:all}
.row{display:flex;gap:var(--kamu-space-2);align-items:center;flex-wrap:wrap}

/* 꼬리 */
#site-foot{border-top:1px solid var(--kamu-color-border);background:var(--kamu-color-surface);margin-top:var(--kamu-space-8)}
.footin{display:flex;gap:var(--kamu-space-5);flex-wrap:wrap;padding-top:var(--kamu-space-6);padding-bottom:var(--kamu-space-8);color:var(--kamu-color-muted);font-size:var(--kamu-text-sm)}
.footin p{margin-top:4px}
.footin .links{margin-left:auto;display:flex;gap:var(--kamu-space-4)}
.footin .links a{text-decoration:none;font-weight:650;color:var(--kamu-color-text)}
.footin .small{flex-basis:100%;font-size:var(--kamu-text-xs)}

/* 고친 사본 미리보기 창(assets/hwpx-preview.js) */
.kamu-dialog-content.hp-dialog{width:min(920px,calc(100vw - 32px));padding:var(--kamu-space-5)}
.hp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kamu-space-2) var(--kamu-space-3);margin-bottom:var(--kamu-space-3)}
.hp-name{min-width:0;overflow-wrap:anywhere}
.hp-file{flex:1 1 200px;min-width:0;width:auto}
.hp-nav{display:inline-flex;align-items:center;gap:var(--kamu-space-2);margin-left:auto}
.hp-page{background:var(--kamu-color-subtle);border:1px solid var(--kamu-color-border);border-radius:var(--kamu-radius-md);padding:var(--kamu-space-3);min-height:200px}
.hp-page svg{display:block;width:100%;height:auto;max-width:794px;margin:0 auto;background:var(--kamu-color-surface);box-shadow:var(--kamu-shadow-overlay)}

@media (max-width:900px){
  .hero-grid,.info-grid{grid-template-columns:1fr}
  .cards,.trust{grid-template-columns:1fr 1fr}
  .tools-menu .drop{grid-template-columns:1fr;width:280px}
}
@media (max-width:620px){
  .wrap{padding:0 var(--kamu-space-4)}
  .cards,.cards.small,.trust{grid-template-columns:1fr}
  .ks-brand strong{display:none}
  .ks-product{border-left:0;padding-left:0}
  .brandline{gap:8px}
  .ks-page{font-size:14px;padding-left:8px}
  .menu>a{display:none}
  .cta{padding:var(--kamu-space-6)}
}