@charset "UTF-8";

/********************************************************
■ 알림 모달 (fs-modal) : 브라우저 alert()/confirm() 대체
  - js/fs-modal.js 와 함께 사용
********************************************************/
.fs-modal { position:fixed; left:0; top:0; right:0; bottom:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:16px; opacity:0; visibility:hidden; transition:opacity 250ms, visibility 250ms; font-family:'Pretendard', 'Apple SD Gothic Neo', sans-serif; }
.fs-modal.on { opacity:1; visibility:visible; }
.fs-modal-dim { position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(30,22,16,.55); }

.fs-modal-box { position:relative; width:100%; max-width:400px; padding:36px 28px 24px; border-radius:16px; background:#fff; box-shadow:0 20px 50px rgba(0,0,0,.2); text-align:center; transform:translateY(16px) scale(.98); transition:transform 300ms cubic-bezier(.2,.8,.3,1); }
.fs-modal.on .fs-modal-box { transform:translateY(0) scale(1); }

/* 아이콘 */
.fs-modal-icon { display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin:0 auto 18px; border-radius:50%; background:rgba(91,65,45,.08); color:var(--main-color1, #5B412D); }
.fs-modal-icon svg { width:28px; height:28px; }
.fs-modal.is-success .fs-modal-icon { background:rgba(225,101,134,.12); color:#E16586; }

/* 내용 */
.fs-modal-msg { margin:0; color:#222; font-size:1.0625rem; font-weight:500; line-height:1.55; letter-spacing:-0.02em; white-space:pre-line; word-break:keep-all; overflow-wrap:anywhere; max-height:50vh; overflow-y:auto; }

/* 버튼 */
.fs-modal-btns { display:flex; gap:8px; margin-top:26px; }
.fs-modal-btns button { flex:1; height:50px; border-radius:10px; font-size:1rem; font-weight:600; cursor:pointer; transition:background-color 200ms, color 200ms, border-color 200ms; }
.fs-modal-btns .fs-modal-ok { border:1px solid var(--main-color1, #5B412D); background:var(--main-color1, #5B412D); color:#fff; }
.fs-modal-btns .fs-modal-ok:hover { background:var(--main-color3, #795840); border-color:var(--main-color3, #795840); }
.fs-modal-btns .fs-modal-cancel { border:1px solid #ddd; background:#fff; color:#555; }
.fs-modal-btns .fs-modal-cancel:hover { border-color:#bbb; color:#222; }
.fs-modal-btns button:focus-visible { outline:2px solid var(--main-color1, #5B412D); outline-offset:2px; }

/* 선택창 (fsChoice) : 배송 / 매장픽업 등 */
.fs-modal-x { display:none; position:absolute; right:12px; top:12px; width:36px; height:36px; background:none; }
.fs-modal-x:before,
.fs-modal-x:after { content:""; position:absolute; left:50%; top:50%; width:18px; height:1.5px; background:#555; }
.fs-modal-x:before { transform:translate(-50%, -50%) rotate(45deg); }
.fs-modal-x:after { transform:translate(-50%, -50%) rotate(-45deg); }
.fs-modal.is-choice .fs-modal-x { display:block; }
.fs-modal.is-choice .fs-modal-btns { display:none; }
.fs-modal.is-choice .fs-modal-box { padding-top:44px; }

.fs-modal-choices { display:none; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:22px; }
.fs-modal.is-choice .fs-modal-choices { display:grid; }
.fs-modal-choice { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:64px; padding:12px 10px; border:1px solid #ddd; border-radius:10px; background:#fff; color:#333; cursor:pointer; transition:border-color 200ms, background-color 200ms, color 200ms; }
.fs-modal-choice strong { position:relative; padding-left:24px; font-size:1rem; font-weight:600; }
.fs-modal-choice strong:before { content:""; position:absolute; left:0; top:50%; width:16px; height:16px; margin-top:-8px; border:1.5px solid #ccc; border-radius:50%; background:#fff; box-sizing:border-box; transition:border-color 200ms, box-shadow 200ms; }
.fs-modal-choice span { font-size:.75rem; color:#999; line-height:1.4; word-break:keep-all; }
.fs-modal-choice:hover,
.fs-modal-choice:focus-visible { border-color:var(--main-color1, #5B412D); outline:none; }
.fs-modal-choice:hover strong:before,
.fs-modal-choice:focus-visible strong:before { border-color:var(--main-color1, #5B412D); box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 8px var(--main-color1, #5B412D); }

/* 입력값 검사 말풍선 (브라우저 기본 말풍선 대체) */
.fs-valid-tip { position:fixed; z-index:100001; display:flex; align-items:center; gap:8px; max-width:calc(100vw - 16px); padding:10px 14px 10px 10px; border:1px solid rgba(91,65,45,.15); border-radius:10px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.12); color:#333; font-family:'Pretendard', 'Apple SD Gothic Neo', sans-serif; font-size:.875rem; line-height:1.4; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity 200ms, visibility 200ms, transform 200ms; pointer-events:none; }
.fs-valid-tip.on { opacity:1; visibility:visible; transform:translateY(0); }
.fs-valid-tip:before { content:""; position:absolute; left:16px; bottom:100%; width:10px; height:10px; margin-bottom:-5px; border-left:1px solid rgba(91,65,45,.15); border-top:1px solid rgba(91,65,45,.15); background:#fff; transform:rotate(45deg); }
.fs-valid-tip .ico { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--main-color1, #5B412D); color:#fff; font-size:.75rem; font-weight:700; }

/* ─── 로봇 방지(Robot Guard) 인증 버튼·팝업 : 사이트 톤으로 ───
   플러그인이 화면에 스타일을 나중에 덧붙이므로 body 를 붙여 우선 적용 */
body .rg-verify { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
body .rg-verify:after { content:"등록 전 간단한 숫자 확인이 필요해요. 버튼을 누르지 않아도 완료할 때 자동으로 확인 창이 열려요."; flex-basis:100%; color:#999; font-size:.8125rem; line-height:1.5; }
body .rg-verify:has(.rg-verify-btn.done):after { content:"확인이 완료되었어요."; color:var(--main-color1, #5B412D); }
body .rg-verify .rg-verify-btn { display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 20px; border:1px solid var(--main-color1, #5B412D); border-radius:99px; background:#fff; color:var(--main-color1, #5B412D); font-family:inherit; font-size:.9375rem; font-weight:600; cursor:pointer; transition:background-color 200ms, color 200ms; }
body .rg-verify .rg-verify-btn:before { content:""; width:18px; height:18px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 8.3 7 10 4-1.7 7-5.5 7-10V6Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 8.3 7 10 4-1.7 7-5.5 7-10V6Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center/contain; }
body .rg-verify .rg-verify-btn:hover { background:var(--main-color1, #5B412D); color:#fff; }
body .rg-verify .rg-verify-btn.done,
body .rg-verify .rg-verify-btn.done:hover { border-color:var(--main-color1, #5B412D); background:var(--main-color1, #5B412D); color:#fff; cursor:default; }
body .rg-verify-state { display:none; } /* 버튼 글자(인증완료)로 상태 표시 */

/* 인증 팝업 */
body .rg-ov { background:rgba(30,22,16,.55); }
body .rg-md { max-width:400px; padding:32px 26px 22px; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.2); color:#222; font-family:'Pretendard', 'Apple SD Gothic Neo', sans-serif; text-align:center; }
body .rg-md h3 { margin:0 0 6px; color:#111; font-size:1.125rem; font-weight:700; }
body .rg-md .q { margin:0 0 16px; color:#666; font-size:.875rem; }
body .rg-md .q b { color:var(--main-color1, #5B412D); }
/* 숫자 이미지 : 창 너비에 맞춤 + [새 문제]는 이미지 아래 */
body .rg-md .rg-imgbox { flex-direction:column; align-items:center; gap:8px; margin-bottom:14px; }
body .rg-md .rg-imgbox img { width:100%; max-width:100%; height:auto; border-color:#ece7e2; border-radius:10px; background:#faf7f4; }
body .rg-md .rg-re { display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 12px; border:1px solid #ddd; border-radius:99px; background:#fff; color:#666; font-size:.75rem; }
body .rg-md .rg-re:before { content:"↻"; font-size:.875rem; line-height:1; }
body .rg-md .rg-re:hover { border-color:var(--main-color1, #5B412D); color:var(--main-color1, #5B412D); }
/* 숫자 입력칸 : 입력한 숫자만 간격, 안내 글자는 붙여서 */
body .rg-md .rg-in { height:50px; padding:0 14px; border:1px solid #ddd; border-radius:10px; font-size:1.125rem; }
body .rg-md .rg-in::placeholder { letter-spacing:0; color:#aaa; font-size:.9375rem; }
body .rg-md .rg-in:focus { outline:none; border-color:var(--main-color1, #5B412D); box-shadow:0 0 0 3px rgba(91,65,45,.12); }
body .rg-go { height:50px; padding:0 20px; border-radius:10px; background:var(--main-color1, #5B412D); font-weight:600; }
body .rg-go:hover { background:var(--main-color3, #795840); }
body .rg-go:disabled { background:#c9bfb6; }
body .rg-msg.err { color:#d33; }
body .rg-msg.ok { color:var(--main-color1, #5B412D); font-weight:600; }
body .rg-close { height:46px; padding:0; border:1px solid #ddd; border-radius:10px; background:#fff; color:#555; font-weight:500; }
body .rg-close:hover { border-color:#bbb; color:#222; }

/* 모달이 떠 있는 동안 배경 스크롤 막기 */
html.fs-modal-open, html.fs-modal-open body { overflow:hidden; }

@media (max-width: 767px) {
    .fs-modal-box { padding:30px 20px 18px; border-radius:14px; }
    .fs-modal-icon { width:48px; height:48px; margin-bottom:14px; }
    .fs-modal-icon svg { width:24px; height:24px; }
    .fs-modal-msg { font-size:1rem; }
    .fs-modal-btns { margin-top:22px; }
    .fs-modal-btns button { height:48px; font-size:.9375rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fs-modal, .fs-modal-box { transition:none; }
}

/********************************************************
■ 이용약관 · 개인정보처리방침 팝업 (#modal-siteinfo : tail.sub.php, js/default.js)
  - 제목 · 닫기 · 내용 · (회원가입 시) 취소/동의 버튼을 흰 카드 하나에
********************************************************/
body:has(#modal-siteinfo.in) .modal-backdrop.in { background:#1e1610; opacity:.55; }
body #modal-siteinfo { padding:16px; font-family:'Pretendard', 'Apple SD Gothic Neo', sans-serif; }
body #modal-siteinfo .modal-dialog { position:relative; display:flex; flex-direction:column; width:100%; max-width:720px; max-height:min(86vh, 820px); margin:0; overflow:hidden; border-radius:16px; background:#fff; box-shadow:0 20px 50px rgba(0,0,0,.2); }
/* 제목 */
body #modal-siteinfo .head { flex-shrink:0; padding:22px 64px 18px 26px; border-bottom:1px solid #f0ece8; color:#222; font-size:1.25rem; font-weight:700; letter-spacing:-0.02em; text-align:left; }
/* 닫기 */
body #modal-siteinfo button[aria-label="Close"] { position:absolute; right:14px; top:14px; z-index:2; width:40px; height:40px; border:0; border-radius:50%; background:none; transition:background-color 200ms; }
body #modal-siteinfo button[aria-label="Close"]:hover { background:#f5f2ef; }
body #modal-siteinfo button[aria-label="Close"]:before,
body #modal-siteinfo button[aria-label="Close"]:after { left:50%; top:50%; width:18px; height:1.5px; background:#555; }
body #modal-siteinfo button[aria-label="Close"]:before { transform:translate(-50%, -50%) rotate(45deg); }
body #modal-siteinfo button[aria-label="Close"]:after { transform:translate(-50%, -50%) rotate(-45deg); }
/* 내용 (스크롤) */
body #modal-siteinfo .modal-content { display:flex; flex-direction:column; flex:1; min-height:0; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
body #modal-siteinfo .modal-content .desc { flex:1; min-height:0; height:auto; max-height:none; padding:24px 26px 28px; overflow-y:auto; color:#444; font-size:.9375rem; line-height:1.75; overscroll-behavior:contain; }
body #modal-siteinfo .modal-content .desc::-webkit-scrollbar { width:6px; }
body #modal-siteinfo .modal-content .desc::-webkit-scrollbar-thumb { border-radius:99px; background:#ddd5ce; }
/* 취소 · 동의 (회원가입 약관 보기) */
body #modal-siteinfo .btns { flex-shrink:0; display:flex; gap:8px; margin:0; padding:16px 26px 20px; border-top:1px solid #f0ece8; }
body #modal-siteinfo .btns button { flex:1; width:auto; height:50px; margin:0; padding:0; border-radius:10px; font-size:1rem; font-weight:600; transition:background-color 200ms, border-color 200ms, color 200ms; }
body #modal-siteinfo .btns button.btn-cancel { border:1px solid #ddd; background:#fff; color:#555; }
body #modal-siteinfo .btns button.btn-cancel:hover { border-color:#bbb; background:#fff; color:#222; }
body #modal-siteinfo .btns button.btn-ok { flex:2; border:1px solid var(--main-color1, #5B412D); background:var(--main-color1, #5B412D); color:#fff; }
body #modal-siteinfo .btns button.btn-ok:hover { border-color:var(--main-color3, #795840); background:var(--main-color3, #795840); color:#fff; }

/* 약관 본문 (팝업 · 약관 페이지 공통) : 조 제목은 브라운 + 왼쪽 막대 */
body .privacy-page,
body .provision-page,
body .noemail-page { color:#444; line-height:1.75; }
body .privacy-page .article-title,
body .provision-page .article-title { position:relative; margin-top:28px; padding:0 0 0 12px !important; color:#222; font-size:1rem; font-weight:700; line-height:1.5; }
body .privacy-page .article-title:first-child,
body .provision-page .article-title:first-child { margin-top:0; }
body .privacy-page .article-title:before,
body .provision-page .article-title:before { content:""; position:absolute; left:0; top:.3em; width:3px; height:1em; border-radius:2px; background:var(--main-color1, #5B412D); }
body .privacy-page .article-title + *,
body .provision-page .article-title + * { margin-top:10px; }
body .privacy-page ol,
body .provision-page ol { padding-left:22px; }
body .privacy-page ol > li,
body .provision-page ol > li { margin:4px 0; }
body .privacy-page ol > li::marker,
body .provision-page ol > li::marker { color:var(--main-color1, #5B412D); font-weight:600; }
body .privacy-page p,
body .provision-page p { margin:0 0 12px; }
body .privacy-page table,
body .provision-page table { width:100%; margin:10px 0 14px; border-collapse:collapse; font-size:.875rem; }
body .privacy-page th,
body .privacy-page td,
body .provision-page th,
body .provision-page td { padding:10px 12px; border:1px solid #ece7e2; text-align:left; vertical-align:top; }
body .privacy-page th,
body .provision-page th { background:#faf7f4; color:#222; font-weight:600; }

@media (max-width: 767px) {
    body #modal-siteinfo { padding:12px; }
    body #modal-siteinfo .modal-dialog { max-height:88vh; border-radius:14px; }
    body #modal-siteinfo .head { padding:18px 56px 14px 18px; font-size:1.125rem; }
    body #modal-siteinfo button[aria-label="Close"] { right:8px; top:8px; }
    body #modal-siteinfo .modal-content .desc { padding:18px 18px 22px; font-size:.875rem; }
    body #modal-siteinfo .btns { padding:12px 18px 16px; }
    body #modal-siteinfo .btns button { height:48px; font-size:.9375rem; }
}