/* Light theme – white + Japanese flag red (#BC002D) */
:root{--red:#BC002D;--red-dk:#8F0022;--red-bg:#FCEEF1;--ink:#1a1a1a;--ink2:#4a4a4a;--muted:#666;--line:#e3e3e3;--line2:#d0d0d0;--bg:#fff;--bg2:#fafafa;--zebra:#f7f7f7}
*{box-sizing:border-box}
body{font-family:-apple-system,"Segoe UI","Hiragino Sans","Noto Sans TC","Noto Sans KR","Noto Sans JP",sans-serif;margin:0;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-text-size-adjust:100%}
.inner{max-width:1200px;margin:auto;padding:0 20px}
a{color:var(--red);text-decoration:none}a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,th:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* header */
.top{background:#fff;border-top:4px solid var(--red);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;backdrop-filter:saturate(1.2) blur(6px)}
.top .inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.brand{font-weight:700;color:var(--red);font-size:18px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:10px}
.brand:hover{text-decoration:none}.brand .logo{width:32px;height:32px;display:block}
.lang a,.lang button{display:inline-block;background:#fff;color:var(--ink2);border:1px solid var(--line2);border-radius:999px;padding:4px 12px;margin-left:4px;font-size:13px;cursor:pointer}
.lang a:hover{text-decoration:none;border-color:var(--red);color:var(--red)}
.lang a.on,.lang button.on{background:var(--red);color:#fff;border-color:var(--red);font-weight:700}
/* headings */
h1{margin:22px 0 4px;font-size:26px;line-height:1.3;color:var(--ink);font-weight:800}
h1:before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--red);margin-right:10px;vertical-align:middle;position:relative;top:-2px}
h2{font-size:19px;margin:28px 0 10px;color:var(--ink);padding-bottom:6px;border-bottom:2px solid var(--red);display:inline-block}
.updated{margin:2px 0 6px;font-size:13px;color:var(--red-dk);font-weight:600}
.sub{color:var(--muted);font-size:13px}
.muted{color:var(--muted)}
/* breadcrumbs */
.crumbs{font-size:13px;color:var(--muted);margin-top:14px}.crumbs a{color:var(--ink2)}.crumbs a:hover{color:var(--red)}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap}.crumbs li+li:before{content:"›";margin:0 6px;color:#999}
.crumbs li[aria-current]{color:var(--ink);font-weight:600}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{background:#fff;border:1px solid var(--line2);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--ink2)}
.chip:hover{border-color:var(--red);color:var(--red);text-decoration:none}
.chip.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}.chip small{color:var(--muted);margin-left:5px}.chip.on small{color:#fff}
/* index cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin:12px 0}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);border-radius:10px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card h3{margin:0 0 4px;font-size:16px}.card h3 a{color:var(--ink)}.card h3 a:hover{color:var(--red)}
.card .stats{font-size:12px;color:var(--muted)}.card .smalls{margin-top:8px;font-size:13px;display:flex;flex-wrap:wrap;gap:4px 10px}
/* search / filter */
.bar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 8px}
input,select{background:#fff;color:var(--ink);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;font-size:14px;font-family:inherit}
input:focus,select:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px rgba(188,0,45,.12)}
input{flex:1;min-width:180px}input::placeholder{color:#8a8a8a}
/* ranking table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{position:sticky;top:0;background:var(--bg2);color:var(--ink2);text-align:left;padding:10px 8px;cursor:pointer;user-select:none;white-space:nowrap;border-bottom:2px solid var(--red);font-weight:700;font-size:13px}
th.nosort{cursor:default}
td{padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:top}
#tb tr.alt td{background:var(--zebra)}
#tb tr:hover td{background:var(--red-bg)}
td.rank{width:44px}
.rank{color:var(--ink2);font-weight:700}
#tb td.rank{text-align:center;padding-top:6px;padding-bottom:6px}
.rb{display:inline-block;min-width:26px;height:26px;line-height:24px;padding:0 4px;border-radius:13px;font-size:12.5px;border:1px solid var(--line2);background:#fff;color:var(--ink2)}
.rb.top{background:var(--red);border-color:var(--red);color:#fff}
#tb tr td.rank{font-variant-numeric:tabular-nums}
.name{font-weight:700;color:var(--ink)}
.score{font-weight:800;color:var(--red-dk)}.stars{position:relative;display:inline-block;font-size:12px;letter-spacing:1px;color:#ddd}
.stars i{position:absolute;left:0;top:0;overflow:hidden;color:var(--red);font-style:normal;white-space:nowrap}
.shopc{white-space:normal;min-width:160px}.shopc .cat{display:block;font-size:12px;color:var(--muted)}
.linkbtn{background:#fff;border:1px solid var(--red);color:var(--red);border-radius:999px;padding:0 8px;font-size:12px;cursor:pointer;margin-left:6px;font-family:inherit}
.linkbtn:hover{background:var(--red);color:#fff}
.empty{background:var(--bg2);border:1px dashed var(--line2);border-radius:12px;padding:28px;text-align:center;color:var(--ink2);margin:16px 0}
.empty b{display:block;color:var(--red);font-size:17px;margin-bottom:6px}
/* gate + modal */
.modal,.gate{position:fixed;inset:0;background:rgba(255,255,255,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal{background:rgba(26,26,26,.35)}
.modal[hidden],.gate[hidden]{display:none}
.modal-box,.gate-box{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;max-width:620px;width:100%;max-height:85vh;overflow:auto;padding:22px 24px;position:relative;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.gate-box{text-align:center;max-width:460px;border-top:5px solid var(--red);padding-top:28px}
.gate-box:before{content:"";display:block;width:44px;height:44px;border-radius:50%;background:var(--red);margin:0 auto 14px}
.gate-title{color:var(--ink);font-size:22px;font-weight:800;margin:4px 0 10px}.gate-box p{color:var(--ink2)}
.gate-btns{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.btn{background:#fff;color:var(--ink);border:1px solid var(--line2);border-radius:999px;padding:10px 20px;font-size:14px;cursor:pointer;display:inline-block;font-family:inherit}
.btn:hover{text-decoration:none;border-color:var(--ink2)}
.btn.primary{background:var(--red);color:#fff;border-color:var(--red);font-weight:700}.btn.primary:hover{background:var(--red-dk);border-color:var(--red-dk)}
.modal-x{position:absolute;right:12px;top:6px;background:none;border:0;color:var(--muted);font-size:26px;cursor:pointer}.modal-x:hover{color:var(--red)}
.fee{margin:10px 0 14px}.fee h4{margin:0 0 6px;color:var(--ink);font-size:14px}
.fee table{border:1px solid var(--line);border-radius:8px}.fee table td{padding:6px 10px}.fee table tr:nth-child(even) td{background:var(--zebra)}
.fee .note{white-space:pre-line;font-size:12.5px;color:var(--ink2);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-top:6px}
.kv{font-size:13px;color:var(--ink)}.kv span{color:var(--muted);margin-right:6px}
/* footer */
.foot{background:var(--bg2);border-top:1px solid var(--line);margin-top:44px;padding:22px 0 34px;font-size:12.5px;color:var(--muted)}
.foot p{margin:4px 0}.foot a{color:var(--ink2)}.foot a:hover{color:var(--red)}
.areanav h2{font-size:15px;margin:0 0 10px;color:var(--ink)}.areanav ul{margin:0 0 18px;padding-left:18px;columns:2 320px;column-gap:28px}
.areanav li{margin:0 0 6px;break-inside:avoid}.areanav li::marker{color:var(--red)}
/* misc */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:6px 10px;z-index:30}.skip:focus{left:8px}
.bar{display:flex}.linkbtn{display:inline-block}
tr[hidden]{display:none}
@media (max-width:640px){
 .inner{padding:0 14px}h1{font-size:21px}h2{font-size:17px}
 .top .inner{gap:8px}.brand{font-size:16px}.lang a{padding:3px 9px;margin-left:2px;font-size:12px}
 td,th{padding:7px 6px;font-size:13px}.bar select{flex:1 1 45%}
}
.smalls .sa{white-space:nowrap}.smalls .sa .muted{font-size:12px}
/* v4: sortable columns */
th .sortbtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:3px;color:inherit;font:inherit;white-space:nowrap}
th .sortbtn:after{content:"⇅";font-size:11px;color:#b5b5b5}
th .sortbtn:hover{color:var(--red)}th .sortbtn:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:3px}
th[aria-sort=ascending] .sortbtn,th[aria-sort=descending] .sortbtn{color:var(--red)}
th[aria-sort=ascending] .sortbtn:after{content:"▲";color:var(--red);font-size:10px}
th[aria-sort=descending] .sortbtn:after{content:"▼";color:var(--red);font-size:10px}
th.s-rank .sortbtn:after{content:"";}th.s-rank[aria-sort] .sortbtn:after{content:"▲"}
th{cursor:default}
td.cup{font-weight:700;color:var(--ink);text-align:center}th.s-cup{text-align:center}
.sortwrap{display:none;align-items:center;gap:8px;flex:1 1 100%;font-size:13px;color:var(--ink2);font-weight:600}
.sortwrap select{flex:1;border-color:var(--red)}
@media (max-width:760px){.sortwrap{display:flex}}
#ranking{scroll-margin-top:70px}.bar{scroll-margin-top:110px}
#tb td{background:#fff}
@media (max-width:760px){
 #rank th.s-rank,#rank td.rank{position:sticky;left:0;z-index:2;min-width:44px;width:44px}
 #rank th.s-name,#rank td.name{position:sticky;left:44px;z-index:2;box-shadow:6px 0 6px -6px rgba(0,0,0,.18)}
 #rank thead th.s-rank,#rank thead th.s-name{z-index:3}
 #rank td.name{white-space:normal;min-width:92px;max-width:110px;word-break:break-word}
}
/* Japan home: prefectures by region */
.regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 20px;margin:6px 0 10px}
.region h3{font-size:14px;margin:12px 0 0;color:var(--ink2)}.region .chips{margin:6px 0;gap:6px}
.chip.off{color:#aaa;border-style:dashed;cursor:default;background:#fff}
.areanav p{margin:0 0 18px}
/* per-language CJK font preference (correct glyph shapes for each script) */
html:lang(zh-Hans) body{font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Hiragino Sans GB",sans-serif}
html:lang(zh-Hant) body{font-family:-apple-system,"Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC","Noto Sans CJK TC",sans-serif}
html:lang(ko) body{font-family:-apple-system,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif}
/* ===== Japan home v2: hero, featured prefecture, region directory ===== */
.hero{display:flex;align-items:center;gap:20px;padding:34px 0 26px;border-bottom:1px solid var(--line);position:relative}
.hero:after{content:"";position:absolute;left:0;bottom:-1px;width:72px;height:3px;background:var(--red)}
.hero-logo{width:56px;height:56px;flex:none}
.hero h1{margin:0 0 6px;font-size:28px;letter-spacing:.01em}.hero h1:before{display:none}
.hero-intro{margin:0 0 6px;color:var(--ink2);font-size:15px;max-width:760px}
.hero .updated{margin:0}
.sec-h{display:flex;align-items:center;gap:10px;border:0;padding:0;margin:34px 0 14px;font-size:18px;letter-spacing:.04em}
.sec-h .dot{width:10px;height:10px;border-radius:50%;background:var(--red);flex:none}
.sec-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.legend{margin:0;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.legend .pill.mini{width:22px;height:12px;padding:0;margin-left:10px;display:inline-block}.legend .pill.mini:first-child{margin-left:0}
/* featured prefecture */
.feat{border:1px solid var(--line);border-radius:14px;padding:24px 26px 22px;background:linear-gradient(180deg,#fff 0,#fff 60%,var(--bg2) 100%);box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px rgba(188,0,45,.05);position:relative;overflow:hidden}
.feat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red)}
.feat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.feat-region{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:700}
.feat-name{margin:2px 0 0;font-size:34px;line-height:1.15;font-weight:800}.feat-name a{color:var(--ink)}.feat-name a:hover{color:var(--red);text-decoration:none}
.feat-ja{margin:2px 0 0;color:var(--muted);font-size:14px;letter-spacing:.2em}
.feat-stats{display:flex;gap:0;margin:0;border:1px solid var(--line);border-radius:10px;background:#fff}
.feat-stats div{padding:10px 20px;text-align:center;min-width:92px}.feat-stats div+div{border-left:1px solid var(--line)}
.feat-stats dd{margin:0;font-size:24px;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums;line-height:1.2}
.feat-stats dt{font-size:12px;color:var(--muted);order:2}
.feat-stats div{display:flex;flex-direction:column-reverse}
.feat-areas{list-style:none;padding:0;margin:20px 0 18px;display:flex;flex-wrap:wrap;gap:8px}
.feat-areas a{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border:1px solid var(--line2);border-radius:999px;background:#fff;color:var(--ink);font-size:13.5px;transition:border-color .15s,color .15s,background .15s}
.feat-areas a:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);text-decoration:none}
.feat-areas a span{font-size:11px;font-weight:700;color:#fff;background:var(--red);border-radius:999px;padding:0 6px;line-height:17px}
.feat-cta{display:inline-block;background:var(--red);color:#fff;font-weight:700;padding:10px 20px;border-radius:999px;font-size:14px}
.feat-cta:hover{background:var(--red-dk);text-decoration:none}
/* region directory */
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 40px}
.rcard{border:1px solid var(--line);border-radius:12px;padding:16px 16px 14px;background:#fff;position:relative;transition:box-shadow .2s,border-color .2s}
.rcard:before{content:"";position:absolute;left:16px;top:0;width:28px;height:3px;background:var(--line2);border-radius:0 0 2px 2px}
.rcard.has-live{border-color:#efc7d0}.rcard.has-live:before{background:var(--red)}
.rcard:hover{box-shadow:0 6px 18px rgba(0,0,0,.05)}
.rhead{display:flex;align-items:flex-start;gap:10px}
.rnum{font-size:12px;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums;letter-spacing:.05em;padding-top:4px}
.rcard:not(.has-live) .rnum{color:#b9b9b9}
.rhead h3{margin:0;font-size:16px;line-height:1.35}
.rja{margin:0;font-size:11.5px;color:var(--muted);letter-spacing:.15em}
.rbadge{margin-left:auto;font-size:11px;white-space:nowrap;color:#999;background:#f3f3f3;border-radius:999px;padding:2px 8px;margin-top:2px}
.rbadge.on{color:var(--red);background:var(--red-bg);font-weight:700}
.rmeta{margin:6px 0 10px 32px;font-size:11.5px;color:#999}
.pills{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:13px;background:#f5f5f5;color:#9a9a9a;border:1px solid #f5f5f5;cursor:default;line-height:1.5}
.pill.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:700;cursor:pointer}
a.pill.on:hover{background:var(--red-dk);border-color:var(--red-dk);text-decoration:none}
@media (max-width:1000px){.rgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
 .hero{padding:22px 0 18px;gap:14px;align-items:flex-start}.hero-logo{width:44px;height:44px}
 .hero h1{font-size:21px}.hero-intro{font-size:14px}
 .feat{padding:18px 16px 18px 20px}.feat-name{font-size:28px}
 .feat-head{flex-direction:column;align-items:stretch;gap:14px}
 .feat-stats div{flex:1;min-width:0;padding:8px 6px}.feat-stats dd{font-size:20px}
 .feat-cta{display:block;text-align:center}
 .rgrid{grid-template-columns:1fr;gap:10px}
 .sec-h{margin-top:26px}
}
.h1-sep{color:var(--line2);font-weight:300;margin:0 .35em}
.pill{color:#8a8a8a}
@media (max-width:640px){
 .hero-logo{display:none}
 .hero h1{font-size:22px}.h1-sep{display:none}.h1-sub{display:block;font-size:15px;color:var(--ink2);font-weight:600;margin-top:2px}
 .feat-areas{gap:6px}.feat-areas a{font-size:13px;padding:5px 11px}
}

/* CSP (style-src 'self'): no inline style attributes -> utility classes */
.mt10{margin-top:10px}
.stars i.w0{width:0%}.stars i.w1{width:1%}.stars i.w2{width:2%}.stars i.w3{width:3%}.stars i.w4{width:4%}.stars i.w5{width:5%}.stars i.w6{width:6%}.stars i.w7{width:7%}.stars i.w8{width:8%}.stars i.w9{width:9%}.stars i.w10{width:10%}.stars i.w11{width:11%}.stars i.w12{width:12%}.stars i.w13{width:13%}.stars i.w14{width:14%}.stars i.w15{width:15%}.stars i.w16{width:16%}.stars i.w17{width:17%}.stars i.w18{width:18%}.stars i.w19{width:19%}.stars i.w20{width:20%}.stars i.w21{width:21%}.stars i.w22{width:22%}.stars i.w23{width:23%}.stars i.w24{width:24%}.stars i.w25{width:25%}.stars i.w26{width:26%}.stars i.w27{width:27%}.stars i.w28{width:28%}.stars i.w29{width:29%}.stars i.w30{width:30%}.stars i.w31{width:31%}.stars i.w32{width:32%}.stars i.w33{width:33%}.stars i.w34{width:34%}.stars i.w35{width:35%}.stars i.w36{width:36%}.stars i.w37{width:37%}.stars i.w38{width:38%}.stars i.w39{width:39%}.stars i.w40{width:40%}.stars i.w41{width:41%}.stars i.w42{width:42%}.stars i.w43{width:43%}.stars i.w44{width:44%}.stars i.w45{width:45%}.stars i.w46{width:46%}.stars i.w47{width:47%}.stars i.w48{width:48%}.stars i.w49{width:49%}.stars i.w50{width:50%}.stars i.w51{width:51%}.stars i.w52{width:52%}.stars i.w53{width:53%}.stars i.w54{width:54%}.stars i.w55{width:55%}.stars i.w56{width:56%}.stars i.w57{width:57%}.stars i.w58{width:58%}.stars i.w59{width:59%}.stars i.w60{width:60%}.stars i.w61{width:61%}.stars i.w62{width:62%}.stars i.w63{width:63%}.stars i.w64{width:64%}.stars i.w65{width:65%}.stars i.w66{width:66%}.stars i.w67{width:67%}.stars i.w68{width:68%}.stars i.w69{width:69%}.stars i.w70{width:70%}.stars i.w71{width:71%}.stars i.w72{width:72%}.stars i.w73{width:73%}.stars i.w74{width:74%}.stars i.w75{width:75%}.stars i.w76{width:76%}.stars i.w77{width:77%}.stars i.w78{width:78%}.stars i.w79{width:79%}.stars i.w80{width:80%}.stars i.w81{width:81%}.stars i.w82{width:82%}.stars i.w83{width:83%}.stars i.w84{width:84%}.stars i.w85{width:85%}.stars i.w86{width:86%}.stars i.w87{width:87%}.stars i.w88{width:88%}.stars i.w89{width:89%}.stars i.w90{width:90%}.stars i.w91{width:91%}.stars i.w92{width:92%}.stars i.w93{width:93%}.stars i.w94{width:94%}.stars i.w95{width:95%}.stars i.w96{width:96%}.stars i.w97{width:97%}.stars i.w98{width:98%}.stars i.w99{width:99%}.stars i.w100{width:100%}
.m-name{margin:0 0 2px}.m-cat{font-size:13px}.m-info{margin:10px 0}.m-sum{margin:8px 0;color:#8a0020;font-weight:600}.m-fee-h{margin:14px 0 4px;color:#BC002D}.m-note-h{font-size:12px;margin-top:6px}