/* 파스텔 팔레트(포인트 전용): #F6E7C6 크림 · #E8CCC5 블러시 · #BBB9B2/#807E79 웜그레이 · #BDCED3 페일블루 · #CFD4AE 세이지 · #E3E3E3 라이트그레이
   배경은 템플릿이 돋보이도록 라이트=화이트 근접, 다크=블랙 근접 */
:root{
  --paper:#FCFBF9; --surface:#FFFFFF; --ink:#33312D; --muted:#807E79;
  --accent:#CFD4AE; --accent-ink:#3F4430; --line:#E3E3E3; --chip:#F2F0EB;
  --info:#BDCED3; --blush:#E8CCC5; --cream:#F6E7C6;
  --grad-a:#C08F7F; --grad-b:#7F99A4;
  --shadow:0 1px 2px rgba(40,36,28,.06),0 10px 28px rgba(40,36,28,.1);
  --ok:#75855A; --danger:#B96A5B;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141210; --surface:#221E18; --ink:#F0EADB; --muted:#BBB9B2;
    --accent:#CFD4AE; --accent-ink:#33361F; --line:#37322A; --chip:#2A2620;
    --info:#3A464C; --blush:#8A6C63; --cream:#4A4436;
    --grad-a:#E8CCC5; --grad-b:#BDCED3;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);
    --ok:#B4C48D; --danger:#DE9C8B;
  }
}
:root[data-theme="light"]{
  --paper:#FCFBF9; --surface:#FFFFFF; --ink:#33312D; --muted:#807E79;
  --accent:#CFD4AE; --accent-ink:#3F4430; --line:#E3E3E3; --chip:#F2F0EB;
  --info:#BDCED3; --blush:#E8CCC5; --cream:#F6E7C6;
  --grad-a:#C08F7F; --grad-b:#7F99A4;
  --shadow:0 1px 2px rgba(40,36,28,.06),0 10px 28px rgba(40,36,28,.1);
  --ok:#75855A; --danger:#B96A5B;
}
:root[data-theme="dark"]{
  --paper:#141210; --surface:#221E18; --ink:#F0EADB; --muted:#BBB9B2;
  --accent:#CFD4AE; --accent-ink:#33361F; --line:#37322A; --chip:#2A2620;
  --info:#3A464C; --blush:#8A6C63; --cream:#4A4436;
  --grad-a:#E8CCC5; --grad-b:#BDCED3;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);
  --ok:#B4C48D; --danger:#DE9C8B;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace}
button{font-family:inherit; cursor:pointer}
input,textarea,select{
  font-family:inherit; font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; width:100%;
}
input:focus,textarea:focus,select:focus,button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
textarea{resize:vertical; line-height:1.55}
label{font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em; display:block; margin-bottom:4px}

/* ===== header ===== */
/* 스크롤해도 로고·설정·새 템플릿은 항상 잡히도록 상단 고정.
   카테고리 칩 툴바(z-index:40)보다 위에 있어야 겹칠 때 헤더가 이긴다 */
header{
  position:sticky; top:0; z-index:60; background:var(--paper);
  border-bottom:1px solid transparent; transition:border-color .15s ease, box-shadow .15s ease;
}
header.stuck{border-bottom-color:var(--line); box-shadow:0 1px 12px rgba(40,36,28,.06)}
.hd-top{
  max-width:1240px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
/* 로고 = 홈 버튼 */
.brand{
  font-size:18px; font-weight:800; letter-spacing:-.02em; white-space:nowrap;
  background:none; border:none; padding:0; color:var(--ink);
  background-image:linear-gradient(92deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:opacity .12s ease;
}
.brand:hover{opacity:.72}
.hd-actions{margin-left:auto; display:flex; gap:8px; align-items:center}

/* ===== hero ===== */
.hero{max-width:1240px; margin:0 auto; padding:44px 24px 8px; text-align:center}
.hero h1{
  margin:0; font-size:clamp(32px, 5vw, 52px); font-weight:800;
  letter-spacing:-.03em; line-height:1.15; text-wrap:balance;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(92deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{margin:12px 0 0; font-size:15.5px; color:var(--muted)}
.doc-tabs{
  display:inline-flex; gap:4px; margin-top:26px;
  background:var(--chip); border-radius:999px; padding:5px;
}
.doc-tab{
  border:none; background:none; color:var(--muted); border-radius:999px;
  font-size:15px; font-weight:600; padding:9px 22px;
}
.doc-tab:hover{color:var(--ink)}
.doc-tab.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(96,84,55,.18)}
.doc-tab .cnt{font-size:11.5px; color:var(--muted); font-weight:500; margin-left:4px}
.hero .search{margin:22px auto 0; width:min(560px, 100%)}
.btn{
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:8px; padding:8px 14px; font-size:13.5px; font-weight:600;
}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-color:transparent; background:none; color:var(--muted)}
.btn.ghost:hover{color:var(--ink)}
.btn.danger{color:var(--danger); border-color:var(--danger)}
.btn:disabled{opacity:.45; cursor:default}

/* ===== toolbar (카테고리 칩) ===== */
.toolbar{
  position:sticky; top:0; z-index:40; background:var(--paper);
  padding:14px 24px 12px; border-bottom:1px solid var(--line);
}
.chips{
  max-width:1240px; margin:0 auto; display:flex; gap:7px;
  flex-wrap:wrap; justify-content:center;
}
.chip{
  border:1px solid transparent; background:var(--chip); color:var(--ink);
  border-radius:999px; padding:6px 15px; font-size:13.5px; font-weight:500; white-space:nowrap;
}
.chip:hover{border-color:var(--muted)}
.chip.on{background:var(--ink); color:var(--paper); font-weight:600}
.chip .cnt{opacity:.55; margin-left:4px; font-size:11.5px}
.chip.fav.on{background:#E8A317; color:#241a00; border-color:#E8A317}

/* 정렬 · 결과 수 — 항상 한 줄 */
.tool-row{
  max-width:1240px; margin:8px auto 0; display:flex; align-items:center;
  justify-content:space-between; gap:10px; flex-wrap:nowrap; white-space:nowrap;
}
.result-cnt{font-size:11.5px; color:var(--muted); flex-shrink:0}
.sort-wrap{display:inline-flex; align-items:center; gap:6px; flex-shrink:0; line-height:1}
.sort-lb{font-size:11.5px; color:var(--muted); margin:0}
.sort-sel{
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:999px; padding:3px 24px 3px 11px; font-size:11.5px; font-weight:500;
  line-height:1.7; height:auto; width:auto; margin:0; appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 13px) 54%, calc(100% - 9px) 54%;
  background-size:3.5px 3.5px, 3.5px 3.5px; background-repeat:no-repeat;
}
.sort-sel:hover{border-color:var(--muted)}

/* 즐겨찾기 별 — 썸네일 좌상단 */
.fav-btn{
  position:absolute; top:8px; left:8px; z-index:3; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:14px; line-height:1; cursor:pointer;
  background:rgba(255,255,255,.82); color:#9aa0a6;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  /* 썸네일 내용을 가리지 않도록 평소엔 숨기고, 담아둔 것만 항상 보인다 */
  opacity:0; transition:transform .1s ease, color .1s ease, opacity .12s ease;
}
.card:hover .fav-btn, .fav-btn:focus-visible{opacity:1}
.fav-btn:hover{transform:scale(1.12)}
.fav-btn.on{color:#E8A317; opacity:1}
@media (prefers-color-scheme: dark){ .fav-btn{background:rgba(28,28,30,.8)} }
:root[data-theme="dark"] .fav-btn{background:rgba(28,28,30,.8)}
.search{position:relative}
.search input{border-radius:999px; padding:12px 16px 12px 42px; font-size:15px; background:var(--surface)}
.search svg{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted)}

/* ===== grid ===== */
main{max-width:1240px; margin:0 auto; padding:26px 24px 80px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px 20px}
.grid.a4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.card{
  background:none; border:none; border-radius:0; overflow:visible;
  text-align:left; padding:0; transition:transform .12s ease;
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-3px)}
.card:hover .thumb{box-shadow:var(--shadow)}
.thumb{
  aspect-ratio:16/10; position:relative; overflow:hidden;
  display:flex; flex-direction:column; padding:5% 6%;
  border-radius:12px; border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(40,36,28,.1); transition:box-shadow .12s ease;
  container-type:inline-size;
}
.thumb.a4{aspect-ratio:210/297; padding:7%}
.thumb .t-badge{position:absolute; top:10px; right:10px; font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; z-index:2}
.card-meta{padding:10px 4px 0}
.card-meta .nm{font-weight:700; font-size:14px; display:flex; align-items:center; gap:6px}
.badge-custom{font-size:10px; font-weight:700; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:0 7px; line-height:1.6}
.card-meta .sub{font-size:12px; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:8px}
.dots{display:inline-flex; gap:3px}
.dot{width:9px; height:9px; border-radius:50%; border:1px solid rgba(128,128,128,.35)}
.empty{padding:60px 0; text-align:center; color:var(--muted)}

/* ===== detail overlay ===== */
/* 모달 — 오버레이는 스크롤하지 않고 시트 내부(.sheet-body)만 스크롤한다.
   오버레이를 스크롤시키면 시트 헤더가 화면 밖으로 잘려나가고 뒤 페이지와 겹쳐 보인다.
   헤더(z-index:60)보다 확실히 위에 오도록 z-index를 크게 준다. */
.overlay{
  position:fixed; inset:0; z-index:200;
  background:color-mix(in srgb, var(--ink) 58%, transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:3vh 20px; overflow:hidden;
}
.overlay.open{display:flex}
.sheet{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  width:min(1080px,100%); box-shadow:var(--shadow);
  max-height:94vh; display:flex; flex-direction:column; overflow:hidden;
}
.sheet-hd{
  display:flex; align-items:center; gap:12px; padding:16px 22px;
  border-bottom:1px solid var(--line); background:var(--paper);
  border-radius:14px 14px 0 0; flex-wrap:wrap; flex-shrink:0;
}
.sheet-hd h2{margin:0; font-size:18px; letter-spacing:-.02em; display:flex; align-items:center; gap:8px}
.sheet-hd .cat{font-size:12px; color:var(--muted); font-weight:500}
.dirty{font-size:11.5px; font-weight:600; color:var(--ok); display:none}
.dirty.on{display:inline}
.sheet-body{display:grid; grid-template-columns:390px 1fr; gap:0; overflow-y:auto; flex:1; min-height:0}
@media (max-width:860px){ .sheet-body{grid-template-columns:1fr} }
.edit-col{padding:18px 22px 24px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:14px}
@media (max-width:860px){ .edit-col{border-right:none; border-bottom:1px solid var(--line)} }
.field-row{display:flex; gap:10px}
.field-row > div{flex:1}
.color-field{display:flex; gap:6px; align-items:center}
.color-field input[type=color]{width:34px; height:34px; padding:2px; border-radius:8px; flex-shrink:0; cursor:pointer}
.color-field input[type=text]{flex:1}
.note{font-size:12px; color:var(--muted); line-height:1.5}
.prompt-col{padding:18px 22px 24px; display:flex; flex-direction:column; gap:12px; min-width:0}
.prompt-box{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; font-size:12.5px; line-height:1.7; white-space:pre-wrap;
  overflow-x:auto; flex:1; min-height:220px; overflow-y:auto;
}
.prompt-actions{display:flex; gap:8px; flex-wrap:wrap}
.x-btn{margin-left:auto; border:none; background:none; color:var(--muted); font-size:22px; line-height:1; padding:4px 8px}
.x-btn:hover{color:var(--ink)}

/* ===== new-template modal ===== */
.modal-grid{overflow-y:auto; flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:0}
@media (max-width:860px){ .modal-grid{grid-template-columns:1fr} }
.analyze-col{padding:18px 22px 24px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:12px}
@media (max-width:860px){ .analyze-col{border-right:none; border-bottom:1px solid var(--line)} }
.analyze-col textarea{flex:1; min-height:200px; font-size:12.5px}
.hint{
  background:color-mix(in srgb, var(--info) 38%, var(--surface));
  border-radius:10px; padding:12px 14px;
  font-size:12.5px; color:var(--muted); line-height:1.6;
}
.hint b{color:var(--ink)}
.form-col{padding:18px 22px 24px; display:flex; flex-direction:column; gap:12px}
.file-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.file-chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--chip);
  border-radius:999px; padding:4px 6px 4px 12px; font-size:12.5px; font-weight:600;
  max-width:100%; overflow:hidden;
}
.file-chip span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px}
.x-mini{border:none; background:none; color:var(--muted); font-size:15px; line-height:1; padding:2px 6px}
.x-mini:hover{color:var(--ink)}
.btn.loading{opacity:.6; pointer-events:none}
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--paper); font-size:13.5px; font-weight:600;
  padding:10px 18px; border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; z-index:100; box-shadow:var(--shadow);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.custom-tools{display:flex; gap:8px; align-items:center; margin-left:auto}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

/* ===== 문서 옵션 (보고서 구성 / 자소서 사진) ===== */
.opt-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:2px}
.opt{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--ink); margin-bottom:0; letter-spacing:0}
.opt input[type=radio]{width:auto; accent-color:var(--accent)}

/* ===== 문서 미리보기 (크기는 cqw — 컨테이너 폭 비례) ===== */
.doc-preview{
  display:flex; gap:14px; overflow-x:auto; padding:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
}
.pv-item{display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0}
.pv-cap{font-size:10.5px; color:var(--muted); font-weight:600; letter-spacing:.02em}
.pv-page, .pv-slide{
  border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.18);
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  border:1px solid rgba(128,128,128,.2);
  container-type:inline-size;
}
.pv-page{width:170px; aspect-ratio:210/297; padding:7%}
.pv-slide{width:250px; aspect-ratio:16/10; padding:5% 6%}
.pv-para{font-size:3cqw; line-height:1.68; margin-top:2.6cqw; opacity:.9; word-break:keep-all}
.pv-slide .pv-para, .thumb:not(.a4) .pv-para{font-size:2.4cqw}
.pv-table{margin-top:3cqw; font-size:3cqw; line-height:1}
.pv-slide .pv-table, .thumb:not(.a4) .pv-table{font-size:2.4cqw}
.pv-tr{display:flex}
.pv-tr span{flex:1; padding:1.7cqw 2cqw; text-align:center; white-space:nowrap}
.pv-tr span + span{text-align:right}
.pv-tr.head{font-weight:700; border-radius:2px 2px 0 0}
.pv-tr.body{border-bottom:1px solid; opacity:.9}
.pv-tr.body span:first-child{text-align:left}
/* 가운데 정렬 표 (포트폴리오 프로젝트 표) */
.pv-table.center .pv-tr span,
.pv-table.center .pv-tr span + span,
.pv-table.center .pv-tr.body span:first-child{text-align:center}
.pv-table.wrap .pv-tr span{white-space:normal; word-break:keep-all; line-height:1.35; padding:1.3cqw 1.2cqw}

.pv-toc-row{display:flex; align-items:flex-end; gap:4px; font-size:3.2cqw; margin-top:3.4cqw}
.pv-slide .pv-toc-row, .thumb:not(.a4) .pv-toc-row{font-size:2.5cqw; margin-top:2.6cqw}
.pv-dots{flex:1; border-bottom:1px dotted; opacity:.5; margin-bottom:1px}
.pv-photo{
  width:17cqw; height:22cqw; border:1px solid; border-radius:2px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:3cqw; opacity:.75;
}

/* ===== 컬러 필드 (10색) ===== */
.color-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; margin-top:2px}
.color-cell .note{font-size:11px; display:block; margin-bottom:2px}