/* ═══ used/site.css — 화면 공통 부품 (B1 또렷 민트 · Pretendard, 사장님 10-12 확정) ═══
   값(크기·여백·둥글기·색·글꼴)은 규격 design.css 한 곳. 여기엔 화면 공통 부품(띠·머리·바닥·아래 탭·접기·카드)만.
   글자 규칙(design.md 8~12): 넘침 0 · 줄 끝 한 글자 0(keep-all) · 안내는 제목 한 줄 + 설명 한 줄 */
:root{color-scheme:light} [hidden]{display:none!important}   /* 색·글꼴 값은 규격 design.css 한 곳(B1) · 사장님 입력판 색이 있으면 app.js 가 덮음 */
body{margin:0;background:var(--paper)}
.u-body{word-break:keep-all;overflow-wrap:break-word}
.u-body p,.u-body b,.u-body span,.u-body li,.u-body summary,.u-body td,.u-body th{text-wrap:pretty}
.u-body h1,.u-body h2,.u-body h3{text-wrap:balance;font-weight:800;letter-spacing:-.03em}
[lang=ja]{font-family:"Noto Sans JP",var(--f-body);letter-spacing:0;word-break:normal;line-break:strict}   /* 일본어는 keep-all 이면 띄어쓰기가 없어 한 덩어리 — 괄호(】)만 줄 끝에 남던 것 */
a{color:inherit;text-decoration:none}
.u-btn.o:hover{background:var(--accent-wash);border-color:var(--line);filter:none}
.u-btn:disabled:hover{background:var(--paper2);border-color:var(--line)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ex{display:inline-block;font:700 11px/1 var(--f-body);color:var(--ink2);border:1px dashed var(--ink3);border-radius:var(--r-1);padding:2px 4px;margin-left:4px;vertical-align:middle}
.prep{color:var(--ink2);font-weight:700}
.ink2{color:var(--ink2)} .u-num{font-variant-numeric:tabular-nums}

/* 맨 위 띠 · 머리 */
.strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px var(--sp-3);min-height:36px;padding:6px var(--sp-4);background:var(--ink);color:var(--paper);font-size:var(--fs-2)}
.strip b{color:var(--accent);font-weight:800} .strip i{width:3px;height:3px;border-radius:50%;background:var(--paper);opacity:.5}
/* 머리 (11-10 시안) = 로고 "Furi." + 한글 이름 | 메뉴 | 가운데 인기 검색어 순위 | 오른쪽 끝 회원 메뉴 · 아래 굵은 선 */
.top{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-5);padding-block:var(--sp-4) var(--sp-3);border-bottom:2px solid var(--ink)}
.fj-logo{display:flex;align-items:baseline;gap:var(--sp-2);white-space:nowrap;color:var(--ink)}
.fj-logo b{font-family:var(--f-disp);font-weight:800;font-size:36px;line-height:1;letter-spacing:-.06em} .fj-logo b i{font-style:normal;color:var(--accent)}   /* 영문 글꼴 따로 안 실음 — Pretendard 800 (11-10) */
.fj-logo small{font-size:var(--fs-2);font-weight:700;color:var(--ink2);letter-spacing:0}
.top .u-logo-img{height:auto;max-height:48px;max-width:180px}
.rank{position:relative;justify-self:center;width:calc(11.6em + 22px);max-width:100%;min-width:0;font-size:var(--fs-3)} .rank-now{margin:0;padding:8px 10px;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rank-now b,.rank li::marker{color:var(--accent-text);font-weight:800}
.rank ol{display:none;position:absolute;top:100%;left:0;right:0;z-index:30;margin:0;padding:8px 10px 8px 30px;border:1px solid var(--line);background:var(--card);line-height:1.9}
.rank:hover ol,.rank:focus-within ol{display:block} .rank li a:hover{text-decoration:underline} .rank li a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* 11-11 사장님 "최대 10자리까지" — 폭 고정(번호+10글자), 넘치면 … */
.nav{display:flex;gap:var(--sp-5);font-size:var(--fs-4);font-weight:700;color:var(--ink);white-space:nowrap} .nav a:hover,.nav a[aria-current]{color:var(--accent-text)}
.acct{display:flex;align-items:center;font-size:var(--fs-2);white-space:nowrap} .acct a:hover{color:var(--accent-text)}
.acct a+a:not(.chg)::before{content:"";display:inline-block;width:1px;height:10px;margin:0 var(--sp-3);background:var(--line);vertical-align:middle}
.acct .chg{margin-left:var(--sp-3);padding:8px var(--sp-3);background:var(--accent);color:var(--on-accent);font-weight:700} .acct .chg:hover{color:var(--on-accent);filter:brightness(.94)}
.page{padding-block:var(--sp-5) var(--sp-6)}   /* 제목이 머리에 붙지 않게 (10-27) */
.ptitle{font-size:var(--fs-h);margin:var(--sp-3) 0 var(--sp-4)}
.sec{margin-top:var(--sp-6)} .sec>h2{font-size:var(--fs-5);margin:0 0 var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3)}
.sec>h2 a{font-size:var(--fs-2);font-weight:700;color:var(--accent-text)}
.lead{margin:0 0 var(--sp-3);color:var(--ink2);font-size:var(--fs-3)}

/* 바닥 */
.foot{margin-top:var(--sp-6);padding-block:var(--sp-5);border-top:1px solid var(--line);font-size:var(--fs-1);color:var(--ink2);display:grid;gap:var(--sp-2)}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-2);color:var(--ink)}
.foot p{margin:0} .foot .biz{display:flex;flex-wrap:wrap;gap:2px var(--sp-3)} .foot .cs b{color:var(--ink)}
.u-logo-img{display:block;height:32px;width:auto}

/* 폰 아래 탭 */
.tabbar{display:none}
@media (max-width:899px){
 .nav,.rank,.acct .pc{display:none} .top{grid-template-columns:auto 1fr;gap:var(--sp-2);padding-block:var(--sp-3) var(--sp-2)} .acct{justify-self:end}   /* 폰 머리 = 로고 + 로그인·회원가입·[충전] (11-10 시안) */
 .fj-logo b{font-size:var(--fs-7)} .fj-logo small{font-size:var(--fs-1)}
 .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--card);border-top:1px solid var(--line);padding:4px 0 calc(4px + env(safe-area-inset-bottom,0px))}
 .tabbar a{display:grid;justify-items:center;gap:2px;padding:4px 0;font-size:11px;color:var(--ink2)} .tabbar a[aria-current]{color:var(--accent-text);font-weight:700}
 .u-body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}

/* 검색칸 */
.u-paste .pic{color:var(--ink2);display:flex}
.u-paste.big{min-height:60px;border-width:2px;border-color:var(--ink)} .u-paste.big input{font-size:var(--fs-4)}
.jpq{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-2);color:var(--ink2);margin-top:var(--sp-2)}
.jpq b{font-weight:700;color:var(--ink);font-size:var(--fs-3)}
.lnk{background:none;border:0;padding:0 2px;color:var(--accent-text);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* 사이트 로고 4칸 */
.sites{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.sites a{display:flex;align-items:center;justify-content:center;height:56px;padding:8px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--card)}
.sites img{max-width:100%;max-height:36px;object-fit:contain}
@media (min-width:900px){ .sites{grid-template-columns:repeat(4,1fr)} .sites a{height:72px} .sites img{max-height:44px} }

/* 사진 격자 카드 — 모두 같은 규격: 사진(가격) · 상품명 2줄 … · 번역 1줄 … · 상품 상태 */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-2)}
@media (min-width:900px){ .grid{grid-template-columns:repeat(4,1fr);gap:var(--sp-5) var(--sp-3)} }
.g{display:grid;gap:5px;align-content:start;min-width:0;border-radius:var(--r-2)}
.g .ph{position:relative} .g .u-ph{width:100%;border-radius:var(--r-2)} .g .ph .pic{position:static;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r-2);padding:0;background:var(--ph)}
.g .ph .pr{position:absolute;left:6px;bottom:6px;background:rgba(31,42,46,.82);color:#fff;border-radius:var(--r-1);padding:2px 8px;font-weight:800;font-size:var(--fs-4)}
.g .ph img{position:absolute;left:6px;top:6px;height:14px;width:auto;background:#fff;padding:2px 4px}
.g .ph .sold{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(31,42,46,.55);color:#fff;font-weight:800;border-radius:var(--r-2)}
.g .jp{font-size:var(--fs-1);color:var(--ink2);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* 11-11 사장님: 일본어 원문 1줄 … */
.g .ko{font-size:var(--fs-3);line-height:1.45;height:2.9em;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* 한국어 이름 2줄 · 마우스 올리면 title 로 전체 */
.chip{justify-self:start;font-size:var(--fs-1);padding:1px 6px;border-radius:var(--r-1);background:var(--accent-wash);color:var(--accent-text);font-weight:700}

/* 접는 안내 상자 — 주의사항·반품·환불 안내 */
.fold{border:1px solid var(--line);border-radius:var(--r-2);background:var(--card)}
.fold>summary{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);min-height:48px;padding:0 var(--sp-4);font-size:var(--fs-4);font-weight:700;cursor:pointer;list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"펼치기";font-size:var(--fs-2);color:var(--accent-text);flex:none} .fold[open]>summary::after{content:"접기"}
.fold[open]>summary{border-bottom:1px solid var(--line)}
.fold .body{padding:var(--sp-3) var(--sp-4);display:grid;gap:var(--sp-3)}
.rules{display:grid;gap:var(--sp-3)} .rules h4{margin:0;font-size:var(--fs-3);font-weight:800}
.rules ul,.list-dot{margin:4px 0 0;padding-left:18px;display:grid;gap:4px;font-size:var(--fs-3)} .rules li::marker,.list-dot li::marker{color:var(--ink2)}
.more{font-size:var(--fs-2);font-weight:700;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

/* 표 */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-3)} .tbl th,.tbl td{padding:10px var(--sp-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font-size:var(--fs-2);color:var(--ink2);font-weight:700;border-bottom-color:var(--ink)} .tbl td.n,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tblw{overflow-x:auto}

/* 시트·어둡게 */
.dim{position:fixed;inset:0;background:rgba(31,42,46,.45);z-index:20}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--r-2);font-size:var(--fs-3);max-width:calc(100vw - 32px)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.m0{margin:0}

/* 약관·개인정보처리방침 */
.legal{max-width:820px} .legal h2{font-size:var(--fs-5);margin:var(--sp-5) 0 var(--sp-2)} .legal p,.legal li{font-size:var(--fs-3);line-height:1.75}
.legal ol{margin:0;padding-left:20px;display:grid;gap:4px} .legal .tbl th{width:30%;white-space:nowrap}

/* [바로 주문] 창 — 오른쪽 끝 탭 + 오른쪽 서랍(폰은 아래에서) */
.qtab{position:fixed;right:0;top:45%;z-index:14;writing-mode:vertical-rl;padding:var(--sp-3) 8px;border:0;border-radius:var(--r-2) 0 0 var(--r-2);background:var(--accent);color:var(--on-accent);font:inherit;font-size:var(--fs-2);font-weight:800;letter-spacing:.1em;cursor:pointer;box-shadow:var(--shadow-float)}
.qk{position:fixed;top:0;right:0;bottom:0;z-index:30;width:min(420px,100vw);background:var(--card);padding:var(--sp-4);display:grid;align-content:start;gap:var(--sp-3);overflow-y:auto;box-shadow:var(--shadow-float)}
.qk-h{display:flex;justify-content:space-between;align-items:center} .qk-h h2{font-size:var(--fs-6)} .qk-x{background:none;border:0;padding:var(--sp-2);cursor:pointer;color:var(--ink)}
.qk-it{display:grid;grid-template-columns:72px 1fr;gap:var(--sp-3);align-items:center;padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-2)} .qk-it img,.qk-it .u-ph{width:72px;height:72px;object-fit:cover;border-radius:var(--r-1)}
.qk-it b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--fs-3);line-height:1.45} .qk-it span{font-size:var(--fs-2);color:var(--ink2)} .qk-it em{font-style:normal;font-weight:700}
.qk-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);font-size:var(--fs-3)} .qk-row select{width:auto} .qk .u-btn.wide{width:100%}
#qkB{display:grid;gap:var(--sp-3)} .red{color:var(--red)}
@media (max-width:899px){ .qtab{top:auto;right:max(16px, env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));writing-mode:horizontal-tb;border-radius:999px;padding:10px var(--sp-4)}   /* 폰: 글을 가리지 않게 오른쪽 아래 둥근 단추 (10-27) */ .qk{top:auto;left:0;width:100%;max-height:88vh;border-radius:var(--r-4) var(--r-4) 0 0} }
.qk[hidden],.dim[hidden]{display:none}

/* 로그인·가입·결과 쪽 */
.auth{max-width:440px;margin:var(--sp-5) auto;display:grid;gap:var(--sp-3)} .auth h1{font-size:var(--fs-h);margin:0 0 var(--sp-2)}
.auth .fl{display:grid;gap:6px;font-size:var(--fs-2);color:var(--ink2)} .auth .fl b{color:var(--ink);font-size:var(--fs-3)}
.auth .u-btn{width:100%} .auth .alt{display:flex;justify-content:center;gap:var(--sp-4);font-size:var(--fs-2);color:var(--ink2)} .auth .alt a{text-decoration:underline;text-underline-offset:3px}
.agrees{display:grid;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-2)} .agrees label{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-3)} .agrees input{width:20px;height:20px;accent-color:var(--accent-text);margin:0;flex:none} .agrees .all{font-weight:800;padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)} .agrees a{margin-left:auto;font-size:var(--fs-2);color:var(--ink2);text-decoration:underline}
.result{max-width:520px;margin:var(--sp-6) auto;text-align:center;display:grid;gap:var(--sp-3);justify-items:center} .result .big{font-size:var(--fs-h);font-weight:800} .result .acts{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center}
/* 오른쪽 한 줄 (10-26 고고재팬처럼 · 11-10 왼쪽 줄 없앰, 오른쪽 6칸) — 넓은 PC 만. 본문(--page-w) 바깥 오른쪽, 칸 6개 전부 같은 크기로 화면 높이 꽉 (위아래 44px 똑같이) */
.rail{display:none}
@media (min-width:1540px){
 .rail{display:grid;grid-template-rows:repeat(6,1fr);position:fixed;top:44px;bottom:44px;z-index:12;width:150px;border:1px solid var(--line);background:var(--card)}
 .rail.r{right:calc(50% - var(--page-w) / 2 - 166px)}
 .rail a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;text-align:center;font-size:var(--fs-2);min-height:0}
 .rail a+a{border-top:1px solid var(--line)} .rail a:hover{background:var(--accent-wash)}
 .rail .ic.big{width:34px;height:34px;color:var(--accent-text);stroke-width:1.6} .rail a b{font-size:var(--fs-3)} .rail a span{color:var(--ink2);font-size:var(--fs-1);line-height:1.3}
}