@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* ============================================================
   디자인 토큰 — 차분하고 고급스러운 뉴트럴 + 잉크 블루 액센트
   ============================================================ */
:root{
  --bg:#f6f7f9;
  --bg-grad-1:#eef1f6;
  --bg-grad-2:#f7f8fa;
  --card:#ffffff;
  --ink:#15181e;            /* 본문 텍스트 */
  --ink-soft:#3d4350;
  --muted:#8a909c;          /* 보조 텍스트 */
  --line:#e9ebef;           /* 경계선 */
  --line-strong:#dde0e6;
  --brand:#0e1117;          /* 다크 잉크(히어로) */
  --brand-2:#1c2230;
  --accent:#4338ca;         /* 인디고 액센트 */
  --accent-soft:#eef0fe;
  --accent-ink:#3730a3;
  --green:#0f9b6c; --green-bg:#eafaf3; --green-line:#bfe9d6;
  --gold:#b8862b; --gold-bg:#fbf6ea; --gold-line:#ecdcb4;
  --red:#d1455b; --red-bg:#fdeef0;
  --blue:#2f6df0;
  --shadow-sm:0 1px 2px rgba(20,24,32,.04), 0 1px 3px rgba(20,24,32,.06);
  --shadow-md:0 4px 12px rgba(20,24,32,.06), 0 2px 4px rgba(20,24,32,.04);
  --shadow-lg:0 18px 40px -12px rgba(20,24,32,.22);
  --r-sm:9px; --r:13px; --r-lg:18px; --r-xl:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Pretendard","Pretendard Variable","Apple SD Gothic Neo",system-ui,"Malgun Gothic",sans-serif;
  color:var(--ink);
  line-height:1.6;
  letter-spacing:-0.011em;
  background:
    radial-gradient(1200px 600px at 50% -200px, var(--bg-grad-1), transparent 70%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:920px;margin:0 auto;padding:36px 20px 96px}
.row{display:flex;gap:8px;align-items:center}
.spread{justify-content:space-between}
.muted{color:var(--muted)}
.hide{display:none!important}
.grid{display:grid;gap:10px}

/* ---------------- 버튼 ---------------- */
.btn{
  border:1px solid var(--line-strong);
  background:#fff;border-radius:var(--r-sm);
  padding:9px 15px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  color:var(--ink-soft);
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:#fbfbfc;border-color:#cfd3da;box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(180deg,#4a40d6,var(--accent));
  color:#fff;border-color:transparent;
  box-shadow:0 6px 16px -6px rgba(67,56,202,.6);
}
.btn.primary:hover{filter:brightness(1.06);box-shadow:0 10px 22px -8px rgba(67,56,202,.65)}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:8px}
.btn.danger{color:var(--red);border-color:#f3cdd3;background:#fff}
.btn.danger:hover{background:var(--red-bg)}
.btn.green{color:var(--green);border-color:var(--green-line);background:var(--green-bg)}
.btn.yellow{color:var(--gold);border-color:var(--gold-line);background:var(--gold-bg)}

/* ---------------- 폼 ---------------- */
input,textarea,select{
  font:inherit;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:11px 13px;width:100%;background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder,textarea::placeholder{color:#b6bbc4}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
textarea{resize:vertical;min-height:128px;line-height:1.7}
label{font-size:12.5px;font-weight:600;color:var(--muted);display:block;margin:0 0 6px;letter-spacing:.01em}
.field{margin-bottom:14px}

/* ---------------- 카드 / 히어로 ---------------- */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;margin-bottom:16px;
  box-shadow:var(--shadow-sm);
}
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(600px 300px at 88% -40%, rgba(99,102,241,.30), transparent 60%),
    radial-gradient(500px 260px at 0% 120%, rgba(56,189,248,.14), transparent 55%),
    linear-gradient(160deg,var(--brand),var(--brand-2));
  color:#fff;border-radius:var(--r-xl);padding:34px 34px;margin-bottom:26px;
  box-shadow:var(--shadow-lg);
}
.hero::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,.08);pointer-events:none;
}
.hero .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hero h1{margin:10px 0 16px;font-size:30px;font-weight:800;letter-spacing:-0.02em;line-height:1.18}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.92);backdrop-filter:blur(6px);
}
a.chip:hover{background:rgba(255,255,255,.2);text-decoration:none}

/* ---------------- 리스트 ---------------- */
.list-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;cursor:pointer;margin-bottom:10px;box-shadow:var(--shadow-sm);
  transition:border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.list-item:hover{border-color:#cdd0f3;box-shadow:var(--shadow-md);transform:translateY(-1px)}
.list-item b{font-weight:700}
.badge{
  display:inline-block;font-size:12px;font-weight:600;color:var(--ink-soft);
  background:#f1f2f5;border:1px solid var(--line);border-radius:7px;padding:2px 9px;margin-left:2px;
}
.badge-done{color:var(--green);background:var(--green-bg);border-color:var(--green-line)}
.badge-memo{color:var(--gold);background:var(--gold-bg);border-color:var(--gold-line)}
/* 진행률 바 */
.pbar{height:6px;border-radius:99px;background:#eceef2;margin-top:8px;overflow:hidden;max-width:320px}
.pbar > span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#1bb47f,var(--green));transition:width .3s}
/* 수정요청 달린 대본 박스 강조 */
.script.has-memo{border-left:4px solid var(--gold)}

/* ---------------- 대본 박스 ---------------- */
.script{
  border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:13px;
  overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.script:hover{box-shadow:var(--shadow-md)}
.script.done{border-color:var(--green-line);background:linear-gradient(0deg,var(--green-bg),#fff 60%)}
.script-head{display:flex;align-items:center;gap:13px;padding:16px 18px}
.num{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(180deg,#caa84e,var(--gold));color:#fff;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px -3px rgba(184,134,43,.6);
}
.script.done .num{background:linear-gradient(180deg,#1bb47f,var(--green));box-shadow:0 3px 8px -3px rgba(15,155,108,.6)}
.script-title{font-weight:700;font-size:16px;flex:1;letter-spacing:-0.01em}
.script-body{padding:18px;border-top:1px solid var(--line)}
.example{
  background:var(--accent-soft);border:1px solid #dfe2fc;border-radius:var(--r);
  padding:13px 15px;margin-bottom:14px;font-size:14px;word-break:break-all;
}
.example b{color:var(--accent-ink);display:block;margin-bottom:4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.lines{white-space:pre-wrap;font-size:15px;line-height:1.75;color:var(--ink-soft)}
.memo-box{background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:var(--r);padding:14px;margin-top:12px}
.memo-box .row{justify-content:space-between}
.memo-box label{color:var(--gold);font-weight:700;margin:0;text-transform:none;font-size:13px}

/* ---------------- 캘린더 ---------------- */
.cal-wrap{display:flex;gap:22px;flex-wrap:wrap}
.cal{flex:1;min-width:248px}
.cal h4{margin:0 0 10px;font-size:15px;font-weight:700}
.cal table{width:100%;border-collapse:collapse;text-align:center}
.cal th{color:var(--muted);font-weight:600;font-size:12px;padding:5px 0}
.cal td{padding:3px}
.cal .day{
  width:36px;height:36px;line-height:36px;border-radius:10px;cursor:pointer;display:inline-block;
  font-size:13px;font-weight:600;color:var(--ink-soft);transition:background .12s ease, transform .08s ease;
}
.cal .day:hover{background:#f0f1f4}
.cal .day:active{transform:scale(.92)}
.cal .day.on{
  background:linear-gradient(180deg,#fbf2d8,var(--gold-bg));
  border:2px solid var(--gold);color:var(--gold);font-weight:800;line-height:32px;
}
.cal .day.sun{color:var(--red)} .cal .day.sat{color:var(--blue)}
.cal .day.empty{cursor:default}

/* ---------------- 토스트 / 모달 ---------------- */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(8px);
  background:rgba(14,17,23,.96);color:#fff;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:600;
  opacity:0;transition:opacity .22s ease, transform .22s ease;pointer-events:none;z-index:50;
  box-shadow:var(--shadow-lg);backdrop-filter:blur(8px);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal-bg{
  position:fixed;inset:0;background:rgba(14,17,23,.46);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:40;
  animation:fade .18s ease;
}
.modal{
  background:#fff;border-radius:var(--r-xl);padding:26px;width:min(460px,92vw);
  box-shadow:var(--shadow-lg);animation:pop .2s cubic-bezier(.2,.8,.25,1);
}
.modal h3{margin:0 0 16px;font-size:19px;font-weight:800;letter-spacing:-0.01em}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

.center-box{max-width:392px;margin:9vh auto}
/* 비밀번호 마스킹: type=password 대신 CSS로 가려 보안키보드 후킹을 회피 */
.pw-mask{-webkit-text-security:disc;text-security:disc}

@media (max-width:560px){
  .wrap{padding:22px 14px 80px}
  .hero{padding:26px 22px;border-radius:var(--r-lg)}
  .hero h1{font-size:25px}
  .card{padding:18px}
}