:root{
  --bg:#fff; --fg:#111; --muted:rgba(0,0,0,.6); --line:rgba(0,0,0,.14);
  --card:#f7f7f9; --tap:52px;
  --logo-size:36px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",Inter,system-ui,sans-serif;
  display:flex; min-height:100svh;
}
.logo-img{height:var(--logo-size); width:auto; object-fit:contain;}

/* ?덉씠?꾩썐 */
.wrap{
  margin:auto; width:min(560px,94%);
  padding:28px 18px 34px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* ?ㅻ뜑 濡쒓퀬 */
.brand{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.brand .dot{flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:#fff; opacity:.85}
.brand h1{margin:0; font-size:22px; letter-spacing:.4px}

/* 移대뱶 ?€?댄?/?ㅻ챸 */
h2{margin:6px 0 8px; font-size:28px; letter-spacing:.2px}
.sub{margin:0 0 18px; color:var(--muted); font-size:13px}

/* ??*/
form{display:flex; flex-direction:column; gap:14px}
.field{display:flex; flex-direction:column; gap:8px}
label{font-size:12px; color:var(--muted)}
input{
  width:100%; background:#fff; color:var(--fg);
  border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; font-size:15px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder{color:rgba(0,0,0,.35)}
input:focus{border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.hint{color:var(--muted); font-size:12px}

/* 踰꾪듉 */
.row{display:flex; gap:10px; justify-content:space-between; margin-top:6px}
.btn{
  height:var(--tap); padding:0 18px; border-radius:14px; cursor:pointer;
  border:1px solid var(--line); background:#111; color:#fff; font-weight:700; letter-spacing:.2px;
}
.btn.ghost{background:transparent; color:#111; border-color:#111}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid #111; outline-offset:2px}

/* ?먮윭 */
.err{min-height:16px; color:#d00; font-size:12px}

/* 留곹겕 蹂댁“ */
.nav{margin-top:16px; text-align:center; color:var(--muted); font-size:13px}
a{color:#111; text-underline-offset:3px}

/* ?ㅻ뜑 諛?濡쒓퀬 + ??7媛??쇱씤) */
.header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.weekdots{display:flex; gap:10px; align-items:center}
.weekdots .w{width:6px; height:6px; border-radius:50%; background:#fff; opacity:.85}

/* 紐⑤컮????醫곸쓣 ??*/
@media (max-width:380px){
  .wrap{padding:24px 14px 30px}
  h2{font-size:24px}
}
/* ===== Bottom Nav (black & white minimal) ===== */
:root{ --nav-h: 64px; }

body { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }

.navbar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
}

.navbtn{
  display: grid; place-items: center; gap: 4px;
  color: var(--muted); text-decoration: none; padding: 8px 0;
  font-size: 12px; cursor: pointer; user-select: none;
}
.navbtn strong{ font-size: 14px; color: var(--fg); }

.navbtn.active{ color: #111; font-weight: 600; }
.navbtn.active strong{ text-decoration: underline; text-underline-offset: 3px; }

.navbtn:active{ transform: translateY(1px); }