:root{--bg:#fff;--fg:#1d1d1f;--sub:#86868b;--line:#e5e5ea;--card:#f5f5f7;--green:#34c759;--red:#ff3b30;--orange:#ff9500;--blue:#007aff}
[hidden]{display:none!important}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{display:flex;justify-content:center}
.app{width:100%;max-width:440px;height:100dvh;display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 34px) 22px calc(env(safe-area-inset-bottom) + 12px)}
.brand{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--sub);display:flex;align-items:center;gap:6px}
.brand img{width:18px;height:18px;border-radius:5px}
a{color:var(--blue);text-decoration:none}
button{font:inherit;cursor:pointer}
/* 時計 */
#main{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;min-height:0}
.card{width:min(64vw,32dvh,260px);border-radius:24px;padding:16px 16px 12px;box-shadow:0 6px 24px rgba(0,0,0,.08),0 0 0 1px var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff}
.center{display:flex;flex-direction:column;align-items:center;gap:.6dvh}
#main.stale .card{opacity:.25}
.date{font-size:clamp(19px,5.8vw,25px);font-weight:600;color:var(--fg)}
.time{display:flex;align-items:baseline;font-variant-numeric:tabular-nums;line-height:1}
#hm{font-size:clamp(64px,22vw,104px);font-weight:200;letter-spacing:-.03em}
#sec{font-size:clamp(28px,9vw,42px);font-weight:300;color:var(--sub);margin-left:6px;width:1.3em}
.qr{width:100%;aspect-ratio:1;background:#fff}
.qr svg{display:block;width:100%;height:100%}
.code{white-space:nowrap;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:calc((min(64vw,32dvh,260px) - 34px) / 6.6);font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.status{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--sub)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.status.ok i{background:var(--green)}.status.bad i{background:var(--red)}
.foot{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--sub)}
/* 確認ページ */
.view{flex:1;width:100%;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:0}
.rcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.ricon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:600;color:#fff;background:var(--sub)}
.real .ricon{background:var(--green)}.fake .ricon{background:var(--red)}.notyet .ricon,.err .ricon{background:var(--orange)}
#rHead{font-size:28px;font-weight:700}
#rBody{display:flex;flex-direction:column;gap:6px;font-size:16px;line-height:1.5}
#rBody b{font-size:18px;font-weight:600}
#rBody small{font-size:13px;color:var(--sub)}
.code-sm{white-space:nowrap;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:22px;font-weight:600;letter-spacing:.06em}
#rRound{font-size:12px;color:var(--sub)}
.addr{background:var(--card);border-radius:14px;padding:12px 14px;text-align:center}
.addr p{font-size:12px;color:var(--sub)}
#addr{display:block;font-size:24px;font-weight:700;letter-spacing:.01em;margin:2px 0;color:var(--fg)}
.btns{display:flex;justify-content:center;gap:44px;font-size:15px}
.btns button{background:none;border:0;color:var(--blue)}
.adbox{width:100%;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:6px}
.adbox img{width:40px;height:40px;border-radius:10px}
.adbox div{flex:1;font-size:14px;font-weight:600;line-height:1.35}
.adbox small{display:block;font-weight:400;font-size:12px;color:var(--sub)}
.adbox a{font-size:13px;font-weight:600;background:var(--card);padding:7px 11px;border-radius:999px;white-space:nowrap}
.adlabel{font-size:10px;color:var(--sub);align-self:flex-start;margin-bottom:-10px}
h1{font-size:26px;font-weight:700;text-align:center}
form{display:flex;flex-direction:column;gap:12px}
label{font-size:13px;color:var(--sub);display:flex;flex-direction:column;gap:6px}
input{font:inherit;font-size:17px;border:0;background:var(--card);border-radius:12px;padding:13px 14px;color:var(--fg);width:100%;-webkit-appearance:none;appearance:none}
#inCode{white-space:nowrap;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:26px;font-weight:600;letter-spacing:.1em;text-align:center;text-transform:uppercase}
input.bad{box-shadow:0 0 0 2px var(--red)}
.row{display:flex;gap:10px}.row input{min-width:0}
.primary{background:var(--blue);color:#fff;border:0;border-radius:12px;padding:15px;font-size:17px;font-weight:600}
.primary:disabled{opacity:.6}
#mMsg{font-size:14px;color:var(--red);text-align:center;min-height:1.4em;line-height:1.5}
.pick{display:block;width:100%;text-align:left;background:var(--card);border:0;border-radius:12px;padding:13px 14px;font-size:17px;font-weight:600;margin-bottom:8px;color:var(--fg)}
.pick span{display:block;font-size:12px;font-weight:400;color:var(--sub)}
dialog{margin:auto;border:0;border-radius:18px;padding:20px;width:min(92vw,420px);max-height:86dvh;overflow:auto;color:var(--fg)}
dialog::backdrop{background:rgba(0,0,0,.3)}
dialog h2{font-size:20px;margin-bottom:10px}
dialog p{font-size:14px;line-height:1.6;margin-bottom:10px}
dialog code{font-size:11px;word-break:break-all;background:var(--card);padding:2px 4px;border-radius:4px;display:inline-block}
dialog .primary{width:100%;margin-top:4px}
.use{margin-top:6px;font-size:13px;line-height:1.5;color:var(--sub);text-align:center}
.lead{font-size:14px;line-height:1.6;color:var(--sub);text-align:center;margin-top:-6px}
.secondary{flex-direction:row;justify-content:center;align-items:center;background:var(--card);color:var(--blue);border-radius:12px;padding:14px;font-size:16px;font-weight:600;cursor:pointer}
.secondary.dis{opacity:.5;pointer-events:none}
.checking .ricon{background:var(--line);color:var(--sub)}
.use-page .brand{color:var(--sub);text-decoration:none}
.use-page h1{font-size:clamp(24px,7vw,30px);line-height:1.3}
.steps{list-style:none;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5}
.steps b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:14px}
a.primary{display:block;text-align:center;text-decoration:none}
.faq details{border-bottom:1px solid var(--line);padding:9px 2px}
.faq summary{font-size:14px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";color:var(--sub);flex:none}
.faq details[open] summary::after{content:"−"}
.faq p{font-size:13px;line-height:1.6;color:#555;margin-top:6px}
.usenav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:12px;padding-top:8px}
.use-page{overflow-y:auto}
.sitecopy{background:none;border:0;padding:6px 0;font-size:12px;color:var(--sub);display:flex;align-items:center;gap:4px}
.sitecopy::after{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27%3E%3Crect x=%279%27 y=%279%27 width=%2712%27 height=%2712%27 rx=%272%27/%3E%3Cpath d=%27M5 15V5a2 2 0 0 1 2-2h10%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27%3E%3Crect x=%279%27 y=%279%27 width=%2712%27 height=%2712%27 rx=%272%27/%3E%3Cpath d=%27M5 15V5a2 2 0 0 1 2-2h10%27/%3E%3C/svg%3E") center/contain no-repeat}

/* 多言語 */
.brand .ja-only{font-weight:400;margin-inline-start:4px}
html:not([lang=ja]) .ja-only{display:none!important}
.time,.code,.code-sm,#inCode,.addr strong,dialog code{direction:ltr;unicode-bidi:isolate}
[dir=rtl] #sec{margin-left:0;margin-right:0;margin-inline-start:6px}
[dir=rtl] .pick{text-align:right}
.langnav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;font-size:11px;padding:10px 0 4px;color:var(--sub)}
.langnav a{color:var(--sub)}.langnav b{color:var(--fg);font-weight:600}