/* 색상은 common.css의 공식 토큰(--bg/--text/--brown 등)에 그대로 맞춤(스타일가이드 v1 · 2026-08-26).
   이 파일 곳곳에서 쓰는 변수 이름(--wood, --ink 등)은 안 바꾸고 값만 공식 토큰을 가리키게 함
   - 수십 곳 var(--wood-dark) 같은 사용처를 일일이 안 고쳐도 되게 하려는 목적.
   --amber만 예외: 대기/경고 배지용으로 쓰는데 가이드에 해당하는 공식 토큰이 없어서 기존 값 유지. */
:root{
    --cream:var(--bg);
    --surface:var(--paper);
    --ink:var(--text);
    --ink-soft:var(--text-secondary);
    --wood:var(--brown);
    --wood-dark:var(--text);
    --amber:#c98a2e;
    --teal:var(--green);
    --red:var(--destructive);
    --border:rgba(39, 33, 27, .14);
}
*{box-sizing:border-box;}
body{
    margin:0;
    font-family:var(--sans);
    background:var(--cream);
    color:var(--ink);
    display:flex;
    justify-content:center;
    /* 상단 74px은 common.css의 고정(position:fixed) 헤더 높이만큼 띄우는 여백 */
    padding:122px 16px 80px;
}
.card{
    width:100%;
    max-width:520px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:4px;
    overflow:hidden;
}
.header{padding:32px 32px 8px;text-align:center;}
.header h1{
    font-family:'Noto Serif KR', serif;
    font-weight:700;
    font-size:22px;
    margin:0 0 6px;
    letter-spacing:-0.01em;
}
.header p{margin:0;font-size:13px;color:var(--ink-soft);}
.req-note{font-size:12px;color:var(--ink-soft);margin:12px 0 0;}
.lang-bar{
    display:flex;justify-content:flex-end;align-items:center;gap:8px;
    padding:10px 20px;background:#efe6d3;border-bottom:1px solid var(--border);
}
.lang-opt{
    background:none;border:none;font-family:inherit;font-size:13px;font-weight:500;
    color:var(--ink-soft);cursor:pointer;padding:4px 8px;border-radius:4px;
}
.lang-opt.active{color:#fff;background:var(--wood-dark);font-weight:700;}
.lang-opt:hover:not(.active){color:var(--wood-dark);}

/* 원래 form{...} 전역 선택자였는데, admin 페이지의 작은 인라인 삭제/승인 폼까지 이 패딩을
   먹어서 버튼이 부풀어버리는 문제가 있었음 - 카드 본문을 감싸는 "메인 폼"에만 적용되도록 스코프함 */
.page-form{padding:24px 32px 32px;}
fieldset{border:none;padding:0;margin:0 0 22px;}
legend{
    font-size:12px;
    font-weight:700;
    color:var(--wood);
    letter-spacing:.04em;
    margin-bottom:10px;
    text-transform:uppercase;
}
.field{margin-bottom:14px;}
.field label{
    display:block;
    font-size:13px;
    font-weight:500;
    margin-bottom:5px;
}
.req{color:var(--red);margin-left:2px;}
.field .hint{
    font-size:11.5px;
    color:var(--ink-soft);
    margin-top:4px;
}
.locked{color:var(--red);}
input[type=text],
input[type=password],
input[type=tel],
input[type=date],
input[type=email],
input[type=number],
input[type=file],
select{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:4px;
    font-size:14px;
    font-family:inherit;
    background:#fff;
    color:var(--ink);
}
input:disabled,input:read-only{background:#f1ece1;color:var(--ink-soft);}
input:focus,select:focus{outline:none;border-color:var(--wood);}

.field-inline{display:flex;gap:8px;align-items:stretch;}
.field-inline input{flex:1;min-width:0;}
.btn-check{
    flex:none;
    white-space:nowrap;
    padding:0 14px;
    background:var(--surface);
    border:1px solid var(--wood);
    color:var(--wood-dark);
    border-radius:4px;
    font-size:13px;
    font-weight:500;
    font-family:inherit;
    cursor:pointer;
}
.btn-check:hover:not(:disabled){background:var(--wood);color:#fff;}
.btn-check:disabled{opacity:.55;cursor:default;}
.check-result{
    display:block;
    font-size:11.5px;
    margin-top:5px;
}
.check-result.ok{color:var(--teal);font-weight:500;}
.check-result.fail{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#fbe2e2;
    border:1px solid var(--red);
    color:var(--red);
    font-weight:700;
    font-size:12.5px;
    padding:5px 10px;
    border-radius:4px;
}
.check-result.fail::before{content:"\26A0";font-size:13px;}
.check-result:empty{display:none;}

.email-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.email-row input.email-local{flex:1;min-width:110px;width:auto;}
.at-sign{flex:none;color:var(--ink-soft);font-weight:700;}
.email-row select{flex:none;width:132px;padding:10px 8px;font-size:13px;}
.email-row input.domain-custom{flex:none;width:132px;}

.btn-send-mail{
    display:none;
    margin-top:8px;
    background:var(--teal);
    border-color:var(--teal);
    color:#fff;
}
.btn-send-mail:hover:not(:disabled){background:#254f45;}
.btn-send-mail:disabled{opacity:.6;}

.verify-box{
    display:none;
    margin-top:10px;
    padding:12px;
    background:#f6f1e6;
    border:1px solid var(--border);
    border-radius:6px;
}
.verify-meta{display:flex;justify-content:space-between;align-items:center;margin-top:6px;}
.timer{font-weight:700;color:var(--wood-dark);font-variant-numeric:tabular-nums;}

.radio-group{display:flex;gap:16px;padding-top:2px;}
.radio-group label{
    display:flex;align-items:center;gap:6px;
    font-size:14px;font-weight:400;margin:0;
}
.kakao-box{
    background:#fdf4de;
    border:1px dashed var(--amber);
    border-radius:6px;
    padding:14px 16px;
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.badge{
    font-size:11px;
    background:var(--teal);
    color:#fff;
    padding:2px 8px;
    border-radius:10px;
}
.terms-checkbox{
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:13px;
    margin-bottom:16px;
    cursor:pointer;
}
.terms-checkbox input{margin-top:2px;flex:none;}
.req-tag{color:var(--red);font-weight:700;margin-right:4px;}
.opt-tag{color:var(--teal);font-weight:700;margin-right:4px;}
.optional-note{font-weight:400;color:var(--ink-soft);}
.form-actions{display:flex;gap:10px;margin-top:2px;}
.btn-cancel{
    flex:1;
    padding:13px 0;
    background:var(--surface);
    color:var(--wood-dark);
    border:1px solid var(--wood-dark);
    border-radius:5px;
    font-size:15px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    text-decoration:none;
    text-align:center;
}
.btn-cancel:hover{background:#f1ece1;}
.submit{
    display:inline-block;
    flex:2;
    padding:13px 0;
    background:var(--wood-dark);
    color:#fff;
    /* border:none이면 .btn-cancel(1px solid 테두리)보다 2px 낮아져서 나란히 놓였을 때 높이가 안 맞음 */
    border:1px solid transparent;
    border-radius:5px;
    font-size:15px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    text-decoration:none;
    box-sizing:border-box;
}
.submit:hover{background:var(--wood);}
.swal-btn-fixed{
    min-width: 90px;
}
#kakaoSection{display:none;}