*{box-sizing:border-box}
:root{--ink:#181a1b;--muted:#52565b;--line:#dbdddf;--amber:#ffb62e;color-scheme:light}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.55 Anuphan,system-ui,sans-serif}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.header{border-bottom:1px solid var(--line)}
.header-inner{max-width:1120px;margin:auto;padding:17px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center;min-height:44px}.logo img{width:127px;height:auto;display:block}
.back{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:.9rem;font-weight:600;text-decoration:none}
.back:hover,.foot a:hover{text-decoration:underline}
.back svg,.submit svg,.eyebtn svg{width:19px;height:19px;flex:none}
.layout{width:min(100% - 64px,1000px);margin:clamp(28px,5vh,64px) auto;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:24px}
.club-photo{position:relative;min-height:460px;isolation:isolate;overflow:hidden;background:#32352b;color:white}
.club-photo:before{content:"";position:absolute;inset:0;z-index:-2;background:url("/art/about-matcha-table.webp") 49% 55% / cover no-repeat}
.club-photo:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(12,18,12,.88),rgba(12,18,12,.55) 23%,transparent 60%)}
.club-copy{position:absolute;inset:auto 34px 36px}
.club-copy strong{display:block;letter-spacing:-.052em;font-size:clamp(2.3rem,4.5vw,3.75rem);line-height:1.07}
.club-copy p{margin:12px 0 0;max-width:27ch;line-height:1.6}
.panel{width:100%;max-width:540px;align-self:center;justify-self:center;padding:clamp(26px,3.8vw,52px)}
h1{font-size:clamp(1.65rem,3vw,2.1rem);line-height:1.3;margin:0;letter-spacing:-.035em}
.intro{margin:6px 0 18px;color:var(--muted);font-size:.94rem}
.switch{display:grid;grid-template-columns:1fr 1fr;background:#f2f3f3;border-radius:13px;padding:4px;gap:3px;margin:0 0 20px}
.switch a{text-align:center;text-decoration:none;display:grid;place-items:center;min-height:44px;border-radius:10px;font-weight:650;color:#4b4e51}
.switch a[aria-current]{color:var(--ink);background:white;box-shadow:0 1px 5px #15171824}
form{margin:0}
.field{margin-bottom:14px}
.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
label{font-size:.94rem;font-weight:650}
.help{display:block;color:var(--muted);margin:5px 0 0;font-size:.81rem;line-height:1.5}
.small-link{display:inline-flex;align-items:center;font-size:.87rem;min-height:34px}
.control{position:relative}
input{width:100%;min-width:0;border:1px solid #aeb2b5;border-radius:10px;background:white;color:var(--ink);padding:11px 13px;min-height:48px;font:inherit}
input:focus{outline:2px solid var(--ink);outline-offset:2px}
.eyebtn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:8px;background:none;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.control:has(.eyebtn:not([hidden])) input{padding-right:52px}
input[aria-invalid=true]{border-color:#ad3430}
[hidden]{display:none!important}
.submit,.provider,.copy{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:11px;min-height:48px;cursor:pointer;text-decoration:none;font:inherit;font-weight:700}
.submit{width:100%;background:var(--amber);color:var(--ink);margin-top:6px}
.submit:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.82rem;margin:18px 0 12px;text-align:center}
.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}
.providers{display:grid;gap:8px}
.copy{width:100%;background:#fff;color:var(--ink);border-color:#c8cbcd;min-height:44px;font-size:.94rem}
.copy:hover{background:#f5f6f6;border-color:#909398}
.provider{position:relative;display:flex;width:100%;min-height:46px;padding:8px 49px;line-height:1.4;text-align:center;font-size:.95rem;font-weight:600}
.provider-symbol{position:absolute;inset:0 auto 0 0;width:44px;display:grid;place-items:center}
.provider-symbol img{display:block;width:22px;height:22px;object-fit:contain}
.provider.line{background:#eefaf2;border-color:#75bb90;color:#143e27}
.provider.line .provider-symbol{background:#06c755;border-radius:10px 0 0 10px}
.provider.line img{width:33px;height:33px}
.provider.google{background:#fff;border-color:#747775;color:#1f1f1f}
.provider.google img{width:20px;height:20px}
.provider.tiktok{background:#000;border-color:#000;color:#fff}
.provider.tiktok img{width:32px;height:32px}
.provider.line:hover{background:#dff5e7}.provider.google:hover{background:#f8f9fa}.provider.tiktok:hover{box-shadow:inset 0 0 0 1px #747775}
.foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:19px;border-top:1px solid var(--line);padding-top:10px;color:var(--muted);font-size:.81rem}
.foot a{min-height:34px;display:inline-flex;align-items:center}
.notice{border-left:3px solid #b2332e;background:#fff4f3;color:#812820;padding:9px 12px;margin:0 0 14px}
.recovery-code{display:block;padding:14px;background:#f4f5f5;border:1px solid var(--line);border-radius:10px;font:600 1rem/1.6 ui-monospace,monospace;overflow-wrap:anywhere;user-select:all}
.copy{margin:8px 0 16px}.status:empty{display:none}
@media(max-width:760px){
 .header-inner{padding:8px 20px}.logo img{width:108px}
 .layout{display:block;width:100%;border:0;border-radius:0;margin:0}.club-photo{display:none}
 .panel{margin:auto;padding:24px 20px 20px}.intro{margin-bottom:16px}
}
@media(max-width:350px){.header-inner{padding-inline:14px}.panel{padding-inline:14px}}