@font-face{font-family:"GmarketSans";font-weight:500;src:url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff")}
@font-face{font-family:"GmarketSans";font-weight:700;src:url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff")}

:root{
  --bg:#f5f4f0;
  --surface:#fbfbf9;
  --panel:#ffffff;
  --panel-soft:#f7f6f2;
  --ink:#1c1c1a;
  --ink-hover:#3a3935;
  --ink-2:#55534d;
  --sub:#7a776f;
  --muted:#8a877f;
  --line:#e3e1db;
  --line-2:#dcdad3;
  --line-3:#efeee9;
  --hover:#efeee9;
  --soft:#f3f2ee;
  --track:#ebe9e3;
  --dash:#b9b6ad;
  --font:"IBM Plex Sans KR",sans-serif;
  --mono:"JetBrains Mono",monospace;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}a:hover{color:var(--ink-2)}
button{font:inherit;color:inherit}

.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.note,.hint{font-size:12px;color:var(--muted)}

/* ---------- Layout ---------- */
.app{min-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:14px}
.brand-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.brand .mono-label{letter-spacing:.14em}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.layout{flex:1;display:flex;flex-wrap:wrap;align-items:flex-start;min-height:0}

/* ---------- Buttons ---------- */
.btn{height:36px;padding:0 14px;background:transparent;border:1px solid var(--line-2);border-radius:999px;font-size:13px;cursor:pointer}
.btn:hover{background:var(--hover)}
.btn:disabled{opacity:.4;cursor:default}
.btn:disabled:hover{background:transparent}
#undo,#redo{padding:0 12px}
.btn--outline{border-color:var(--ink);font-weight:500}
.btn--solid{padding:0 18px;background:var(--ink);color:#fff;border:none;font-weight:500}
.btn--solid:hover{background:var(--ink-hover)}
.btn-primary{height:48px;background:var(--ink);color:#fff;border:none;border-radius:999px;font-size:15px;font-weight:500;cursor:pointer}
.btn-primary:hover{background:var(--ink-hover)}
.btn-sm{flex:1;height:34px;background:#fff;border:1px solid var(--line-2);border-radius:999px;font-size:12px;cursor:pointer}
.btn-sm:hover{background:var(--soft)}
.link{padding:4px 0;background:transparent;color:var(--ink-2);border:none;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--ink)}
.link--start{align-self:flex-start}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:flex;align-items:center;gap:6px;padding:7px 12px;background:#fff;color:var(--ink);border:1px solid var(--line-2);border-radius:999px;font-size:12px;cursor:pointer}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip-dot{width:8px;height:8px;border-radius:999px}

/* 세그먼트 컨트롤 */
.seg{display:flex;background:var(--soft);border-radius:999px;padding:3px;gap:2px}
.seg--dark{background:var(--track)}
.seg--narrow{flex:1;max-width:200px}
.seg-btn{flex:1;height:28px;background:transparent;color:var(--sub);border:none;border-radius:999px;font-size:12px;cursor:pointer}
#harmonies .seg-btn{height:30px}
.seg-btn.is-active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg-rows{display:flex;flex-direction:column;gap:14px}
.seg-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.seg-row .seg{flex:1;max-width:220px}
.seg-label{font-size:13px;color:var(--ink-2);flex-shrink:0}

/* ---------- Stage ---------- */
.stage{flex:999 1 360px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:24px;padding:48px 28px;position:sticky;top:0;align-self:flex-start;max-height:100vh;overflow-y:auto}
.frame{position:relative;max-width:100%;aspect-ratio:var(--aspect);border-radius:8px;border:6px solid #1a1a1a;box-shadow:0 1px 2px rgba(0,0,0,.06),0 24px 60px rgba(40,36,28,.16);overflow:hidden;background:#ddd}
.frame.is-phone{border-radius:44px;border-width:10px}
.frame canvas{display:block;width:100%;height:100%;touch-action:none}
.clock{position:absolute;inset:0;pointer-events:none}
.clock-top{position:absolute;left:0;right:0;top:8%;display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.clock-date{font-size:15px;font-weight:500}
.clock-time{font-size:76px;font-weight:700;line-height:1;letter-spacing:-.02em}
.clock-bar{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:34%;height:5px;border-radius:3px;background:rgba(255,255,255,.85)}

.meta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.meta-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
#candBtn{height:32px;padding:0 14px;border-color:var(--ink)}

.cand{width:100%;max-width:880px;display:flex;flex-direction:column;gap:10px}
.cand-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.cand-title{font-size:13px;font-weight:500}
.strip{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 14px;cursor:grab;user-select:none;-webkit-user-select:none;scrollbar-width:thin}
.strip.is-dragging{cursor:grabbing}
.thumb{flex:0 0 auto;width:var(--thumb-w);aspect-ratio:var(--aspect);padding:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#ddd;cursor:inherit;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.thumb:hover{border-color:var(--ink)}
.thumb canvas{display:block;width:100%;height:100%;pointer-events:none}

/* ---------- Panel ---------- */
.panel{flex:1 1 340px;min-width:280px;align-self:stretch;border-left:1px solid var(--line);padding:24px 24px 40px;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;gap:28px;background:var(--panel)}
.group{display:flex;flex-direction:column;gap:14px}
.group--tight{gap:10px}
.group--line{gap:12px;border-top:1px solid var(--line-3);padding-top:24px}
.group--line.group--tight{gap:10px}
.group-head{display:flex;justify-content:space-between;align-items:center}

.check{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}
.check--row{justify-content:space-between;font-size:13px;color:var(--ink-2)}
.check input{width:16px;height:16px;margin:0;accent-color:var(--ink)}

.month-nav{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:999px;padding:4px}
.month-arrow{width:34px;height:34px;border:none;background:transparent;border-radius:999px;font-size:16px;cursor:pointer}
.month-arrow:hover{background:#f1f0eb}
.month-label{border:none;background:transparent;font-size:15px;font-weight:500;cursor:pointer}

.field{display:flex;flex-direction:column;gap:4px}
.field--gap{gap:8px}
.field-head{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.field-head > span:first-child,.field-head > label{color:var(--ink-2)}
/* 슬라이더 직접 입력칸 · 단계 버튼: 라벨 줄 오른쪽에 작게 */
.field-head .tb-num{height:24px;width:3.4em;padding:0 6px;font-size:12px;color:var(--ink-2);border-color:var(--line-2);background:var(--surface)}
.field-head .tb-num-wrap{color:var(--muted);font-family:var(--mono);font-size:11px;gap:3px}
.field .tb-presets{margin-top:4px;gap:4px}
#photoBox .field-head > .tb-num{margin-right:10px} /* % 단위가 붙은 칸과 오른쪽 끝 맞춤 */
.field .tb-presets button{height:24px;min-width:0;padding:0 10px;font-size:11px;border-color:var(--line-2)}
@media (pointer:coarse){.field-head .tb-num{height:32px;width:3.6em;font-size:16px}.field .tb-presets button{height:30px;padding:0 12px;font-size:12px}}
.num{font-family:var(--mono);color:var(--muted)}
input[type=range]{width:100%;accent-color:var(--ink)}

.select{height:40px;padding:0 10px;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:14px}
.row-2{display:flex;gap:6px}
.text-input{height:40px;padding:0 12px;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:14px}
.text-input--white{height:38px;background:#fff;font-size:13px}
.num-input{width:96px;height:34px;padding:0 10px;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:6px;font:inherit}
.custom-size{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px}
.custom-size .x{color:var(--muted)}

/* 색상 입력 공통: 투명한 color input을 원형/사각 위에 덮어 씀 */
input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.weekend{display:flex;align-items:center;gap:10px;font-size:13px;flex-wrap:wrap}
.weekend-label{color:var(--ink-2);flex:1}
.color-pick{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px}
.color-dot{position:relative;width:24px;height:24px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);overflow:hidden}

/* MY DAYS 미니 달력 */
.mini-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center}
.mini-cal .wd{font-size:11px;padding:4px 0}
.day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:999px;background:transparent;font-size:12px;cursor:pointer}
.day.is-blank{visibility:hidden}

.box{display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--panel-soft);border-radius:8px}
.box-head{display:flex;justify-content:space-between;align-items:center}
.box-title{font-size:14px;font-weight:500}
.box-body{display:flex;flex-direction:column;gap:12px}
.box-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.close{padding:2px 6px;background:transparent;border:none;font-size:12px;color:var(--muted);cursor:pointer}
.mark-colors{display:flex;flex-wrap:wrap;gap:8px}
.mark-color{position:relative;width:22px;height:22px;border-radius:999px;border:none;padding:0;cursor:pointer;overflow:hidden}
.mark-color.is-active{box-shadow:0 0 0 2px var(--panel-soft),0 0 0 4px var(--ink)}
.mark-color--custom{background:conic-gradient(#e0457b,#e8892a,#e8d02a,#2f9e6b,#2f6fdb,#8e4fd6,#e0457b)}

.month-marks{display:flex;flex-direction:column;gap:2px}
.month-mark{display:flex;align-items:center;gap:10px;padding:6px 8px;background:transparent;border:none;border-radius:6px;font-size:13px;text-align:left;cursor:pointer}
.month-mark:hover{background:var(--soft)}
.month-mark .chip-dot{flex-shrink:0}
.month-mark-day{font-family:var(--mono);font-size:12px;color:var(--muted);width:30px}

/* BACKGROUND */
.styles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.style-btn{text-align:left;padding:10px 12px;background:#fff;color:var(--ink);border:1px solid var(--line-2);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.style-btn.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.style-name{font-size:14px;font-weight:500}
.style-desc{font-size:11px;opacity:.7}
.upload{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:1px dashed var(--dash);border-radius:8px;font-size:13px;cursor:pointer;background:var(--surface)}
.upload:hover{background:#f1f0eb}

/* COLOR */
.swatches{display:flex;gap:6px}
.swatch{position:relative;flex:1;height:44px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);cursor:pointer;overflow:hidden}

/* 미리보기와 패널이 두 줄로 나뉘는 폭에서는 미리보기 고정을 끈다 */
@media (max-width:719px){
  .stage{position:static;max-height:none;overflow:visible;align-self:auto}
}
@media (max-width:640px){
  .topbar{padding:14px 16px}
  .stage{padding:28px 16px}
  .panel{position:static;max-height:none;border-left:none;border-top:1px solid var(--line);padding:24px 16px 40px}
}

/* 다크 모드 (인쇄는 라이트 그대로) · 미리보기 캔버스와 배경화면 결과물은 그대로 */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#151412; --surface:#1b1a17; --panel:#201f1c; --panel-soft:#262521;
    --ink:#edebe6; --ink-hover:#ffffff; --ink-2:#cac7bf; --sub:#a29f96; --muted:#8c897f;
    --line:#302e2a; --line-2:#3b3934; --line-3:#2a2925; --hover:#2c2b27; --soft:#282723; --track:#36342f;
    --dash:#56534c;
    --cw-sun:#f07a6c; --cw-sat:#7d9ef0;
  }
  :root[data-theme="dark"] .tb-presets button[aria-pressed="true"]{color:var(--bg)}
  :root[data-theme="dark"] .btn--solid,:root[data-theme="dark"] .btn-primary,
  :root[data-theme="dark"] .chip.is-active,:root[data-theme="dark"] .style-btn.is-active{color:var(--bg)}
  :root[data-theme="dark"] .btn-sm,:root[data-theme="dark"] .chip,:root[data-theme="dark"] .style-btn,
  :root[data-theme="dark"] .text-input--white{background:var(--surface)}
  :root[data-theme="dark"] .chip.is-active,:root[data-theme="dark"] .style-btn.is-active{background:var(--ink)}
  :root[data-theme="dark"] .seg-btn.is-active{background:var(--line-2);box-shadow:0 1px 3px rgba(0,0,0,.4)}
  :root[data-theme="dark"] .month-arrow:hover,:root[data-theme="dark"] .upload:hover{background:var(--hover)}
  :root[data-theme="dark"] .month-arrow,:root[data-theme="dark"] .month-label{color:var(--ink)}
  :root[data-theme="dark"] .mark-color:not(.is-active),:root[data-theme="dark"] .color-dot,
  :root[data-theme="dark"] .swatch{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
  :root[data-theme="dark"] .frame{box-shadow:0 0 0 1px var(--line-2),0 24px 60px rgba(0,0,0,.5)}
  :root[data-theme="dark"] .thumb{box-shadow:none}
}