/* 로그인 버튼·대화상자, 그리고 로그인 뒤 드러나는 세 축 카드.
   토큰(--ink, --mint …)은 styles.css 가 정의한다 — 이 파일은 쓰기만 한다. */

/* ── 내비게이션의 로그인 영역 ─────────────────────────────────────────── */
.nav-auth{
  display:flex; align-items:center; gap:10px; margin-left:20px;
}
.nav-who{
  font-size:13px; color:var(--ink-dim); white-space:nowrap;
}
.nav-btn{
  font-family:inherit; font-size:13px; font-weight:600;
  padding:8px 16px; cursor:pointer;
  background:transparent; color:var(--ink);
  border:1px solid var(--line-strong);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.nav-btn:hover:not(:disabled){ border-color:var(--ink-dim); }
.nav-btn.primary{ background:var(--mint); color:var(--on-mint); border-color:var(--mint); }
.nav-btn.primary:hover{ background:var(--mint-hover); }
.nav-btn:disabled{ opacity:.38; cursor:not-allowed; }
.nav-btn:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }

@media (max-width:640px){
  .nav-auth{ margin-left:auto; gap:6px; }
  .nav-btn{ padding:7px 12px; font-size:12px; }
  .nav-who{ display:none; }
}

/* ── 로그인 대화상자 ──────────────────────────────────────────────────── */
/* 화면 정가운데, 화면 크기에 맞춰. styles.css 의 전역 리셋(*{margin:0})이 <dialog> 의 기본
   가운데 정렬(margin:auto)을 지우므로 여기서 되살린다. showModal 이 없는 브라우저에서
   [open] 으로만 열려도 같은 자리에 서게 fixed + inset 으로 둔다. */
.login-dialog{
  position:fixed; inset:0; margin:auto;
  width:min(clamp(320px, 34vw, 460px), calc(100vw - 32px));
  height:fit-content;
  max-height:calc(100dvh - 32px); overflow-y:auto;
  padding:0; border:1px solid var(--line-strong); border-radius:12px;
  background:var(--bg-raised); color:var(--ink);
  box-shadow:0 18px 48px rgba(0,0,0,.35);
}
.login-dialog:not([open]){ display:none; }
.login-dialog::backdrop{ background:rgba(var(--bg-rgb),0.78); }
.login-body{ padding:clamp(22px, 3vw, 36px); }
.login-body h2{
  font-family:var(--serif); font-size:clamp(19px, 1.7vw, 23px); font-weight:500; margin-bottom:6px;
}
.login-lead{ font-size:13.5px; color:var(--ink-faint); margin-bottom:24px; }

.login-field{ display:block; margin-bottom:16px; }
.login-field span{
  display:block; font-size:12px; color:var(--ink-dim);
  letter-spacing:0.04em; margin-bottom:7px;
}
.login-field input{
  width:100%; padding:11px 13px;
  font-family:inherit; font-size:14.5px;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line-strong);
}
.login-field input:focus{ outline:none; border-color:var(--mint-dim); }

.login-error{
  font-size:13px; color:#e08a76; margin-bottom:16px;
  padding:10px 12px; border:1px solid rgba(224,138,118,0.3);
}
.login-actions{ display:flex; gap:10px; margin-top:22px; }
.login-actions .nav-btn{ flex:1; padding:12px 16px; font-size:14px; }

.login-note{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-faint); line-height:1.65;
}

/* ── 로그인 뒤 드러나는 세 축 ─────────────────────────────────────────── */
#workspace[hidden]{ display:none; }
.workspace-head{ margin-bottom:34px; }
.workspace-head .section-kicker{ color:var(--mint); }
/* 절 머리글은 대문자로 쓰지만 아이디까지 대문자로 외칠 이유는 없다 */
#workspace-who{ text-transform:none; }

.workspace-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
}
.app-card{
  display:block; padding:26px 24px 22px;
  background:var(--bg-raised); border:1px solid var(--line);
  transition:border-color .2s ease, transform .2s ease;
}
.app-card:hover{ border-color:var(--mint-dim); transform:translateY(-2px); }
.app-card:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }

.app-card-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.app-card h3{
  font-family:var(--serif); font-size:19px; font-weight:500;
}
.app-card h3 .kr{ font-size:13px; color:var(--ink-faint); font-weight:400; }
.app-card-go{ color:var(--mint); font-size:17px; }
/* 세 축이 아닌 카드(m-emo) — 주황 테로 나눈다 */
.app-card.memo{ border-color:var(--warm-dim); }
.app-card.memo .tag{ color:var(--warm); }
.nav-auth a.nav-btn{ display:inline-block; text-decoration:none; }

.app-card .tag{
  margin-top:8px; font-size:12.5px; color:var(--mint);
  letter-spacing:0.03em;
}
.app-card-desc{
  margin-top:12px; font-size:13.5px; color:var(--ink-dim); line-height:1.7;
}
.app-card-path{
  margin-top:16px; padding-top:13px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-faint);
  font-family:ui-monospace, 'SFMono-Regular', Menlo, monospace;
  word-break:break-all;
}