/* web/assets/css/auth.css — SC14 참여 화면 공통 스타일(로그인·마이페이지·재직 인증·복지 편집·편집 이력).
   디자인 토큰(styles.css) 재사용, 중앙 카드 패턴. login/mypage/verify/edit/edits.html이 공유(DRY). */

/* 한글 문장이 단어 중간에서 줄바꿈되지 않게(어절/공백 단위로만 끊음). word-break는 상속되어
   .auth-card 하위 문장(lede·hint·안내)에 모두 적용되고, 푸터 disclaimer도 포함한다. */
.auth-card, .disclaimer { word-break: keep-all; }

.auth-main { max-width:480px; margin:0 auto; padding:var(--sp-7) var(--gutter-mobile) var(--sp-8); }
.auth-card { background:var(--bg-1); border:var(--bw) solid var(--border); border-radius:var(--r-lg);
             padding:var(--sp-6) var(--sp-5); box-shadow:var(--shadow-1); }
.auth-card + .auth-card { margin-top:var(--sp-4); }
.auth-card h1 { font-family:var(--font-serif); font-size:var(--fs-h2); line-height:var(--lh-tight);
                letter-spacing:var(--ls-tight); margin:0 0 var(--sp-3); color:var(--t1); }
.auth-card h2 { font-size:var(--fs-lg); margin:0 0 var(--sp-4); color:var(--t1); }
.auth-lede { color:var(--t3); font-size:var(--fs-sm); line-height:var(--lh-base); margin:0 0 var(--sp-5); }
.auth-lede strong { color:var(--brand); font-weight:var(--fw-semibold); }

.auth-card label { display:block; font-size:var(--fs-xs); font-weight:var(--fw-medium);
                   color:var(--t2); margin:var(--sp-4) 0 var(--sp-1); }
.auth-card input { width:100%; padding:11px 12px; font-size:var(--fs-base);
                   border:var(--bw) solid var(--border-strong); border-radius:var(--r-sm);
                   background:var(--bg-1); color:var(--t1); font-family:var(--font-sans); }
.auth-card input:focus-visible { outline:var(--focus-width) solid var(--focus);
                   outline-offset:var(--focus-offset); border-color:var(--brand); }
#code { letter-spacing:.4em; text-align:center; font-size:var(--fs-h3); font-variant-numeric:tabular-nums; }
.auth-hint { font-size:var(--fs-xs); color:var(--t4); margin:var(--sp-2) 0 0; }
.auth-timer { font-size:var(--fs-xs); color:var(--t3); margin:var(--sp-2) 0 0; font-variant-numeric:tabular-nums; }
.auth-timer.expired { color:var(--red); font-weight:var(--fw-medium); }

.auth-btn { display:block; width:100%; margin-top:var(--sp-5); padding:12px 16px; border:0;
            border-radius:var(--r-sm); background:var(--brand); color:var(--on-brand);
            font-size:var(--fs-base); font-weight:var(--fw-semibold); cursor:pointer;
            text-align:center; text-decoration:none; transition:background var(--dur-fast) var(--ease-out); }
.auth-btn:hover { background:var(--brand-active); }
.auth-btn:disabled { opacity:.55; cursor:progress; }
.auth-btn--ghost { background:var(--bg-2); color:var(--t2); }
.auth-btn--ghost:hover { background:var(--bg-3); }
.auth-btn--danger { background:var(--bg-1); color:var(--red); border:var(--bw) solid var(--border-strong); }
.auth-btn--danger:hover { background:var(--red-dim); }

.auth-links { display:flex; gap:var(--sp-4); justify-content:center; margin-top:var(--sp-4); flex-wrap:wrap; }
.auth-link { background:none; border:0; color:var(--link); font-size:var(--fs-sm);
             cursor:pointer; padding:var(--sp-1); text-decoration:underline; font-family:inherit; }
.auth-link:disabled { color:var(--t4); cursor:default; text-decoration:none; }

.auth-sent { background:var(--brand-tint); border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4);
             font-size:var(--fs-sm); color:var(--t2); margin:0 0 var(--sp-2); }
.auth-sent strong { color:var(--brand); }
.auth-error { background:var(--red-dim); color:var(--red); border-radius:var(--r-sm);
              padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); margin:var(--sp-4) 0 0; }
.auth-ok { background:var(--green-dim); color:var(--green); border-radius:var(--r-sm);
           padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); margin:var(--sp-4) 0 0; }
.auth-welcome { font-family:var(--font-serif); font-size:var(--fs-h3); margin:0 0 var(--sp-2); color:var(--t1); }
.auth-welcome strong { color:var(--brand); }
.auth-done-sub { color:var(--t3); font-size:var(--fs-sm); line-height:var(--lh-base); margin:0 0 var(--sp-4); }

/* ── 마이페이지 ── */
.profile-row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
               padding:var(--sp-3) 0; border-bottom:var(--bw) solid var(--border); }
.profile-row:last-of-type { border-bottom:0; }
.profile-row .k { font-size:var(--fs-xs); color:var(--t3); }
.profile-row .v { font-size:var(--fs-base); color:var(--t1); font-weight:var(--fw-medium); }
.nick-display { display:flex; align-items:center; gap:var(--sp-3); }
.badge-status { font-size:var(--fs-xs); padding:2px 8px; border-radius:var(--r-pill);
                background:var(--green-dim); color:var(--green); }

.vrf-list { list-style:none; margin:0; padding:0; }
.vrf-list li { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
               padding:var(--sp-3) 0; border-bottom:var(--bw) solid var(--border); }
.vrf-list li:last-child { border-bottom:0; }
.vrf-comp { font-weight:var(--fw-medium); color:var(--t1); }
.vrf-exp { font-size:var(--fs-xs); color:var(--t3); }
.vrf-empty { color:var(--t3); font-size:var(--fs-sm); margin:var(--sp-2) 0 0; }
.vrf-empty a { color:var(--link); }

/* ── 재직 인증(회사 검색·증빙) ── */
.auth-card textarea { width:100%; padding:11px 12px; font-size:var(--fs-sm); font-family:var(--font-sans);
                      border:var(--bw) solid var(--border-strong); border-radius:var(--r-sm);
                      background:var(--bg-1); color:var(--t1); resize:vertical; min-height:76px; }
.auth-card textarea:focus-visible { outline:var(--focus-width) solid var(--focus);
                      outline-offset:var(--focus-offset); border-color:var(--brand); }
.comp-results { list-style:none; margin:var(--sp-1) 0 0; padding:0; border:var(--bw) solid var(--border);
                border-radius:var(--r-sm); overflow:hidden; max-height:240px; overflow-y:auto; }
.comp-results li { padding:10px 12px; cursor:pointer; font-size:var(--fs-sm); color:var(--t1);
                   border-bottom:var(--bw) solid var(--border); }
.comp-results li:last-child { border-bottom:0; }
.comp-results li:hover, .comp-results li:focus { background:var(--brand-tint); }
.comp-results li .ind { color:var(--t3); font-size:var(--fs-xs); margin-left:var(--sp-2); }

/* ── 복지 편집(select·복지 목록·등록/수정 폼) ── */
.auth-card select { width:100%; padding:11px 12px; font-size:var(--fs-base); font-family:var(--font-sans);
                    border:var(--bw) solid var(--border-strong); border-radius:var(--r-sm);
                    background:var(--bg-1); color:var(--t1); }
.auth-card select:focus-visible { outline:var(--focus-width) solid var(--focus);
                    outline-offset:var(--focus-offset); border-color:var(--brand); }

.ben-list { list-style:none; margin:var(--sp-3) 0 0; padding:0; }
.ben-row { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 0;
           border-bottom:var(--bw) solid var(--border); }
.ben-row:last-child { border-bottom:0; }
.ben-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ben-nm { font-weight:var(--fw-medium); color:var(--t1); }
.ben-meta { font-size:var(--fs-xs); color:var(--t3); }
.ben-badge { font-size:var(--fs-xs); padding:2px 8px; border-radius:var(--r-pill);
             background:var(--green-dim); color:var(--green); white-space:nowrap; }

.amt-row { display:flex; align-items:flex-end; gap:var(--sp-4); flex-wrap:wrap; }
.amt-col { flex:1; min-width:140px; }
.qual-check { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm);
              color:var(--t2); margin:0 0 11px; white-space:nowrap; cursor:pointer; }
.qual-check input { width:auto; }
.amt-col.is-disabled { opacity:.5; }

#benefit-form { margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:var(--bw) solid var(--border); }

/* ── 편집 이력(나무위키식 before→after) ── */
.edit-log { list-style:none; margin:var(--sp-4) 0 0; padding:0; }
.log-entry { padding:var(--sp-4) 0; border-bottom:var(--bw) solid var(--border); }
.log-entry:last-child { border-bottom:0; }
.log-head { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.log-nick { font-weight:var(--fw-semibold); color:var(--t1); }
.log-type { font-size:var(--fs-xs); padding:2px 8px; border-radius:var(--r-pill); }
.log-type--create { background:var(--green-dim); color:var(--green); }
.log-type--update { background:var(--brand-tint); color:var(--brand); }
.log-type--delete { background:var(--red-dim); color:var(--red); }
.log-dtm { font-size:var(--fs-xs); color:var(--t4); margin-left:auto; font-variant-numeric:tabular-nums; }
.log-note { font-size:var(--fs-sm); color:var(--t3); margin:var(--sp-2) 0 0; font-style:italic;
            word-break:keep-all; }
.log-diff { list-style:none; margin:var(--sp-2) 0 0; padding:0; }
.log-diff li { display:flex; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap;
               font-size:var(--fs-sm); padding:2px 0; }
.log-diff .dl { color:var(--t3); font-size:var(--fs-xs); min-width:56px; }
.log-diff .dv { color:var(--t1); }
.log-diff .dv.from { color:var(--t3); }
.log-diff .dv.to { color:var(--t1); font-weight:var(--fw-medium); }
.log-diff .dv.strike { text-decoration:line-through; color:var(--t4); }
.log-diff .arw { color:var(--t4); }