/* passwordless.css — Passwordless X1280 전용 스타일 (doc/passwordless-x1280-uiux-design.md 5장)
   네임스페이스: pwl- (r2396부터 SVN 버전 관리, 변경 시 JSP 링크의 ?v= 갱신) */

/* ── 공통: 인라인 메시지 ─────────────────────────────── */
.pwl-msg {display:none;margin-top:10px;padding:8px 10px;font-size:13px;line-height:1.5;border:1px solid transparent;text-align:center;}
.pwl-msg.pwl-show {display:block;}
.pwl-msg.pwl-error {color:#f13737;border-color:#f5b5b5;background:#fdf3f3;}
.pwl-msg.pwl-info {color:#555;border-color:#ddd;background:#f8f8f8;}
.pwl-msg.pwl-success {color:#227b39;border-color:#bcd9c5;background:#f2f8f4;}

/* ── 공통: 프로그레스 바(장식 — 남은 시간 텍스트가 본 정보) ── */
.pwl-progress {height:6px;background:#e5e5e5;margin:10px auto 4px;max-width:260px;overflow:hidden;}
.pwl-progress-bar {height:100%;width:100%;background:#227b39;transition:width 1s linear;}
.pwl-progress-bar.pwl-warn {background:#f13737;}
.pwl-remain {font-size:13px;color:#555;}

/* ── 공통: 안내·버튼·정렬 ────────────────────────────── */
.pwl-hint {margin-top:12px;font-size:12px;color:#888;line-height:1.6;}
.pwl-desc {margin-bottom:14px;line-height:1.6;}
.pwl-center {text-align:center;margin-top:20px;}
.pwl-btn-line {display:inline-block;padding:6px 24px;border:1px solid #888;color:#555;cursor:pointer;}
.pwl-loading {opacity:.6;cursor:default;pointer-events:none;}

/* ── 로그인: 진입 버튼·진행 패널 ─────────────────────── */
.pwl-entry {margin-top:12px;}
.pwl-entry-btn {display:block;text-align:center;padding:10px 0;border:1px solid #227b39;color:#227b39;cursor:pointer;}
.pwl-panel {margin-top:12px;border:1px solid #227b39;padding:16px 10px;text-align:center;}
.pwl-panel-title {font-size:15px;font-weight:bold;color:#227b39;margin-bottom:8px;outline:none;}
.pwl-sp {font-size:28px;font-weight:bold;letter-spacing:8px;margin:10px 0;color:#333;}
.pwl-panel .pwl-btn-line {margin-top:12px;}

/* ── 마이페이지: 단계 표시기 ─────────────────────────── */
.pwl-steps {display:flex;justify-content:center;margin:20px 0 24px;padding:0;list-style:none;}
.pwl-steps li {font-size:13px;color:#999;padding:6px 14px;border-bottom:2px solid #ddd;}
.pwl-steps li.pwl-on {color:#227b39;font-weight:bold;border-bottom-color:#227b39;}

/* ── 마이페이지: QR·등록코드 ─────────────────────────── */
.pwl-qr-wrap {position:relative;display:inline-block;}
.pwl-qr-wrap img {width:220px;height:220px;border:1px solid #ddd;display:block;}
.pwl-qr-overlay {display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.85);align-items:center;justify-content:center;color:#f13737;font-weight:bold;}
.pwl-qr-wrap.pwl-expired .pwl-qr-overlay {display:flex;}
.pwl-code-box {display:block;max-width:420px;margin:0 auto;padding:8px 10px;border:1px dashed #aaa;background:#fafafa;font-size:13px;line-height:1.7;color:#666;box-sizing:border-box;}
.pwl-code-box b {letter-spacing:2px;color:#333;}

/* ── 마이페이지: 등록 방법 2종(QR / 같은 휴대폰 직접 입력) — 2026-08-20 ── */
.pwl-ways {display:flex;flex-direction:column;align-items:center;}
.pwl-way {width:100%;max-width:440px;margin:12px auto 0;padding:12px 10px;border:1px solid #e3e3e3;background:#fff;text-align:center;box-sizing:border-box;}
.pwl-way-title {font-size:14px;font-weight:bold;color:#227b39;margin-bottom:6px;}
.pwl-way-desc {font-size:13px;color:#666;line-height:1.6;margin-bottom:10px;}
.pwl-way-steps {display:inline-block;text-align:left;margin:0 auto 10px;padding-left:22px;font-size:13px;line-height:1.7;color:#555;list-style:decimal outside;}
.pwl-way-steps li {list-style:decimal outside;}
.pwl-way-steps b {color:#333;}
.pwl-code-row {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin:4px 0;}
.pwl-code-row > * {margin:2px 4px;}
.pwl-code-label {min-width:58px;text-align:right;font-size:12px;color:#888;}
.pwl-code-row b {word-break:break-all;}
.pwl-copy-btn {display:inline-block;padding:1px 10px;border:1px solid #227b39;background:#fff;color:#227b39;font-size:12px;line-height:1.7;cursor:pointer;white-space:nowrap;}
.pwl-copy-msg {display:none;margin-top:6px;font-size:12px;line-height:1.5;}
.pwl-copy-msg.pwl-show {display:block;}
.pwl-copy-msg.pwl-success {color:#227b39;}
.pwl-copy-msg.pwl-error {color:#f13737;}

/* ── 마이페이지: 완료 패널·상태 머리글 ───────────────── */
.pwl-status-head {text-align:center;padding:24px 10px 20px;}
.pwl-done {text-align:center;padding:40px 10px;}
.pwl-done-check {display:inline-block;width:48px;height:48px;line-height:48px;border-radius:50%;background:#227b39;color:#fff;font-size:26px;margin-bottom:14px;}
.pwl-done-title {font-size:18px;font-weight:bold;margin-bottom:12px;}
.pwl-done p {line-height:1.6;}
.pwl-done .pwl-sub {margin-top:8px;color:#888;}

/* ── 마이페이지: 해제 2단계 확인 ─────────────────────── */
.pwl-confirm {display:none;margin-top:16px;text-align:center;}
.pwl-confirm.pwl-show {display:block;}
.pwl-confirm p {margin-bottom:10px;font-weight:bold;color:#f13737;}
.pwl-confirm a {margin:0 4px;}

/* ── 모바일(사이트 브레이크포인트 준수) ──────────────── */
@media all and (max-width:768px){
	.pwl-sp {font-size:24px;letter-spacing:6px;}
	.pwl-steps li {padding:6px 8px;font-size:12px;}
	/* 비밀번호 테이블: 라벨 위/입력란 아래로 스택 — th 30% 고정폭의 어중간한 줄바꿈 방지 */
	.pwl-tbl, .pwl-tbl tbody, .pwl-tbl tr, .pwl-tbl th, .pwl-tbl td {display:block;width:100%;box-sizing:border-box;}
	.pwl-tbl colgroup {display:none;}
	#sub_join .join_input .ipt_info .pwl-tbl th {text-align:left;height:auto;padding:8px 10px;}
	#sub_join .join_input .ipt_info .pwl-tbl td {height:auto;padding:8px 0 4px;}
	.pwl-tbl input[type=password] {width:100%;box-sizing:border-box;}
	/* 등록코드·서버주소 박스: 좁은 화면에서 줄바꿈 허용 */
	.pwl-code-box {max-width:100%;box-sizing:border-box;word-break:break-all;}
	/* 같은 휴대폰이면 '직접 입력'(방법 2)이 쓸모 있으므로 모바일 폭에서는 순서를 뒤집어 먼저 보인다 */
	.pwl-ways {flex-direction:column-reverse;}
	.pwl-code-row {justify-content:flex-start;}
	.pwl-code-label {text-align:left;min-width:56px;}
	/* QR 이미지: 화면 폭 초과 방지 */
	.pwl-qr-wrap img {max-width:80vw;height:auto;}
	/* 마이페이지 탭 바: 모바일 2열 등폭 그리드(왼쪽 기준 정렬) — 텍스트 길이 기반 가변폭이 열을 어긋나게 하는 문제 해소 */
	a.size_m2[href^="/mypage/"] {width:48% !important;padding:0 !important;margin:0 0 4px 0 !important;text-align:center !important;box-sizing:border-box !important;}
}