/* ==========================================================================
   Growth Lab — base tokens & primitives
   "조용한 연구실" : dark first, white point, blue accent, 여백 중심
   ========================================================================== */

:root{
  /* accent (설정에서 변경 가능) */
  --accent:#5b6cff;
  --accent-soft:rgba(91,108,255,.14);
  --accent-line:rgba(91,108,255,.42);

  /* typography */
  --font:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Segoe UI',
         'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,'D2Coding',monospace;
  --fs:16px;

  /* radius / motion */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.22s;

  /* dark (default) */
  --bg:#0a0a0c;
  --bg-2:#0e0e11;
  --panel:#141417;
  --panel-2:#191a1e;
  --hover:#1f2025;
  --border:#26272d;
  --border-soft:#1c1d22;
  --text:#f3f3f5;
  --text-2:#b6b7bf;
  --muted:#7c7d88;
  --faint:#4c4d57;
  --good:#4ade80;
  --warn:#fbbf24;
  --bad:#f87171;
  --shadow:0 24px 60px -24px rgba(0,0,0,.75);
}

:root[data-theme="light"]{
  --bg:#f7f7f9;
  --bg-2:#ffffff;
  --panel:#ffffff;
  --panel-2:#f3f4f7;
  --hover:#eceef3;
  --border:#e0e2e9;
  --border-soft:#eceef2;
  --text:#14151a;
  --text-2:#4a4c57;
  --muted:#787a86;
  --faint:#a9abb6;
  --good:#16a34a;
  --warn:#c2820a;
  --bad:#dc2626;
  --shadow:0 22px 50px -26px rgba(20,22,40,.28);
}

:root[data-motion="off"] *{animation:none!important;transition:none!important}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
html{font-size:var(--fs)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  word-break:keep-all;          /* 한글 단어 중간에서 줄바꿈되지 않도록 */
  overflow-wrap:break-word;
}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--accent-soft);color:var(--text)}

/* scrollbar */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:38px;padding:0 1rem;border-radius:10px;
  border:1px solid var(--border);background:var(--panel-2);color:var(--text);
  font-size:.875rem;font-weight:600;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease),opacity var(--dur);
}
.btn:hover{background:var(--hover)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-primary{background:var(--accent);border-color:transparent;color:#fff}
.btn-primary:hover{background:var(--accent);filter:brightness(1.12)}
.btn-white{background:var(--text);color:var(--bg);border-color:transparent}
.btn-white:hover{filter:brightness(.92);background:var(--text)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--hover);color:var(--text)}
.btn-sm{height:32px;padding:0 .7rem;font-size:.8rem;border-radius:9px}
.btn-lg{height:52px;padding:0 1.8rem;font-size:1rem;border-radius:14px}
.btn-icon{width:36px;height:36px;padding:0;border-radius:10px}
.btn-danger{color:var(--bad)}
.btn-danger:hover{background:rgba(248,113,113,.12)}

/* ---------------- form ---------------- */
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem}
.field > label{font-size:.82rem;font-weight:600;color:var(--text-2)}
.input,.textarea,.select{
  width:100%;background:var(--bg-2);border:1px solid var(--border);
  border-radius:10px;padding:.66rem .8rem;font-size:.9rem;color:var(--text);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  outline:none;
}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.textarea{resize:vertical;min-height:92px;line-height:1.6}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem}
.hint{font-size:.76rem;color:var(--muted)}
.err{font-size:.78rem;color:var(--bad);min-height:1.1em}

/* upload dropzone */
.drop{
  border:1.5px dashed var(--border);border-radius:var(--r-md);
  padding:1.6rem 1rem;text-align:center;color:var(--muted);cursor:pointer;
  transition:border-color var(--dur),background var(--dur),color var(--dur);
  background:var(--bg-2);
}
.drop:hover,.drop.over{border-color:var(--accent-line);color:var(--text-2);background:var(--accent-soft)}
.drop .plus{font-size:1.5rem;line-height:1;margin-bottom:.4rem;display:block}
.drop small{display:block;font-size:.74rem;color:var(--faint);margin-top:.25rem}
.drop-preview{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border)}
.drop-preview img{width:100%;height:170px;object-fit:cover}
.drop-preview button{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;width:28px;height:28px;border-radius:8px;backdrop-filter:blur(4px)}

/* ---------------- modal ---------------- */
.overlay{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:1.2rem;
  background:rgba(4,4,6,.62);backdrop-filter:blur(6px);
  animation:fade .18s var(--ease);
}
:root[data-theme="light"] .overlay{background:rgba(30,32,45,.34)}
.modal{
  width:100%;max-width:520px;max-height:88vh;overflow:auto;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:1.5rem;animation:pop .22s var(--ease);
}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.3rem}
.modal-head h3{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.modal-head p{font-size:.82rem;color:var(--muted);margin-top:.25rem}
.modal-foot{display:flex;justify-content:flex-end;gap:.55rem;margin-top:1.4rem}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------------- toast ---------------- */
#toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none}
.toast{
  background:var(--panel);border:1px solid var(--border);color:var(--text);
  padding:.62rem 1rem;border-radius:11px;font-size:.85rem;box-shadow:var(--shadow);
  animation:rise .2s var(--ease);
}
.toast.good{border-color:rgba(74,222,128,.4)}
.toast.bad{border-color:rgba(248,113,113,.45)}

/* ---------------- misc ---------------- */
.chip{
  display:inline-flex;align-items:center;gap:.32rem;height:24px;padding:0 .55rem;
  border-radius:7px;font-size:.72rem;font-weight:600;
  background:var(--panel-2);border:1px solid var(--border-soft);color:var(--text-2);
}
.chip.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--text)}
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  padding:4rem 1rem;text-align:center;color:var(--muted);
}
.empty .big{font-size:1rem;color:var(--text-2);font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.divider{height:1px;background:var(--border-soft);border:0;margin:1.2rem 0}