/* BASIC css start */ /* ============================================================ ★ 2026-08-15 : 입력칸·붙는버튼 높이를 48 → 44 로 고쳤습니다. 48 은 PC 값입니다. 부품표 2회차 — 모바일 44 / PC 48 (parts.md). 모서리 10 · 좌우 12 · 글자 13.5 · 붙는버튼 폭 96 은 이미 맞았습니다. 피시위즈 모바일 로그인 (login) — CSS 탭 2026-08-11 ★ 값은 전부 부품표에서 가져왔습니다. 이 화면만의 값을 새로 만들지 않았습니다. 입력칸 48 · 모서리 10 · 테두리 1px #DFE3E8 주버튼 52 · 검정 #14181D 흰 글자 / 보조버튼 흰 바탕 + 테두리 여백은 4 · 8 · 12 · 16 · 24 · 32 만 씁니다. 화면 좌우 여백 16. 글자색 — 제목 #14181D · 본문 #2B3138 · 설명 #8A9099 ★ 상품 카드 규칙은 한 줄도 없습니다. 이 화면에는 카드가 없습니다. ★ 입력칸 모양은 「감싼 상자 안의 input」 으로 잡습니다. 메이크샵 치환코드가 input 을 통째로 그려주기 때문에 우리가 class 를 붙일 수 없습니다. 그래서 .fw-input 이라는 상자로 감싸고 그 안의 input · select 에 모양을 줍니다. ★ 이미지를 쓰는 규칙이 하나도 없습니다 (1인 운영 — 이미지 관리를 늘리지 않습니다). ============================================================ */ #contents .login {overflow-x:hidden; max-width:100%; padding-bottom:32px;} /* 화면 제목 · 설명 */ #contents .login .fw-ahead {padding:24px 16px 0;} #contents .login .fw-atit {margin:0; font-size:18px; font-weight:800; color:#14181D; letter-spacing:-.3px; line-height:1.4;} #contents .login .fw-adesc {margin:8px 0 0; font-size:12.5px; color:#8A9099; line-height:1.5;} /* 묶음(섹션) — 제목 16 Bold */ #contents .login .fw-sec {padding:0 16px; margin-top:24px;} #contents .login .fw-stit {margin:0 0 12px; font-size:16px; font-weight:700; color:#14181D;} /* 입력 한 줄 — 라벨은 칸 위에 둡니다 (부품표) */ #contents .login .fw-field {margin-top:16px;} #contents .login .fw-sec > .fw-field:first-child {margin-top:0;} #contents .login .fw-label {display:block; margin:0 0 8px; font-size:12px; font-weight:700; color:#14181D;} #contents .login .fw-req {color:#EF6253;} #contents .login .fw-help {margin:8px 0 0; font-size:10.5px; color:#9AA0A8; line-height:1.5;} #contents .login .fw-msg {margin:8px 0 0; font-size:10.5px; color:#EF6253; line-height:1.5;} #contents .login .fw-help:empty, #contents .login .fw-msg:empty {display:none;} /* 입력칸 — 높이 48 · 모서리 10 · 테두리 1px #DFE3E8 상자를 가로 배치로 두면 칸이 여러 개 와도(생년월일 셀렉트 3개 등) 저절로 나눠집니다 */ #contents .login .fw-input {display:flex; gap:8px; align-items:center;} #contents .login .fw-input input, #contents .login .fw-input select {flex:1; min-width:0; height:44px; box-sizing:border-box; padding:0 12px; border:1px solid #DFE3E8; border-radius:10px; background:#fff; font-size:13.5px; color:#14181D; font-family:inherit; -webkit-appearance:none; appearance:none;} #contents .login .fw-input input:focus, #contents .login .fw-input select:focus {border-color:#14181D; outline:none;} #contents .login .fw-input input[type=hidden] {display:none;} #contents .login .fw-input input[type=checkbox], #contents .login .fw-input input[type=radio] {flex:0 0 18px; width:18px; height:18px; padding:0;} /* 칸 오른쪽에 붙는 버튼 — 폭 96 (부품표) */ #contents .login .fw-row {display:flex; gap:8px; align-items:center;} #contents .login .fw-row .fw-input {flex:1; min-width:0;} #contents .login .fw-inbtn {flex:0 0 96px; width:96px; height:44px; line-height:42px; box-sizing:border-box; border:1px solid #DFE3E8; border-radius:10px; background:#fff; text-align:center; font-size:12.5px; font-weight:500; color:#14181D; text-decoration:none;} /* 체크 · 라디오 — 누르는 자리 44 (부품표) */ #contents .login .fw-chk {display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer;} #contents .login .fw-chk input {flex:0 0 18px; width:18px; height:18px; margin:0;} #contents .login .fw-ctx {font-size:13px; color:#2B3138;} #contents .login .fw-opt {display:flex; flex-wrap:wrap; gap:16px; align-items:center; min-height:44px;} #contents .login .fw-opt label {display:inline-flex; align-items:center; gap:4px; cursor:pointer;} #contents .login .fw-opt input {width:18px; height:18px; margin:0;} #contents .login .fw-opt i {font-style:normal; font-size:13px; color:#2B3138;} /* 라벨값표 — 라벨 폭 84 고정 · 선 없음 (부품표) */ #contents .login .fw-lv .fw-lvrow {display:flex; margin-top:12px;} #contents .login .fw-lv .fw-lvrow:first-child {margin-top:0;} #contents .login .fw-lv .fw-lvl {flex:0 0 84px; font-size:12.5px; color:#8A9099;} #contents .login .fw-lv .fw-lvv {flex:1; min-width:0; font-size:12.5px; font-weight:500; color:#14181D; word-break:break-all;} /* 긴 글 스크롤 상자 — 높이 200 고정 · 모서리 10 · 테두리 */ #contents .login .fw-terms {height:200px; overflow-y:auto; -webkit-overflow-scrolling:touch; box-sizing:border-box; padding:12px; border:1px solid #DFE3E8; border-radius:10px; background:#fff; font-size:11.5px; line-height:1.6; color:#2B3138; word-break:break-all;} #contents .login .fw-terms .fw-tpart:empty {display:none;} #contents .login .fw-terms img {max-width:100%; height:auto;} #contents .login .fw-terms table {max-width:100%;} /* 알림상자 3종 (부품표) */ #contents .login .fw-note {padding:12px; border-radius:10px; font-size:11.5px; line-height:1.5;} #contents .login .fw-note.info {background:#F7F8FA; color:#14181D;} #contents .login .fw-note.warn {background:#FDEFEE; color:#EF6253;} #contents .login .fw-note.done {background:#F2F7F4; color:#2E7D5B;} /* 버튼 — 주 52 검정 / 보조 52 흰 바탕 / 잠김 바탕 #F7F8FA 글자 #B3B9C0 */ #contents .login .fw-btns {padding:0 16px; margin-top:24px;} #contents .login .fw-btns + .fw-btns {margin-top:8px;} #contents .login .fw-btns.two {display:flex; gap:8px;} #contents .login .fw-btns.two > * {flex:1; min-width:0;} #contents .login .fw-btn {display:block; height:52px; line-height:50px; box-sizing:border-box; border-radius:10px; text-align:center; font-size:15px; font-weight:700; text-decoration:none;} #contents .login .fw-btn.pri {background:#14181D; border:1px solid #14181D; color:#fff;} #contents .login .fw-btn.sub {background:#fff; border:1px solid #DFE3E8; color:#14181D;} #contents .login .fw-btn.off {background:#F7F8FA; border:1px solid #DFE3E8; color:#B3B9C0; pointer-events:none;} #contents .login button.fw-btn {width:100%; font-family:inherit; cursor:pointer;} /* 글자 링크 줄 */ #contents .login .fw-links {display:flex; justify-content:center; flex-wrap:wrap; gap:16px; padding:24px 16px 0;} #contents .login .fw-links a {font-size:12.5px; color:#8A9099; text-decoration:none;} /* 소셜 버튼 4종 — 높이 52 · 모서리 10 · 사이 8 · 각사 지정색 (부품표, 바꿀 수 없다) 로고 이미지는 쓰지 않습니다. 글자만으로 구분합니다 */ #contents .login .fw-sns {padding:0 16px; margin-top:16px;} #contents .login .fw-sns .fw-btn + .fw-btn {margin-top:8px;} #contents .login .fw-btn.kakao {background:#FEE500; border:1px solid #FEE500; color:#191919;} #contents .login .fw-btn.naver {background:#03C75A; border:1px solid #03C75A; color:#fff;} #contents .login .fw-btn.facebook {background:#1877F2; border:1px solid #1877F2; color:#fff;} #contents .login .fw-btn.apple {background:#000000; border:1px solid #000000; color:#fff;} /* 또는 구분줄 — 선 1px #DFE3E8 만 씁니다 */ #contents .login .fw-or {display:flex; align-items:center; gap:12px; padding:24px 16px 0; font-size:11.5px; color:#8A9099;} #contents .login .fw-or:before, #contents .login .fw-or:after {content:''; flex:1; height:1px; background:#DFE3E8;} /* 로그인 실패 안내 — 닫기 × 누르는 자리 44 (부품표) */ #contents .login .fw-fail {padding:16px 16px 0;} #contents .login .fw-fail .fw-note {position:relative; min-height:44px; padding-right:44px;} #contents .login .fw-fail .fw-close {position:absolute; top:0; right:0; width:44px; height:44px; line-height:44px; text-align:center; font-size:14px; color:#EF6253; text-decoration:none;} /* 아이디 저장 · 자동 로그인 — 한 줄에 나란히 */ #contents .login .fw-keep {display:flex; gap:24px; margin-top:8px;} /* ── 2026-08-15 · 입력칸 5상태 (부품표 2회차) ── 기본(선 #DFE3E8) · 입력 중(#14181D 1.5) · 값 있음 · 오류(#EF6253) · 잠김(바탕 #F7F8FA 글자 #B3B9C0). 안내 글씨 #9AA0A8 · 값 #14181D. ★ 휴대전화 세 칸은 관리자에서 SMS 인증이 꺼져 있어 disabled 로 내려옵니다. 그게 「잠김」 으로 보이도록 색을 맞춥니다. 스킨으로 풀 수 있는 문제가 아닙니다. */ #contents .login input::placeholder, #contents .login textarea::placeholder {color:#9AA0A8;} #contents .login input:focus, #contents .login select:focus, #contents .login textarea:focus {border-color:#14181D; border-width:1.5px; outline:none;} #contents .login input:disabled, #contents .login select:disabled, #contents .login textarea:disabled, #contents .login input[readonly] {background:#F7F8FA; color:#B3B9C0; -webkit-text-fill-color:#B3B9C0;} #contents .login .fw-err input, #contents .login input.fw-err, #contents .login select.fw-err {border-color:#EF6253;} #contents .login input[type=checkbox], #contents .login input[type=radio] {accent-color:#14181D;} /* BASIC css end */