/* 로그인 · 회원가입 · 비밀번호 찾기/재설정 · 사용법 영상 화면 — 새 디자인(r2). 값은 r2.css 의 변수.
   틀: templates/r2/login.html · signup.html · forgot_password.html · reset_password.html · guide.html */

/* 세로 가운데 맞춤을 쓰지 않는다: 화면이 조금씩 도착하며 그려질 때 카드가 위아래로 움직인다(화면 밀림). 위 여백으로 자리를 잡는다. */
.au { padding-block: clamp(28px, 9vh, 104px) clamp(56px, 8vw, 112px); }
.au-center { display: grid; justify-items: center; }
.au-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: center; gap: clamp(40px, 8vw, 120px); max-width: 1128px; }
.au-side-title { margin-top: 22px; font-size: clamp(30px, 3.7vw, 50px); font-weight: 700; line-height: 1.16; letter-spacing: -0.036em; }
.au-side-title em { color: var(--accent); }
/* 로그인 옆 한마디 아래: 안에서 볼 수 있는 것 세 줄(가는 줄로만 나눈다) + 소개로 가는 동그란 화살표 */
.au-points { display: grid; max-width: 456px; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.au-points li { display: grid; grid-template-columns: 42px 108px minmax(0, 1fr); align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.au-points i { color: var(--ink-3); font-size: 13px; font-style: normal; font-weight: 600; letter-spacing: 0.06em; }
.au-points b { color: var(--ink); font-weight: 600; letter-spacing: -0.012em; }
.au-points span { color: var(--ink-3); }
.au-more { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 22px; color: var(--ink-2); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; transition: color var(--t-1) var(--ease); }
.au-more-ic { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; transition: transform var(--t-2) var(--ease-em), background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease); }
.au-more-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.au-more:hover { color: var(--ink); }
.au-more:hover .au-more-ic { transform: translateX(4px); border-color: var(--ink); background: var(--ink); color: var(--bg); }
.au-more:active .au-more-ic { transform: translateX(4px) scale(0.94); }
.au-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-1); }
@media (prefers-reduced-motion: reduce) { .au-more-ic { transition: none; } .au-more:hover .au-more-ic, .au-more:active .au-more-ic { transform: none; } }

.au-card { width: 100%; max-width: 420px; padding: clamp(24px, 4vw, 36px); }
.au-card.is-wide { max-width: 580px; }
.au-title { font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -0.032em; }
.au-sub { margin-top: 8px; color: var(--ink-3); font-size: 16px; line-height: 1.6; }
.au-form { display: grid; gap: 18px; margin-top: 28px; }
.au-form .r2-btn, .au-card > .r2-btn { min-height: 52px; margin-top: 6px; }
.au-card > .r2-btn { margin-top: 28px; }
.au-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-top: 14px; color: var(--ink-3); font-size: 15px; }
.au-links.is-center { justify-content: center; }
.au-links span { display: inline-flex; align-items: center; gap: 6px; }
.au-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: text-decoration-color var(--t-1) var(--ease); }
.au-links a:hover { text-decoration-color: currentColor; }
.au-note { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-2); color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.au-note.is-ok { border-color: color-mix(in srgb, var(--accent) 28%, transparent); background: var(--accent-soft); color: var(--ink); }

/* 카드 안의 '사용법 영상' 한 줄(_guide_video.html — 모양의 바탕은 guide.css) */
.au-card .guide-video { margin: 20px 0 0; border-radius: var(--r-2); background: var(--surface-2); font-size: 16px; transition: border-color var(--t-1) var(--ease), background-color 200ms linear; }
.au-card .guide-video:not(.is-open):hover { border-color: var(--line-strong); }
.au-card .guide-video-summary { min-height: 52px; padding: 10px 16px; font-weight: 600; }
.au-card .guide-video-summary:focus-visible { border-radius: var(--r-2); }
.au-card .guide-video-badge { color: var(--accent-ink); font-size: 14px; font-weight: 600; }
.au-card .guide-video-len, .au-card .guide-video-summary::after { font-size: 14px; }
.au-card .guide-video-body { padding: 0 12px; }
.au-card .guide-video-more a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── 회원가입: 세 단계 ── */
.su-prog { display: none; margin-top: 24px; }
.su-prog ol { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; color: var(--ink-3); font-size: 14px; font-weight: 600; line-height: 1; }
.su-prog li { display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: color var(--t-2) var(--ease); }
.su-prog li span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 50%; transition: background-color var(--t-2) var(--ease), border-color var(--t-2) var(--ease), color var(--t-2) var(--ease); }
.su-prog li.is-on { color: var(--ink); }
.su-prog li.is-on span { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.su-prog li.is-done { color: var(--ink-2); }
.su-prog li.is-done span { border-color: var(--accent); color: var(--accent-ink); }
.su-prog-bar { display: block; height: 2px; margin-top: 14px; background: var(--line); overflow: hidden; }
.su-prog-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--p, 0.3334)); transform-origin: left; transition: transform var(--t-2) var(--ease); }
.su-form { margin-top: 24px; }
.su-step { display: grid; gap: 18px; min-width: 0; margin: 0; padding: 0; border: 0; }
.su-step + .su-step { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.su-step legend { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 0; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.su-step legend span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; }
.su-two { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 14px; }
.su-nav { display: flex; gap: 10px; margin-top: 28px; }
.su-nav .r2-btn { min-height: 52px; }
.su-next, .su-submit { flex: 1 1 auto; }
.su-next { display: none; }
/* 스크립트를 쓰는 브라우저에서는 한 번에 한 단계만 보인다. 첫 그림부터 이 모양이라 화면이 밀리지 않는다.
   (.r2-js 는 머리의 한 줄이 붙이고, signup.js 를 못 받으면 .su-plain 이 붙어 세 묶음이 다 보이는 모양으로 돌아간다.) */
.r2-js:not(.su-plain) .su-prog { display: block; }
.r2-js:not(.su-plain) .su-step { display: none; margin-top: 0; padding-top: 0; border-top: 0; }
.r2-js:not(.su-plain) .su-step.is-on { display: grid; }
.r2-js:not(.su-plain) .su-step legend { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.r2-js:not(.su-plain) .su-next { display: inline-flex; }
.r2-js:not(.su-plain) .su-form:not(.is-last) .su-submit, .r2-js:not(.su-plain) .su-form.is-last .su-next { display: none; }
.su-plain .su-nav [data-su-back] { display: none; }
@keyframes su-in-next { from { opacity: 0; transform: translateX(24px); } }
@keyframes su-in-back { from { opacity: 0; transform: translateX(-24px); } }
@keyframes su-out-next { to { opacity: 0; transform: translateX(-16px); } }
@keyframes su-out-back { to { opacity: 0; transform: translateX(16px); } }
.su-step.is-in-next { animation: su-in-next var(--t-2) var(--ease) both; }
.su-step.is-in-back { animation: su-in-back var(--t-2) var(--ease) both; }
.su-step.is-out-next { animation: su-out-next var(--t-1) var(--ease) both; }
.su-step.is-out-back { animation: su-out-back var(--t-1) var(--ease) both; }

/* ── 사용법 영상 화면(본문은 guide-page.css) ── */
.r2-pad { padding: clamp(28px, 4vw, 56px) 40px clamp(64px, 8vw, 112px); }
.r2-guide .gp-head h1 { font-weight: 700; letter-spacing: -0.035em; }
.r2-guide .gp .gp-now-title { font-weight: 700; }
.r2-guide .gp-stage { border-radius: var(--r-3); }
.r2-guide .gp-cover-play { background: #2e6bf0; box-shadow: none; }
.r2-guide .gp-cover-title { font-weight: 700; }
.r2-guide .gp-item { border-radius: var(--r-1); font-weight: 500; }
.r2-guide .gp-item.is-current { color: var(--ink); font-weight: 600; }
.r2-guide .gp-item.is-current .gp-item-length { color: var(--ink-2); }
.r2-guide .gp-item:not(.is-current):hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.r2-guide .gp-item:active { transform: scale(0.985); }
.r2-guide .gp-item { transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease), transform var(--t-1) var(--ease); }
.r2-guide .gp-error { border-radius: var(--r-2); }

@media (max-width: 860px) {
  .au-split { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 40px; }
  .au-split .au-card { order: -1; }
  .au-side { width: 100%; max-width: 420px; }
  .au-points li { grid-template-columns: 36px 96px minmax(0, 1fr); font-size: 15.5px; }
}
@media (max-width: 760px) {
  .r2-pad { padding-inline: 20px; }
}
@media (max-width: 520px) {
  .su-two { grid-template-columns: minmax(0, 1fr); }
  .su-prog ol { font-size: 14px; letter-spacing: -0.03em; }
  .su-prog li { gap: 6px; }
}
@media (max-width: 359px) {
  .su-prog li span { display: none; }   /* 아주 좁은 화면: 번호 동그라미를 빼고 이름만 */
}
/* 글자 크기 2차(10/13 04시) */