/* ───────────────────────────────────────────────────────────
   Flick 웹 — 공통 스타일 (login·account·settings·support·terms·privacy 공유)
   노션 블랙앤화이트. 기존 flick-home/flick-download의 인라인 CSS와 토큰 동일.
   ─────────────────────────────────────────────────────────── */
:root{
  --paper:#ffffff; --surface:#f7f6f3; --surface-soft:#fafaf9;
  --hairline:#e9e7e2; --hairline-strong:#d6d3cc;
  --ink-deep:#000000; --ink:#191917; --charcoal:#37352f;
  --slate:#5e5c55; --steel:#8b8880; --stone:#a4a097; --muted:#bbb8b1;
  --btn:#1a1a1a; --btn-hover:#000000;
  --ok:#1aae39; --danger:#d83a3a;
  --sh-card:rgba(15,15,15,.06) 0 4px 14px 0;
  --sh-pop:rgba(15,15,15,.16) 0 18px 44px -14px;
  --maxw:1080px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Pretendard",-apple-system,system-ui,sans-serif;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%;}
.narrow{max-width:560px;}

/* ── nav ───────────────────────────────────────────── */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--hairline);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;}
.logo{font-size:18px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;color:var(--ink);}
.logo .mark{width:20px;height:20px;border-radius:5px;background:url("favicon.svg") center/contain no-repeat;}
.logo .ga{font-size:11px;font-weight:500;color:var(--stone);}
.nav nav{display:flex;align-items:center;gap:24px;}
.nav nav a{font-size:14px;font-weight:500;color:var(--slate);transition:color .15s;}
.nav nav a:hover{color:var(--ink);}
.nav .navcta{font-size:14px;font-weight:600;color:#fff;background:var(--btn);
  padding:9px 16px;border-radius:8px;transition:background .15s,transform .12s;}
.nav .navcta:hover{background:#000;transform:translateY(-1px);}
.nav .avatar{width:30px;height:30px;border-radius:50%;background:var(--surface);
  border:1px solid var(--hairline-strong);object-fit:cover;display:block;}
@media(max-width:640px){.nav nav .lnk{display:none;}}

/* ── buttons ───────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;
  font-size:15px;font-weight:600;cursor:pointer;border:none;border-radius:10px;padding:0 22px;height:52px;
  white-space:nowrap;transition:background .15s,transform .12s,border-color .15s,opacity .15s;}
.btn-dark{background:var(--btn);color:#fff;}
.btn-dark:hover{background:#000;transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--hairline-strong);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger);}
.btn-danger:hover{background:var(--danger);color:#fff;}
.btn-sm{height:42px;font-size:14px;border-radius:9px;padding:0 16px;}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none;}
.btn .ic{width:18px;height:18px;}

/* ── page shells ───────────────────────────────────── */
.page{min-height:calc(100vh - 62px);padding:64px 0 96px;}
.page-head{margin-bottom:36px;}
.page-head .eyebrow{font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--steel);}
.page-head h1{margin-top:10px;font-size:clamp(26px,4vw,36px);font-weight:700;letter-spacing:-.03em;color:var(--ink-deep);}
.page-head p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--slate);}

/* ── cards / rows ──────────────────────────────────── */
.card{background:var(--paper);border:1px solid var(--hairline);border-radius:16px;padding:28px;box-shadow:var(--sh-card);}
.card + .card{margin-top:18px;}
.card-title{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--steel);margin-bottom:18px;}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--hairline);}
.row:first-of-type{border-top:none;}
.row .k{font-size:14px;color:var(--steel);}
.row .v{font-size:15px;color:var(--ink);font-weight:500;text-align:right;word-break:break-all;}
.row .v.muted{color:var(--stone);font-weight:400;}

/* badges */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:5px 11px;border-radius:999px;}
.tag-ink{background:var(--ink-deep);color:#fff;}
.tag-soft{background:var(--surface);color:var(--slate);border:1px solid var(--hairline);}
.tag-ok{background:rgba(26,174,57,.1);color:#138a2c;}

/* plan card (account) */
.plan{background:var(--ink-deep);color:#fff;border-radius:16px;padding:28px;}
.plan .pt{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.plan .pn{margin-top:10px;font-size:26px;font-weight:700;letter-spacing:-.02em;}
.plan .pd{margin-top:8px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);}
.plan .pf{margin-top:18px;font-size:12.5px;color:rgba(255,255,255,.5);}

/* profile block */
.profile{display:flex;align-items:center;gap:16px;}
.profile .pic{width:60px;height:60px;border-radius:50%;background:var(--surface);
  border:1px solid var(--hairline-strong);object-fit:cover;flex-shrink:0;}
.profile .nm{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink-deep);}
.profile .em{margin-top:3px;font-size:14px;color:var(--stone);}

/* quick links grid */
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.qlink{display:block;background:var(--paper);border:1px solid var(--hairline);border-radius:13px;padding:20px;
  transition:box-shadow .18s,transform .18s,border-color .18s;}
.qlink:hover{box-shadow:var(--sh-card);transform:translateY(-2px);}
.qlink .qi{font-size:20px;}
.qlink h3{margin-top:10px;font-size:15.5px;font-weight:700;color:var(--ink);}
.qlink p{margin-top:4px;font-size:13px;color:var(--stone);line-height:1.5;}
@media(max-width:640px){.qgrid{grid-template-columns:1fr;}}

/* danger zone */
.danger-zone{border-color:rgba(216,58,58,.3);}
.danger-zone .card-title{color:var(--danger);}

/* ── notice / loading / empty ──────────────────────── */
.notice{font-size:14px;color:var(--slate);background:var(--surface);border:1px solid var(--hairline);
  border-radius:10px;padding:13px 16px;line-height:1.6;}
.notice.err{color:var(--danger);background:rgba(216,58,58,.06);border-color:rgba(216,58,58,.25);}
.center-state{min-height:50vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:var(--stone);}
.spinner{width:26px;height:26px;border:3px solid var(--hairline-strong);border-top-color:var(--ink);
  border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── modal ─────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:rgba(20,20,20,.5);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal-bg.show{display:flex;}
.modal{background:var(--paper);border-radius:18px;max-width:420px;width:100%;padding:30px;box-shadow:var(--sh-pop);}
.modal h3{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink-deep);}
.modal p{margin-top:12px;font-size:14.5px;line-height:1.65;color:var(--slate);}
.modal p b{color:var(--ink);font-weight:600;}
.modal .acts{margin-top:24px;display:flex;gap:10px;}
.modal .acts .btn{flex:1;}

/* ── legal (terms / privacy) ───────────────────────── */
.legal{max-width:720px;}
.legal h2{margin-top:34px;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink-deep);}
.legal h2:first-of-type{margin-top:0;}
.legal p,.legal li{font-size:14.5px;line-height:1.75;color:var(--slate);margin-top:10px;}
.legal ul{margin-top:10px;padding-left:20px;}
.legal li{margin-top:6px;}
.legal .meta{font-size:13px;color:var(--stone);margin-bottom:8px;}
.legal .todo{background:rgba(216,58,58,.06);border:1px solid rgba(216,58,58,.25);border-radius:8px;
  padding:3px 8px;font-size:12.5px;color:var(--danger);font-weight:600;}

/* ── faq ───────────────────────────────────────────── */
.faq{max-width:720px;}
details{border-bottom:1px solid var(--hairline);}
details summary{list-style:none;cursor:pointer;padding:20px 4px;font-size:16px;font-weight:600;
  color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px;}
details summary::-webkit-details-marker{display:none;}
details summary .x{flex-shrink:0;width:18px;height:18px;position:relative;transition:transform .2s;}
details summary .x::before,details summary .x::after{content:"";position:absolute;background:var(--steel);border-radius:2px;}
details summary .x::before{top:8px;left:1px;right:1px;height:2px;}
details summary .x::after{left:8px;top:1px;bottom:1px;width:2px;transition:opacity .2s;}
details[open] summary .x::after{opacity:0;}
details .a{padding:0 4px 22px;font-size:14.5px;line-height:1.7;color:var(--slate);}
details .a b{color:var(--ink);font-weight:600;}
details .a a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

/* ── footer ────────────────────────────────────────── */
footer.ft{border-top:1px solid var(--hairline);padding:36px 0;}
footer.ft .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;}
footer.ft .links{display:flex;gap:18px;flex-wrap:wrap;}
footer.ft .links a{font-size:13px;color:var(--steel);transition:color .15s;}
footer.ft .links a:hover{color:var(--ink);}
footer.ft .copy{font-size:13px;color:var(--stone);}

/* ── auth (login) ──────────────────────────────────── */
.auth{min-height:calc(100vh - 62px);display:flex;align-items:center;justify-content:center;padding:48px 20px;}
.auth-card{width:100%;max-width:380px;text-align:center;}
.auth-card .bigmark{width:48px;height:48px;border-radius:13px;margin:0 auto 22px;
  background:url("favicon.svg") center/contain no-repeat;}
.auth-card h1{font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--ink-deep);}
.auth-card .sub{margin-top:10px;font-size:15px;line-height:1.6;color:var(--slate);}
.auth-btns{margin-top:30px;display:flex;flex-direction:column;gap:11px;}
.sbtn{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:11px;
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:filter .15s,transform .12s,box-shadow .15s;width:100%;}
.sbtn:hover{transform:translateY(-1px);}
.sbtn .gi{width:19px;height:19px;}
.sbtn-kakao{background:#FEE500;color:#191600;}
.sbtn-kakao:hover{filter:brightness(.97);}
.sbtn-google{background:#fff;color:#1f1f1f;border-color:var(--hairline-strong);box-shadow:0 1px 2px rgba(0,0,0,.04);}
.sbtn-google:hover{box-shadow:0 2px 8px rgba(0,0,0,.08);}
.auth-fine{margin-top:22px;font-size:12.5px;line-height:1.6;color:var(--stone);}
.auth-fine a{color:var(--slate);text-decoration:underline;text-underline-offset:2px;}
.auth-back{margin-top:26px;font-size:13.5px;color:var(--stone);}
.auth-back a{color:var(--slate);}

/* ── reveal ────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}}

@media(max-width:560px){
  .wrap{padding:0 18px;}
  .page{padding:44px 0 72px;}
  .card{padding:22px;}
  .row{flex-direction:column;align-items:flex-start;gap:4px;}
  .row .v{text-align:left;}
}