body{font-family:system-ui,sans-serif;background:#f7f7f5;color:#222;margin:0}main{max-width:760px;margin:auto;padding:24px}section{background:white;border:1px solid #ddd;padding:20px;margin:20px 0;border-radius:12px}label{display:block;margin:12px 0}input,select,button{font:inherit;padding:8px;max-width:95%}button{cursor:pointer;margin:6px}pre{white-space:pre-wrap;overflow-wrap:anywhere}a{color:#174b96}
.original-image{max-width:100%;height:auto}

/* UI-01 official design: top page only (body.otk). Values come from the trial
   /try tokens.css / app.css / trial.css as copied in fixture/otokara-member-v22-*.
   Every rule is scoped to .otk / .otk-* so member.html and operator.html keep
   their current look. CSP allows only same-origin fonts, so Inter is not loaded. */
.otk{color-scheme:light;
  --c-bg:#ffffff;--c-ink:#222222;--c-ink-2:#555555;--c-surface:#f4f4f4;--c-surface-2:#e9e9e9;
  --c-line:#e2e2e2;--c-line-2:#c9c9c9;--c-brand:#e73b88;--c-brand-ink:#e73b88;--c-brand-hover:#d02c76;
  --c-brand-tint:#fdebf3;--c-white:#ffffff;
  --f-sans:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  --w-body:600;--w-bold:700;--w-black:700;
  --t-sm:.8125rem;--t-md:.9375rem;--t-base:1rem;--t-lg:1.125rem;--t-2xl:1.75rem;--lh-tight:1.3;--lh-body:1.7;
  --s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-12:48px;--gutter:20px;
  --r-xs:6px;--r-pill:999px;--ease-out:cubic-bezier(.2,.8,.2,1);--d-fast:140ms;--tap:48px}
body.otk{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--f-sans);font-weight:var(--w-body);
  font-size:var(--t-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.otk *,.otk *::before,.otk *::after{box-sizing:border-box}
.otk h1{margin:0;font-weight:var(--w-black);line-height:var(--lh-tight);letter-spacing:-.02em;text-wrap:balance}
/* fix6: <b>/<strong> default to font-weight:bolder (relative), so inside a 700 parent they computed to 900.
   Pin them to the explicit bold weight, the same base rule as the 体験版 (b, strong { font-weight: var(--w-bold) }). */
.otk :is(b,strong){font-weight:var(--w-bold)}
.otk :focus-visible{outline:3px solid var(--c-ink);outline-offset:2px;border-radius:6px}
.otk-wrap{width:100%;max-width:1200px;margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
/* Header (trial .hdr / .hdr--trial) */
.otk-hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--c-bg)}
.otk-hdr__in{display:flex;align-items:center;gap:var(--s-2);height:52px}
.otk-hdr__logo{display:flex;align-items:center;color:inherit}
.otk-lg{display:block;height:26px;width:auto;aspect-ratio:2598/1026;fill:var(--c-brand);overflow:visible}
/* Trial logo animation. The trial passes --i inline; CSP forbids that, so the
   character order is restated here with nth-child. */
.otk-lg-ch{transform-box:fill-box;transform-origin:50% 100%;animation:otkLgFlip 6s cubic-bezier(.25,.8,.3,1) infinite both;animation-delay:calc(var(--i,0) * 70ms)}
.otk-lg-ch:nth-child(2){--i:1}.otk-lg-ch:nth-child(3){--i:2}.otk-lg-ch:nth-child(4){--i:3}.otk-lg-ch:nth-child(5){--i:4}
.otk-lg-ch:nth-child(6){--i:5}.otk-lg-ch:nth-child(7){--i:6}.otk-lg-ch:nth-child(8){--i:7}.otk-lg-ch:nth-child(9){--i:8}
.otk-lg-ch:nth-child(10){--i:9}.otk-lg-ch:nth-child(11){--i:10}.otk-lg-ch:nth-child(12){--i:11}
@keyframes otkLgFlip{0%{transform:translateY(6%) skewX(-6deg) scaleY(0);opacity:0}3%{opacity:1}8%{transform:translateY(-1%) scaleY(1.04)}
  11%{transform:none;opacity:1}88%{transform:none;opacity:1}95%{transform:translateY(-4%) skewX(6deg) scaleY(0);opacity:0}
  100%{transform:translateY(6%) skewX(-6deg) scaleY(0);opacity:0}}
@media (prefers-reduced-motion:reduce){.otk-lg-ch{animation:none!important}}
.otk-badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-xs);background:var(--c-brand-tint);color:var(--c-brand-ink);font-size:11px;font-weight:var(--w-black);letter-spacing:.08em;white-space:nowrap}
/* Page body (trial #main / .stack / .page-head) */
.otk-main{max-width:1200px;padding-top:0;padding-bottom:var(--s-12)}
.otk-stack{display:grid;gap:var(--s-5);padding-block:var(--s-6) 0}
.otk-page-head{padding-block:var(--s-8) var(--s-5);display:grid;gap:var(--s-2)}
.otk-page-head h1{font-size:var(--t-2xl);letter-spacing:-.03em;word-break:keep-all;overflow-wrap:break-word}
.otk-entry{display:grid;gap:var(--s-3)}
/* Buttons (trial .btn) */
.otk-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--tap);padding:0 var(--s-6);border-radius:var(--r-pill);border:0;cursor:pointer;font-weight:var(--w-bold);font-size:var(--t-base);text-decoration:none;white-space:normal;text-align:center;line-height:1.35;transition:transform var(--d-fast) var(--ease-out),background-color var(--d-fast)}
.otk-btn:active{transform:scale(.98)}
.otk-btn--primary{background:var(--c-brand-ink);color:var(--c-white)}
.otk-btn--primary:hover{background:var(--c-brand-hover)}
.otk-btn--secondary{background:var(--c-bg);color:var(--c-ink);border:1.5px solid var(--c-line-2)}
.otk-btn--secondary:hover{border-color:var(--c-ink)}
.otk-btn--block{width:100%}
.otk-btn--lg{min-height:56px;font-size:17px}
@media (min-width:768px){.otk{--gutter:32px}.otk-stack{max-width:640px;margin-inline:auto}}
@media (min-width:1024px){.otk-hdr__in{height:60px}.otk-lg{height:30px}}

/* UI-01 step 2: member page (body.otk-member). Markup below the header is the
   existing member.html; only element/ID selectors are styled here so IDs, form
   fields, text and member.mjs behavior stay as they are. Values follow the trial
   .page-head / .dt-sec / .field / .input / .select / .check / .hint / .btn rules. */
.otk [hidden]{display:none!important}
.otk-form{max-width:calc(640px + var(--gutter) * 2)}
.otk-page-title{font-size:var(--t-2xl);letter-spacing:-.03em;padding-block:var(--s-8) var(--s-5)}
:is(.otk-member,.otk-operator) section{display:grid;gap:var(--s-3);margin:0;padding:var(--s-8) 0 var(--s-6);background:none;border:0;border-radius:0}
:is(.otk-member,.otk-operator) :is(section,dialog) h2{font-size:1.375rem;margin:0 0 var(--s-2)}
:is(.otk-member,.otk-operator) :is(section,dialog) h3{font-size:var(--t-lg);margin:var(--s-3) 0 0}
:is(.otk-member,.otk-operator) :is(section,dialog) p{margin:0;font-size:var(--t-md);color:var(--c-ink-2);line-height:1.6}
.otk-member #registration{display:grid;gap:var(--s-5);margin-top:var(--s-3);padding:var(--s-5);border-radius:12px;background:var(--c-surface)}
.otk-member #notice:empty{display:none}
.otk-member #age-warning:empty{display:none}
.otk-member #age-warning{color:var(--c-brand-ink);font-weight:var(--w-bold)}
/* Text fields (trial .field label + .input / .select) */
:is(.otk-member,.otk-operator) label{display:grid;gap:6px;margin:0;font-weight:var(--w-bold);font-size:var(--t-sm);color:var(--c-ink)}
:is(.otk-member,.otk-operator) label > input:not([type=checkbox]):not([type=file]),:is(.otk-member,.otk-operator) label > select{width:100%;max-width:none;height:52px;padding:0 var(--s-4);border-radius:8px;border:1.5px solid var(--c-line-2);background:var(--c-bg);font:inherit;font-size:16px;font-weight:var(--w-body);color:var(--c-ink)}
:is(.otk-member,.otk-operator) label > textarea{width:100%;max-width:none;min-height:120px;padding:var(--s-3) var(--s-4);border-radius:8px;border:1.5px solid var(--c-line-2);background:var(--c-bg);font:inherit;font-size:16px;font-weight:var(--w-body);color:var(--c-ink);resize:vertical}
:is(.otk-member,.otk-operator) label > input:focus,:is(.otk-member,.otk-operator) label > select:focus,:is(.otk-member,.otk-operator) label > textarea:focus{outline:none;border-color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)}
/* Lists and reply areas that post-launch branches add to these sections. */
:is(.otk-member,.otk-operator) :is(section,dialog) pre{margin:0;padding:var(--s-4);border-radius:8px;background:var(--c-surface);font-size:var(--t-sm);line-height:1.6}
:is(.otk-member,.otk-operator) :is(section,dialog) pre:empty{display:none}
:is(.otk-member,.otk-operator) :is(section,dialog) ul{display:grid;margin:0;padding:0;list-style:none}
:is(.otk-member,.otk-operator) :is(section,dialog) li{padding-block:var(--s-3);font-size:var(--t-md);overflow-wrap:anywhere}
:is(.otk-member,.otk-operator) :is(section,dialog) ul:empty{display:none}
:is(.otk-member,.otk-operator) label > input[type=file]{width:100%;max-width:none;padding:var(--s-3);border-radius:8px;border:1.5px dashed var(--c-line-2);background:var(--c-bg);font:inherit;font-size:var(--t-sm);font-weight:var(--w-body)}
:is(.otk-member,.otk-operator) label > input[type=file]::file-selector-button{margin-right:var(--s-3);min-height:40px;padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-ink);font:inherit;font-weight:var(--w-bold);cursor:pointer}
/* Checkbox rows (trial .check) */
/* The label text can contain a link, so keep it in normal inline flow and place
   the box in the trial's 24px gutter instead of using a grid. */
:is(.otk-member,.otk-operator) label:has(> input[type=checkbox]){display:block;position:relative;min-height:24px;padding-left:36px;font-weight:var(--w-body);line-height:1.6;cursor:pointer}
:is(.otk-member,.otk-operator) label > input[type=checkbox]{position:absolute;left:0;top:1px;width:22px;height:22px;margin:0;padding:0;accent-color:var(--c-ink)}
:is(.otk-member,.otk-operator) a{color:var(--c-brand-ink);font-weight:var(--w-bold);text-underline-offset:3px}
/* Buttons (trial .btn--secondary / .btn--primary / .btn--block). Submitting
   steps use the primary color; the cancellation stays a bordered button. */
:is(.otk-member,.otk-operator) :is(section,dialog) button{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:none;min-height:var(--tap);margin:0;padding:0 var(--s-6);border-radius:var(--r-pill);border:1.5px solid var(--c-line-2);background:var(--c-bg);color:var(--c-ink);font:inherit;font-weight:var(--w-bold);font-size:var(--t-base);line-height:1.35;text-align:center;white-space:normal;cursor:pointer;transition:transform var(--d-fast) var(--ease-out),background-color var(--d-fast)}
:is(.otk-member,.otk-operator) :is(section,dialog) button:hover{border-color:var(--c-ink)}
:is(.otk-member,.otk-operator) :is(section,dialog) button:active{transform:scale(.98)}
:is(.otk-member,.otk-operator) :is(section,dialog) button[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.otk-member #verify,.otk-member #register,.otk-member #apply,.otk-member #upload{border-color:transparent;background:var(--c-brand-ink);color:var(--c-white)}
.otk-member #verify:hover,.otk-member #register:hover,.otk-member #apply:hover,.otk-member #upload:hover{background:var(--c-brand-hover)}
.otk-member #cancel{color:var(--c-brand-ink);border-color:var(--c-brand-ink)}
/* Confirmed venue (trial .guide surface) */
.otk-member #venue-details{display:grid;gap:var(--s-2);padding:var(--s-5);border-radius:12px;background:var(--c-surface)}
.otk-member #venue-name{color:var(--c-ink);font-weight:var(--w-bold);font-size:var(--t-base)}
/* UI integration 2: event list, detail and application (trial .filters / .ev-card /
   .spec / .book-card / .confirm-list / .fine). Existing IDs stay unchanged;
   member.mjs renders the .otk-ev-card__* structure with public DTO text only
   (docs/ui-int2-events-apply.md). */
.otk-member .otk-ev{gap:var(--s-4)}
.otk-ev-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.otk-member .otk-ev__lead{font-size:var(--t-base)}
.otk-member .otk-ev h3{margin:0}
.otk-ev-filters{display:grid;gap:var(--s-3);padding-bottom:var(--s-4)}
.otk-ev-filters__row{display:grid;gap:var(--s-3)}
.otk-ev-search{position:relative}
.otk-member #event-search{padding-left:44px}
.otk-ev-search > .otk-ev-icon{position:absolute;left:14px;bottom:16px;color:var(--c-ink-2);pointer-events:none}
.otk-member #events-status{font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-ink)}
.otk-member #events-status:empty{display:none}
.otk-member .otk-ev-cards{gap:var(--s-3);border-top:0}
.otk-member .otk-ev-cards > li{display:grid;align-content:start;gap:6px;min-width:0;padding:var(--s-4);border:1.5px solid var(--c-line);border-radius:12px;background:var(--c-bg);color:var(--c-ink);font-size:var(--t-base);font-weight:var(--w-bold);line-height:1.5}
.otk-member .otk-ev-cards .otk-ev-card__open{display:grid;justify-content:stretch;gap:6px;min-height:0;padding:0;border:0;border-radius:0;background:none;color:inherit;text-align:left}
.otk-ev-card__title{font-size:var(--t-lg);line-height:1.4;overflow-wrap:anywhere}
.otk-ev-card__when{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--t-sm);color:var(--c-ink)}
.otk-ev-card__when > span{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow-wrap:anywhere}
.otk-ev-card__when .otk-ev-icon{width:16px;height:16px;color:var(--c-ink-2)}
.otk-member .otk-ev-spec{display:grid;grid-template-columns:7.5em minmax(0,1fr);margin:0}
.otk-member .otk-ev-spec:empty{display:none}
.otk-ev-spec > dt,.otk-ev-spec > dd{margin:0;padding-block:var(--s-3);line-height:1.5}
.otk-ev-spec > dt{padding-right:var(--s-3);font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-ink-2)}
.otk-ev-spec > dd{min-width:0;font-weight:var(--w-bold);overflow-wrap:anywhere}
.otk-ev-spec > dd:first-of-type{font-size:var(--t-lg)}
.otk-member .otk-ev-confirm > li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s-3);color:var(--c-ink-2);line-height:1.6}
.otk-ev-confirm .otk-ev-icon{margin-top:3px;color:var(--c-ink)}
.otk-ev-confirm b{color:var(--c-ink)}
.otk-member #apply,.otk-member #sheet-waitlist{min-height:56px;font-size:17px}
@media (min-width:768px){.otk-ev-filters__row{grid-template-columns:minmax(0,1fr) minmax(0,14em)}.otk-member .otk-ev-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Status line and the latest successful reply */
.otk-operator #status{margin:var(--s-6) 0 0;padding:var(--s-3) var(--s-4);border-radius:8px;border:1.5px solid var(--c-brand);background:var(--c-brand-tint);color:var(--c-ink);font-size:var(--t-sm);line-height:1.6}
:is(.otk-member,.otk-operator) #status:empty{display:none}
/* UI integration 3: documents, my page, participation history, FAQ and support
   (trial .kyc-card / .pf-* / .faq / .sup-*). Existing control IDs stay unchanged;
   member.mjs fills the read-only mypage only after authentication
   (docs/ui-int3-docs-mypage-faq.md). */
.otk-member :is(.otk-kyc,.otk-pf,.otk-hist,.otk-faq,.otk-sup) h3{margin:0}
.otk-member :is(.otk-kyc,.otk-sup,.otk-faq) .otk-icon{width:20px;height:20px}
.otk-member .otk-kyc > .otk-lead{color:var(--c-ink);font-size:var(--t-base)}
.otk-kyc-card,.otk-sup-card{display:grid;gap:var(--s-4);padding:var(--s-5);border:1px solid var(--c-line-2);border-radius:12px;background:var(--c-bg)}
.otk-kyc-card__st{display:flex;align-items:center;gap:var(--s-3)}
.otk-kyc-card__st > div{display:grid;gap:2px;min-width:0}
.otk-badge-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--c-surface);color:var(--c-ink)}
.otk-member .otk-badge-ic .otk-icon{width:24px;height:24px}
.otk-member .otk-kyc-row{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:8px;background:var(--c-surface);color:var(--c-ink)}
.otk-member .otk-kyc-row--warn{border:1.5px solid var(--c-brand);background:var(--c-brand-tint);font-weight:var(--w-bold)}
.otk-kyc-row .otk-icon{margin-top:2px}
.otk-kyc-row--warn .otk-icon{color:var(--c-brand-ink)}
.otk-pf-head{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5);border:1px solid var(--c-line);border-radius:16px}
.otk-pf-head > div{display:grid;min-width:0}
.otk-pf-av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--c-surface-2);color:#a3a3a3}
.otk-member .otk-pf-av .otk-icon{width:32px;height:32px}
.otk-member .otk-pf-lb{font-size:var(--t-sm)}
.otk-member .otk-pf-name{color:var(--c-ink);font-size:1.5rem;font-weight:var(--w-black);line-height:1.3;overflow-wrap:anywhere}
.otk-pf-sec{display:grid;gap:var(--s-3);min-width:0}
.otk-member .otk-pf-text{padding:var(--s-5);border-radius:12px;background:var(--c-surface);color:var(--c-ink);font-size:var(--t-base);line-height:1.85;white-space:pre-line;overflow-wrap:anywhere}
.otk-pf-music{padding:var(--s-5);border-radius:16px;background:var(--c-brand-tint)}
.otk-pf-grp{display:grid;gap:10px;min-width:0}
.otk-pf-grp h4{margin:0;font-size:var(--t-md);color:var(--c-ink-2)}
.otk-pf-tags{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.otk-pf-tag{display:inline-flex;align-items:center;min-height:36px;max-width:100%;padding:4px 14px;border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-ink);font-size:var(--t-md);font-weight:var(--w-bold);overflow-wrap:anywhere}
.otk-pf-music .otk-pf-tag{min-height:40px;background:var(--c-bg)}
.otk-pf-tags--line .otk-pf-tag{border:1.5px solid var(--c-brand-ink);background:transparent;color:var(--c-brand-ink)}
.otk-member #profile-status:empty{display:none}
/* Empty profile fields are not shown (trial: 未入力の項目は表示されません). */
.otk-pf-sec:has(> .otk-pf-text:empty),.otk-pf-sec:has(> .otk-pf-tags:empty),.otk-pf-grp:has(> .otk-pf-tags:empty),.otk-pf-music:not(:has(.otk-pf-tags:not(:empty))){display:none}
.otk-member .otk-hist__counts{padding:var(--s-4);border:1px solid var(--c-line);border-radius:12px;color:var(--c-ink);font-size:var(--t-base);font-weight:var(--w-bold);font-variant-numeric:tabular-nums}
.otk-member .otk-hist__counts:empty{display:none}
.otk-faq-filters{display:grid;gap:var(--s-3)}
.otk-faq-search{position:relative}
.otk-member #faq-search{padding-left:44px}
.otk-faq-search > .otk-icon{position:absolute;left:14px;bottom:16px;color:var(--c-ink-2);pointer-events:none}
.otk-member #faq-status{color:var(--c-ink);font-size:var(--t-sm);font-weight:var(--w-bold)}
/* FAQ accordion — the 体験版 .faq (events-mock css/app.css): summary = [Q][question][chevron] on one 3-column
   grid row, the answer indented under the question. Q and the chevron are elements of their own (faq.mjs). */
.otk-member .otk-faq-list{display:grid;gap:var(--s-1);align-content:start}
.otk-member .otk-faq-list details{margin:0;padding:0}
.otk-member .otk-faq-list summary{display:grid;grid-template-columns:24px minmax(0,1fr) 20px;gap:var(--s-2);align-items:center;list-style:none;min-height:44px;margin:0;padding-block:var(--s-4);cursor:pointer;font-size:var(--t-base);font-weight:var(--w-bold);overflow-wrap:anywhere}
.otk-member .otk-faq-list summary::-webkit-details-marker{display:none}
.otk-faq-q{color:var(--c-brand-ink);font-weight:var(--w-black)}
.otk-faq-tx{min-width:0}
.otk-faq-arrow{width:9px;height:9px;justify-self:center;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease-out)}
.otk-member .otk-faq-list details[open] > summary .otk-faq-arrow{transform:translateY(2px) rotate(-135deg)}
.otk-member .otk-faq-list .faq-answer{margin:0;padding:0 0 var(--s-4) 32px;color:var(--c-ink-2);font-size:var(--t-md)}
.otk-member .otk-faq-list .otk-faq-note{margin:0 0 var(--s-4) 32px}
@media (prefers-reduced-motion:reduce){.otk-faq-arrow{transition:none}}
.otk-sup-block{display:grid;gap:var(--s-3);padding-top:var(--s-5)}
.otk-member #support-send{border-color:transparent;background:var(--c-brand-ink);color:var(--c-white)}
.otk-member #support-send:hover{background:var(--c-brand-hover)}
.otk-member .otk-sup-items > li{padding:0}
.otk-member .otk-sup-items > li > button{justify-content:space-between;gap:var(--s-3);min-height:64px;padding:var(--s-3) 0;border:0;border-radius:0;background:none;font-size:var(--t-md);text-align:left;overflow-wrap:anywhere}
.otk-member .otk-sup-items > li > button::after{content:"›";content:"›" / "";flex:none;font-size:24px;line-height:1}
.otk-member #support-state{color:var(--c-ink);font-weight:var(--w-bold)}
.otk-member #support-state:empty{display:none}
.otk-member #support-replies{display:grid;gap:var(--s-2)}
.otk-member #support-replies:empty{display:none}
.otk-member .otk-sup pre{font-family:inherit}
.otk-member .otk-sup-reply{display:grid;gap:4px;padding:var(--s-4);border-left:3px solid var(--c-brand);border-radius:8px;background:var(--c-brand-tint)}
.otk-member .otk-sup-reply__head{font-size:var(--t-sm);font-weight:var(--w-bold)}
.otk-member :is(.otk-sup-reply__body,.otk-sup-original){color:var(--c-ink);white-space:pre-wrap;overflow-wrap:anywhere}
.otk-member .otk-sup-original{padding:var(--s-4);border-radius:8px;background:var(--c-surface)}
.otk-member .otk-sup-original:empty{display:none}
/* TRIAGE_INQUIRY: a genre carried over from よくある質問 is shown as fixed text in the field's place (label style
   for the name, a read-only value box like the original message box); the FAQ's proceed block is spaced by whitespace. */
.otk-sup-genre{display:grid;gap:6px}
.otk-member .otk-sup-genre__k{font-weight:var(--w-bold);font-size:var(--t-sm);color:var(--c-ink)}
.otk-member .otk-sup-genre__v{display:flex;align-items:center;min-height:var(--tap);padding:var(--s-2) var(--s-4);border-radius:8px;background:var(--c-surface);color:var(--c-ink);font-weight:var(--w-bold);overflow-wrap:anywhere}
.otk-member .otk-faq-contact{display:grid;gap:var(--s-3);padding-top:var(--s-6)}
.otk-member .otk-faq-contact .otk-fine{margin:0}
@media (min-width:768px){.otk-faq-filters{grid-template-columns:minmax(0,14em) minmax(0,1fr)}}


/* Operator rework (docs/pm-operator-rework.md): three tabs (やること / イベント / 問い合わせ),
   list → detail → operate in place, following the approved mock (operator-mock/index.html).
   operator.mjs renders every view into #op-view with these classes only (CSP: no inline style). */
html:has(> body.otk-operator){scroll-padding-top:120px}
.otk-operator .otk-op-wrap{width:100%;max-width:720px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.otk-operator .otk-op-hdr__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:52px}
.otk-operator .otk-op-brand{color:var(--c-ink);font-size:1.125rem;font-weight:var(--w-black);letter-spacing:.02em;white-space:nowrap;text-decoration:none}
.otk-operator .otk-op-auth{display:flex;align-items:center;gap:6px;min-width:0;margin:0;color:var(--c-ink-2);font-size:var(--t-sm);white-space:nowrap}
.otk-operator .otk-op-auth::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c-line-2)}
.otk-operator .otk-op-auth[data-state="ok"]::before{background:#1e7d3a}
.otk-operator .otk-op-auth[data-state="error"]::before{background:#c62828}
.otk-operator .otk-op-auth[data-state="error"]{color:#c62828;font-weight:var(--w-bold)}
.otk-operator .otk-op-auth__mail{overflow:hidden;text-overflow:ellipsis;min-width:0}
.otk-operator .otk-op-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.otk-operator .otk-op-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.otk-operator .otk-op-tabs a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:50px;padding:0 2px;border-bottom:3px solid transparent;color:var(--c-ink-2);font-size:var(--t-base);font-weight:var(--w-bold);text-decoration:none;white-space:nowrap}
.otk-operator .otk-op-tabs a[aria-current="page"]{color:var(--c-ink);border-bottom-color:var(--c-brand)}
.otk-operator .otk-op-main{max-width:720px;margin:0 auto;padding:var(--s-4) max(16px,env(safe-area-inset-right,0px)) 120px max(16px,env(safe-area-inset-left,0px))}
.otk-operator .otk-op-authbox{display:grid;gap:var(--s-3);margin:0 0 var(--s-4);padding:var(--s-4);border-radius:12px;border:1.5px solid var(--c-line-2);background:var(--c-surface)}
.otk-operator .otk-op-authbox[data-state="error"]{border-color:#c62828;background:#fdeded}
.otk-operator .otk-op-authbox p{margin:0;font-weight:var(--w-bold);line-height:1.6}
.otk-operator .otk-op-authbox #connect{justify-self:start;min-height:44px;margin:0;padding:0 var(--s-5);border-radius:var(--r-pill);border:1.5px solid var(--c-ink);background:var(--c-bg);color:var(--c-ink);font:inherit;font-weight:var(--w-bold);max-width:none;cursor:pointer}
.otk-operator .otk-op-authbox #connect[disabled]{opacity:.5;cursor:not-allowed}
/* page heads, hints, headings */
.otk-operator .otk-op-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-3);margin:4px 0 var(--s-3)}
.otk-operator .otk-op-head h1{flex:1 1 auto;min-width:0;font-size:1.35rem;line-height:1.35;overflow-wrap:anywhere}
.otk-operator .otk-op-head__tools{display:flex;gap:var(--s-2)}
.otk-operator .otk-op-back{display:inline-flex;align-items:center;min-height:44px;margin:-6px 0 2px;color:var(--c-ink-2);font-size:var(--t-md);text-decoration:none}
.otk-operator .otk-op-back:hover{color:var(--c-ink)}
.otk-operator .otk-op-hint{margin:0 0 var(--s-3);color:var(--c-ink-2);font-size:var(--t-sm);line-height:1.6}
.otk-operator .otk-op-h2{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-6) 0 var(--s-2);font-size:1.02rem}
.otk-operator .otk-op-muted{color:var(--c-ink-2);font-weight:var(--w-body);font-size:var(--t-sm)}
.otk-operator .otk-op-nowrap{white-space:nowrap}
.otk-operator .otk-op-pre{white-space:pre-wrap;font-weight:var(--w-body)}
/* rows: the whole row is one link */
.otk-operator .otk-op-list{margin:0;padding:0;list-style:none;border:1px solid var(--c-line);border-radius:12px;overflow:hidden}
.otk-operator .otk-op-row{display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-3) 14px;color:inherit;font-weight:inherit;text-decoration:none}
.otk-operator .otk-op-row:hover{background:var(--c-surface)}
.otk-operator .otk-op-row__main{display:grid;gap:2px;flex:1;min-width:0}
.otk-operator .otk-op-row__t{font-weight:var(--w-bold);line-height:1.4;overflow-wrap:anywhere}
.otk-operator .otk-op-row__s{color:var(--c-ink-2);font-size:var(--t-sm);font-weight:var(--w-body);overflow-wrap:anywhere}
.otk-operator .otk-op-row__meta{display:flex;flex:none;flex-direction:column;align-items:flex-end;gap:4px;color:var(--c-ink-2);font-size:var(--t-sm);text-align:right;white-space:nowrap}
.otk-operator .otk-op-row__meta b{color:var(--c-ink)}
.otk-operator .otk-op-row__date{font-variant-numeric:tabular-nums}
.otk-operator .otk-op-row__chev{flex:none;color:var(--c-line-2);font-size:1.3rem}
.otk-operator .otk-op-row.is-dim .otk-op-row__t{color:var(--c-ink-2)}
.otk-operator .otk-op-empty{margin:0;padding:22px 14px;border:1px dashed var(--c-line-2);border-radius:12px;color:var(--c-ink-2);text-align:center}
.otk-operator .otk-op-empty--error{border-color:#c62828;color:#c62828}
/* chips and badges */
.otk-operator .otk-op-chip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--r-pill);font-size:.75rem;font-weight:var(--w-bold);line-height:1.6;white-space:nowrap}
.otk-operator .otk-op-chip--green{background:#e6f4ea;color:#1f7a3f}
.otk-operator .otk-op-chip--blue{background:#e7eefb;color:#1d4fa3}
.otk-operator .otk-op-chip--amber{background:#fdf1d8;color:#8a5a00}
.otk-operator .otk-op-chip--red{background:#fbe9e7;color:#b3261e}
.otk-operator .otk-op-chip--gray{background:#ececec;color:#555}
.otk-operator .otk-op-chip--ink{background:var(--c-ink);color:var(--c-white)}
.otk-operator .otk-op-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:var(--r-pill);background:var(--c-ink);color:var(--c-white);font-size:.8rem;font-weight:var(--w-black)}
.otk-operator .otk-op-badge--zero{background:#ececec;color:var(--c-ink-2)}
/* cards and key/value */
.otk-operator .otk-op-card{padding:14px var(--s-4);border:1px solid var(--c-line);border-radius:12px}
.otk-operator .otk-op-card + .otk-op-card{margin-top:var(--s-3)}
.otk-operator .otk-op-card--row{display:flex;align-items:center;gap:var(--s-3)}
.otk-operator .otk-op-card--row > div{flex:1;min-width:0;overflow-wrap:anywhere}
.otk-operator .otk-op-kv{display:grid;grid-template-columns:7em minmax(0,1fr);gap:6px var(--s-3);margin:0}
.otk-operator .otk-op-kv dt{color:var(--c-ink-2);font-size:var(--t-sm)}
.otk-operator .otk-op-kv dd{margin:0;font-weight:var(--w-bold);overflow-wrap:anywhere}
.otk-operator .otk-op-quote{margin:0;padding:var(--s-3) 14px;border-radius:8px;background:var(--c-surface);color:var(--c-ink);white-space:pre-wrap;overflow-wrap:anywhere}
/* submitted documents */
.otk-operator .otk-op-docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--s-3)}
.otk-operator .otk-op-doc{display:grid;gap:var(--s-2);align-content:start;margin:0;padding:var(--s-3);border:1.5px dashed var(--c-line-2);border-radius:12px;background:#fafafa}
.otk-operator .otk-op-doc figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:var(--w-bold)}
.otk-operator .otk-op-doc__img{display:block;max-width:100%;height:auto;border-radius:8px;background:var(--c-bg)}
.otk-operator .otk-op-doc__note{color:var(--c-ink-2);font-size:var(--t-sm)}
.otk-operator .otk-op-docs + .otk-op-hint{margin-top:var(--s-2)}
/* buttons */
.otk-operator .otk-op-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:none;min-height:52px;margin:0;padding:0 var(--s-5);border-radius:10px;border:1.5px solid var(--c-ink);background:var(--c-ink);color:var(--c-white);font:inherit;font-size:var(--t-base);font-weight:var(--w-bold);text-decoration:none;cursor:pointer}
.otk-operator .otk-op-btn:hover{background:#000}
.otk-operator .otk-op-btn--sec{background:var(--c-bg);color:var(--c-ink);border-color:var(--c-line-2)}
.otk-operator .otk-op-btn--sec:hover{background:var(--c-bg);border-color:var(--c-ink)}
.otk-operator .otk-op-btn--danger{background:#b3261e;border-color:#b3261e;color:var(--c-white)}
.otk-operator .otk-op-btn--danger:hover{background:#8f1d17}
.otk-operator .otk-op-btn--danger-line{background:var(--c-bg);color:#b3261e;border-color:#e7b3ae}
.otk-operator .otk-op-btn--danger-line:hover{background:var(--c-bg);border-color:#b3261e}
.otk-operator .otk-op-btn--sm{min-height:44px;padding:0 14px;font-size:var(--t-md)}
.otk-operator .otk-op-btn[disabled]{opacity:.4;cursor:not-allowed}
.otk-operator .otk-op-actions{display:grid;gap:10px;margin:var(--s-5) 0 0}
.otk-operator .otk-op-actions--two{grid-template-columns:1fr 1fr}
@media (min-width:600px){.otk-operator .otk-op-actions--stack{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
/* forms */
.otk-operator .otk-op-form{display:grid;gap:14px}
.otk-operator .otk-op-field{display:grid;gap:6px}
.otk-operator .otk-op-opt{color:var(--c-ink-2);font-size:.8rem;font-weight:var(--w-body)}
.otk-operator .otk-op-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--s-3)}
.otk-operator .otk-op-fieldset{display:grid;gap:var(--s-3);margin:0;padding:var(--s-3) var(--s-4) var(--s-4);border:1px solid var(--c-line);border-radius:12px}
.otk-operator .otk-op-fieldset legend,.otk-operator .otk-op-checks legend{padding:0 4px;font-weight:var(--w-bold);font-size:var(--t-sm)}
.otk-operator .otk-op-fieldset legend .otk-op-opt{margin-left:8px}
.otk-operator .otk-op-checks{display:grid;gap:var(--s-2);margin:0;padding:var(--s-3) var(--s-4);border:1px solid var(--c-line);border-radius:12px}
.otk-operator .otk-op-panel{display:grid;gap:var(--s-3);margin:var(--s-4) 0 0;padding:var(--s-4);border:1.5px solid var(--c-ink);border-radius:12px}
.otk-operator .otk-op-panel h3{margin:0;font-size:var(--t-base)}
.otk-operator .otk-op-panel .otk-op-actions{margin-top:var(--s-2)}
.otk-operator .otk-op-radios{display:grid;gap:var(--s-2)}
.otk-operator label.otk-op-radio{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 14px;border:1.5px solid var(--c-line-2);border-radius:10px;font-weight:var(--w-body);font-size:var(--t-base);cursor:pointer}
.otk-operator label.otk-op-radio:has(input:checked){border-color:var(--c-ink);background:var(--c-surface)}
.otk-operator label.otk-op-radio > input{flex:none;width:20px;height:20px;margin:0;padding:0;accent-color:var(--c-ink)}
.otk-operator .otk-op-disclosure{margin:0 0 var(--s-4)}
.otk-operator .otk-op-disclosure summary{min-height:44px;padding:10px 0;font-weight:var(--w-bold);cursor:pointer}
.otk-operator .otk-op-disclosure .otk-op-panel{margin-top:var(--s-2)}
/* attendance */
.otk-operator .otk-op-att{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);padding:var(--s-3) 14px}
.otk-operator .otk-op-att__main{display:grid;flex:1 1 10em;min-width:0}
.otk-operator .otk-op-seg{display:inline-grid;grid-template-columns:repeat(3,auto);flex:none;border:1.5px solid var(--c-line-2);border-radius:10px;overflow:hidden}
.otk-operator .otk-op-seg__btn{min-height:44px;min-width:64px;margin:0;padding:0 10px;border:0;border-radius:0;background:var(--c-bg);color:var(--c-ink);font:inherit;font-size:var(--t-md);font-weight:var(--w-bold);max-width:none;cursor:pointer}
.otk-operator .otk-op-seg__btn + .otk-op-seg__btn{border-left:1.5px solid var(--c-line-2)}
.otk-operator .otk-op-seg__btn[aria-pressed="true"]{background:var(--c-ink);color:var(--c-white)}
.otk-operator .otk-op-seg__btn[disabled]{opacity:.5;cursor:not-allowed}
/* inquiry filters and thread */
.otk-operator .otk-op-filters{display:flex;gap:var(--s-2);margin:0 0 var(--s-3);padding-bottom:2px;overflow-x:auto}
.otk-operator .otk-op-fchip{flex:none;min-height:40px;max-width:none;margin:0;padding:0 14px;border:1.5px solid var(--c-line-2);border-radius:var(--r-pill);background:var(--c-bg);color:var(--c-ink);font:inherit;font-size:var(--t-md);font-weight:var(--w-bold);white-space:nowrap;cursor:pointer}
.otk-operator .otk-op-fchip[aria-pressed="true"]{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-white)}
.otk-operator .otk-op-filters--wrap{flex-wrap:wrap;overflow-x:visible}
.otk-operator .otk-op-msg{margin:var(--s-3) 0 0;padding:10px 14px;border:1px solid var(--c-line);border-radius:10px}
.otk-operator .otk-op-msg--them{border-color:transparent;background:var(--c-surface)}
.otk-operator .otk-op-msg__who{color:var(--c-ink-2);font-size:.8rem}
.otk-operator .otk-op-msg p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.otk-operator .otk-op-msg + .otk-op-form,.otk-operator .otk-op-msg + .otk-op-hint{margin-top:var(--s-5)}
/* TRIAGE_CS: AI reply draft (read-only, never sent) — its own dashed outline marks it as not a message */
.otk-operator .otk-op-draft{margin:var(--s-5) 0 0;padding:10px 14px;border:1.5px dashed var(--c-line-2);border-radius:10px;background:var(--c-bg)}
.otk-operator .otk-op-draft[data-classification="escalation"]{border-color:#c62828}
.otk-operator .otk-op-draft p{margin:var(--s-2) 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.otk-operator .otk-op-draft__class{font-weight:var(--w-bold)}
.otk-operator .otk-op-draft[data-classification="escalation"] .otk-op-draft__class{color:#b3261e}
.otk-operator .otk-op-draft__note,.otk-operator .otk-op-draft__src{color:var(--c-ink-2);font-size:var(--t-sm)}
.otk-operator .otk-op-draft + .otk-op-form,.otk-operator .otk-op-draft + .otk-op-hint{margin-top:var(--s-5)}
.otk-operator .otk-op-receipt{white-space:nowrap}
/* result line (successor of .otk-adm-card-status), toast and confirmation sheet */
.otk-operator .otk-op-line{margin:var(--s-4) 0 0;padding:var(--s-3) var(--s-4);border-radius:8px;border:1.5px solid var(--c-line-2);background:var(--c-surface);color:var(--c-ink);font-size:var(--t-md);font-weight:var(--w-bold);line-height:1.6;overflow-wrap:anywhere}
.otk-operator .otk-op-line:empty{display:none}
.otk-operator .otk-op-line[data-state="ok"]{border-color:#1e7d3a;background:#eaf6ee}
.otk-operator .otk-op-line[data-state="error"]{border-color:#c62828;background:#fdeded}
.otk-operator .otk-op-line[data-state="ok"]::before{content:"✓ ";color:#1e7d3a}
.otk-operator .otk-op-line[data-state="error"]::before{content:"✕ ";color:#c62828}
.otk-operator .otk-op-view > .otk-op-line:first-child{margin:0 0 var(--s-4)}
/* Deep link arrival (TRIAGE_DEEPLINK): the linked item's card is outlined and tinted for a few seconds, then fades. */
.otk-operator .otk-op-doc,.otk-operator .otk-op-card,.otk-operator .otk-op-msg{outline:2px solid transparent;outline-offset:3px;transition:outline-color .8s ease,background-color .8s ease}
.otk-operator .otk-op-arrived{outline-color:var(--c-brand);background-color:var(--c-brand-tint)}
@media (prefers-reduced-motion:reduce){.otk-operator .otk-op-doc,.otk-operator .otk-op-card,.otk-operator .otk-op-msg{transition:none}}
.otk-operator .otk-op-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;width:max-content;max-width:min(560px,calc(100% - 24px));padding:14px 18px;border-radius:12px;background:var(--c-ink);color:var(--c-white);font-weight:var(--w-bold);line-height:1.5;box-shadow:0 8px 28px rgba(0,0,0,.22);transform:translateX(-50%)}
.otk-operator .otk-op-toast[data-state="ok"]::before{content:"✓ ";color:#7ee2a0}
.otk-operator .otk-op-toast[data-state="error"]{background:#b3261e}
.otk-operator .otk-op-scrim{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.42)}
.otk-operator .otk-op-sheet{width:100%;max-width:480px;padding:22px 18px calc(18px + env(safe-area-inset-bottom,0px));border-radius:16px 16px 0 0;background:var(--c-bg)}
.otk-operator .otk-op-sheet h3{margin:0 0 6px;font-size:var(--t-lg)}
.otk-operator .otk-op-sheet p{margin:0 0 4px;color:var(--c-ink-2)}
@media (min-width:600px){.otk-operator .otk-op-scrim{align-items:center}.otk-operator .otk-op-sheet{border-radius:16px}}
@media (max-width:380px){.otk-operator .otk-op-tabs a{gap:4px;font-size:.94rem}.otk-operator .otk-op-kv{grid-template-columns:6em minmax(0,1fr)}}

/* noscript has real element children only when scripting is disabled. */
:is(.otk-member,.otk-operator) main:has(> noscript > p) > #status{display:none}

/* UI-07: native disclosure controls and source text, without inline styles. */
.otk-member .faq-answer{white-space:pre-line;overflow-wrap:anywhere}

/* UI integration 1: entry. Shared header links (trial .hdr__nav / .hdr__act /
   .btn-login), the phone bottom menu (trial .tabbar) and the login/registration
   step shown as a trial sheet in place. Links only; no inline style or script. */
.otk-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.otk-hdr__nav{display:none;margin-left:auto;gap:4px;height:100%}
.otk .otk-hdr__nav a{display:flex;align-items:center;height:100%;padding:0 var(--s-4);color:var(--c-ink-2);font-weight:var(--w-bold);font-size:var(--t-md);text-decoration:none;white-space:nowrap}
.otk .otk-hdr__nav a:hover{color:var(--c-ink)}
.otk-hdr__act{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.otk-hdr__nav + .otk-hdr__act{margin-left:var(--s-3)}
.otk .otk-btn-login{display:inline-flex;align-items:center;height:40px;padding:0 var(--s-3);border-radius:var(--r-pill);background:var(--c-ink);color:var(--c-white);font-weight:var(--w-black);font-size:var(--t-sm);text-decoration:none;white-space:nowrap}
.otk .otk-btn-login{border:0;cursor:pointer;font-family:inherit}
.otk .otk-btn-login--reg{background:var(--c-brand-ink)}
.otk .otk-btn-login--reg:hover{background:var(--c-brand-hover)}
.otk-tabbar{position:fixed;z-index:45;left:0;right:0;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  padding:4px max(8px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));background:var(--c-bg)}
.otk .otk-tabbar :is(a,button){display:grid;justify-items:center;align-content:center;gap:2px;min-height:52px;padding-top:6px;color:var(--c-ink-2);font-size:11px;font-weight:var(--w-bold);text-decoration:none;text-align:center;line-height:1.25;overflow-wrap:anywhere}
.otk .otk-tabbar a:hover{color:var(--c-ink)}
body.otk:has(> .otk-tabbar:not([hidden])){padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
html:has(> body.otk > .otk-tabbar:not([hidden])){scroll-padding-bottom:72px}
html:has(> body.otk-member){scroll-padding-top:64px}
@media (min-width:1024px){.otk-hdr__nav{display:flex}.otk .otk-btn-login{padding:0 var(--s-5)}.otk-tabbar{display:none}
  body.otk:has(> .otk-tabbar:not([hidden])){padding-bottom:0}html:has(> body.otk > .otk-tabbar:not([hidden])){scroll-padding-bottom:0}}
/* Login/registration (trial .sheet / .sheet__grab / .sheet__lead / .fine). */
.otk-sheet__grab{width:36px;height:4px;border-radius:2px;background:var(--c-line-2);margin:0 auto var(--s-3)}
.otk-fine{margin:0;font-size:var(--t-sm);color:var(--c-ink-2);line-height:1.6}
/* Top page: lead, entry icon and safety list (trial .safety-list / .safety-tile__ic). */
.otk-lead{margin:0;color:var(--c-ink-2);font-size:var(--t-base)}
.otk-icon--btn{width:20px;height:20px}
.otk-safety[open]{display:block}
.otk-eyebrow{font-weight:700;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-brand-ink)}
.otk-safety h2{margin:0;font-size:1.375rem;font-weight:var(--w-black);line-height:var(--lh-tight)}
.otk-safety-list{display:grid;margin:0;padding:0;list-style:none}
.otk-safety-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s-4);align-items:center;padding-block:var(--s-3)}
.otk-safety__ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--c-surface);color:var(--c-ink)}
.otk-safety__ic .otk-icon{width:20px;height:20px}
.otk-safety-list b{display:block;font-size:var(--t-base)}
.otk-safety__tx{display:block;font-size:var(--t-md);color:var(--c-ink-2);line-height:1.55}

/* Entry wiring: keep the v22 header actions aligned without inline styles. */
.otk-entry-auth-links{display:flex;align-items:center;gap:var(--s-2)}
/* GAPFIX ADDENDUM 3 point 1: until the boot session restore settles, the guest buttons keep their space but stay invisible. */
body.otk-boot .otk-entry-auth-links{visibility:hidden}
.otk #entry-auth-state{font-size:var(--t-sm);max-width:8em;overflow-wrap:anywhere}
.otk [aria-current="page"]{font-weight:var(--w-black);text-decoration:underline;text-underline-offset:4px}

/* Stage 1: mock view structure (events-mock css/app.css .tabbar / .filters / .ev-card /
   .dt-* / .facts / .cta-bar / .done-hero / .guide / .tabs / .my-card / .jump / .empty /
   .sheet / .progress / .toast). Views are <section data-view> switched by member.mjs;
   sheets are native <dialog>. No photos, fonts or other external resources (CSP). */
.otk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.otk-member .otk-app{padding-bottom:var(--s-8)}
.otk-member .otk-view{gap:var(--s-4);padding:var(--s-4) 0 var(--s-6);border-top:0}
.otk-member .otk-view > .otk-page-head{padding:var(--s-2) 0 0}
.otk-member .otk-view .otk-page-head h1{font-size:var(--t-2xl)}
.otk-member .otk-back{display:inline-flex;align-items:center;gap:4px;justify-self:start;min-height:40px;color:var(--c-ink);font-size:var(--t-md);text-decoration:none}
.otk-member .otk-back .otk-icon{width:20px;height:20px}
/* Text buttons (mock .back-link / .btn--ghost) for refresh actions. */
.otk-member :is(section,dialog) button.otk-btn-text{justify-self:start;width:auto;min-height:40px;gap:6px;padding:0 var(--s-3);border:0;background:none;color:var(--c-ink-2);font-size:var(--t-sm)}
.otk-member :is(section,dialog) button.otk-btn-text:hover{color:var(--c-ink)}
.otk-member .otk-btn-text .otk-icon{width:18px;height:18px}
.otk-member :is(section,dialog) button.otk-btn--primary{border-color:transparent;background:var(--c-brand-ink);color:var(--c-white)}
.otk-member :is(section,dialog) button.otk-btn--primary:hover{background:var(--c-brand-hover)}
.otk-member :is(section,dialog) button.otk-btn-danger{border-color:transparent;background:none;color:var(--c-brand-ink);text-decoration:underline;text-underline-offset:4px}
.otk-member #cancel.otk-btn-danger{border-color:var(--c-brand-ink);background:var(--c-brand-ink);color:var(--c-white);text-decoration:none}
.otk-member a.otk-btn{text-decoration:none}
.otk-member a.otk-btn--secondary{color:var(--c-ink)}
.otk-member a.otk-btn--primary{color:var(--c-white)}
.otk-member .otk-btn .otk-icon{width:20px;height:20px}
/* さがす (mock .filters / .cards / .ev-card) */
.otk-member .otk-ev-filters{padding-bottom:var(--s-3)}
.otk-ev-filters__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.otk-ev-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);font-size:var(--t-sm);color:var(--c-ink-2)}
.otk-chip{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:var(--w-black);white-space:nowrap}
.otk-chip--ok{background:#e6f4ee;color:#0e7a55}
.otk-chip--brand{background:var(--c-brand-tint);color:var(--c-brand-ink)}
.otk-chip--off{background:var(--c-surface-2);color:var(--c-ink-2)}
/* イベント詳細 (mock .dt-head / .facts / .people / .dt-sec / .info-banner / .cta-bar) */
.otk-dt__body{display:grid;gap:var(--s-6);min-width:0}
.otk-dt-head{display:grid;gap:var(--s-2)}
.otk-dt-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.otk-member .otk-dt-head h1{font-size:1.5rem;overflow-wrap:anywhere}
/* Flight 2 (2026-11-11): the 体験版 .facts — one row element per fact (label column + value column), separated
   by hairlines. These row hairlines are part of the 体験版 detail and are the one allowed exception to the
   no-divider rule; they are not to be copied anywhere else. */
.otk-facts{display:grid;margin:0;border-top:1px solid var(--c-line)}
.otk-facts__row{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:var(--s-3);padding-block:var(--s-3);border-bottom:1px solid var(--c-line);align-items:baseline}
.otk-facts__row > dt{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-ink-2)}
.otk-facts__row > dt > .otk-icon{order:-1;width:18px;height:18px;flex:none;align-self:center;color:var(--c-ink)}
.otk-facts__row > dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0;margin:0;font-size:var(--t-base);font-weight:var(--w-bold);line-height:1.6;overflow-wrap:anywhere}
.otk-facts__row > dd > b{font-size:var(--t-base);font-weight:var(--w-bold)}
.otk-facts__row > dd > span{font-size:var(--t-sm);font-weight:var(--w-body);color:var(--c-ink-2)}
/* the venue-cost note belongs to the fact rows: it sits close under them (the column gap is --s-6) */
.otk-member .otk-dt-col > .otk-facts-note{margin-top:calc(var(--s-2) - var(--s-6))}
.otk-member .otk-people{padding:var(--s-3) var(--s-4);border-radius:12px;background:var(--c-surface);color:var(--c-ink);font-weight:var(--w-bold)}
.otk-member .otk-people:empty{display:none}
.otk-dt-sec{display:grid;gap:var(--s-3);min-width:0}
.otk-member .otk-dt-sec h2{margin:0;font-size:var(--t-lg)}
.otk-member .otk-dt-about{color:var(--c-ink);font-size:var(--t-base);white-space:pre-line;overflow-wrap:anywhere}
.otk-member #event-detail-status:empty{display:none}
.otk-member .otk-info-banner{display:grid;grid-template-columns:40px minmax(0,1fr) 20px;align-items:center;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--c-line);border-radius:12px;color:var(--c-ink);text-decoration:none}
.otk-info-banner__ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--c-surface)}
.otk-info-banner__tx{display:grid}
.otk-info-banner__tx small{font-weight:var(--w-body);color:var(--c-ink-2)}
.otk-cta-bar{position:fixed;z-index:44;left:0;right:0;bottom:0;display:flex;gap:var(--s-2);padding:var(--s-3) max(var(--gutter),env(safe-area-inset-right,0px)) calc(var(--s-3) + env(safe-area-inset-bottom,0px)) max(var(--gutter),env(safe-area-inset-left,0px));background:var(--c-bg)}
.otk-member .otk-cta-bar > :is(button,a){flex:1;width:100%}
.otk-member .otk-cta-bar > button{min-height:56px;font-size:17px}
/* 試験イベントの上限案内: one line at 390px; when it can't fit, break only at 「、」 (keep-all), never mid-phrase. */
.otk-member .otk-cta-bar > #test-event-limit{flex:1;min-width:0;margin:0;font-size:var(--t-sm);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
body.otk-has-cta .otk-app{padding-bottom:104px}
/* 完了・申込内容 (mock .done-hero / .guide / .done-actions) */
.otk-done-hero{display:grid;justify-items:center;gap:var(--s-3);padding:var(--s-6) 0 var(--s-2);text-align:center}
.otk-done-badge{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--c-brand);color:var(--c-white)}
.otk-done-badge .otk-icon{width:32px;height:32px;stroke-width:2.6}
.otk-member .otk-done-hero h1{font-size:1.5rem}
.otk-member .otk-done-hero p{color:var(--c-ink);font-weight:var(--w-bold)}
.otk-guide{display:grid;gap:var(--s-2);padding:var(--s-5);border-radius:12px;background:var(--c-surface)}
.otk-member .otk-guide h2{display:flex;align-items:center;gap:var(--s-2);margin:0;font-size:var(--t-base)}
.otk-member .otk-guide h2 .otk-icon{width:20px;height:20px}
.otk-member .otk-guide p{color:var(--c-ink)}
.otk-member #venue-name{font-size:var(--t-lg)}
.otk-done-actions{display:grid;gap:var(--s-3)}
.otk-member #booking-event{color:var(--c-ink);font-weight:var(--w-bold)}
.otk-member #booking-event:empty{display:none}
/* マイイベント (mock .tabs / .my-card) */
/* My-event tabs: four equal tracks; labels and counts share one inline row. */
.otk-member .otk-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.otk-member .otk-tabs > :is(a,button){position:relative;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;height:44px;margin:0;padding:0;border:0;background:none;font-family:inherit;font-size:12px;line-height:1.5;white-space:nowrap;color:var(--c-ink-2);font-weight:var(--w-bold);text-decoration:none}
@media (min-width:768px){.otk-member .otk-tabs > :is(a,button){font-size:var(--t-base)}}
.otk-member .otk-tabs > [aria-current="page"]{color:var(--c-ink);text-decoration:none}
.otk-member .otk-tabs > [aria-current="page"]::after{content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--c-brand)}
.otk-member .otk-tabs > .is-off{color:#b8b8b8;cursor:not-allowed}
.otk-my-panel{display:grid;gap:var(--s-3)}
.otk-member .otk-my-list{gap:var(--s-3);border-top:0}
.otk-member .otk-my-list > li{padding:0;border:0}
.otk-member .otk-my-card{display:grid;justify-items:start;gap:4px;padding:var(--s-4);border:1.5px solid var(--c-line);border-radius:12px;color:var(--c-ink);text-decoration:none}
.otk-member .otk-my-card:hover{border-color:var(--c-ink)}
.otk-my-card__title{font-size:var(--t-lg);line-height:1.4;overflow-wrap:anywhere}
.otk-my-card__when{font-size:var(--t-sm);font-weight:var(--w-body);color:var(--c-ink-2)}
.otk-member #applications-status:empty{display:none}
/* マイページ (mock .jump) */
.otk-jump{display:grid}
.otk .otk-jump a{display:grid;grid-template-columns:40px minmax(0,1fr) 20px;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-2) 0;color:var(--c-ink);text-decoration:none}
.otk-jump b{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--c-surface)}
.otk-jump b .otk-icon{width:20px;height:20px}
.otk-jump span{display:grid;font-weight:var(--w-bold)}
.otk-jump small{font-weight:var(--w-body);font-size:var(--t-sm);color:var(--c-ink-2)}
.otk-jump > a > .otk-icon{width:20px;height:20px;color:var(--c-ink-2)}
/* ログインが必要 (mock .empty) */
.otk-empty{display:grid;justify-items:center;gap:var(--s-3);padding:var(--s-8) var(--s-4);border-radius:16px;background:var(--c-surface);text-align:center}
.otk-empty > .otk-icon{width:40px;height:40px;color:var(--c-ink-2)}
.otk-member .otk-empty h2{margin:0;font-size:var(--t-lg)}
.otk-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2)}
.otk-member .otk-empty__actions > :is(button,a){width:auto;padding:0 var(--s-6)}
/* Status toast (mock .toast). No footer: the FAQ is reached from マイページ and the event detail. */
.otk-member .otk-toast{position:fixed;z-index:60;left:50%;bottom:calc(var(--s-4) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(560px,calc(100% - var(--gutter) * 2));margin:0;padding:var(--s-3) var(--s-4);border-radius:12px;background:var(--c-ink);color:var(--c-white);font-size:var(--t-sm);font-weight:var(--w-bold);line-height:1.6;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.otk-member #status:empty{display:none}
body.otk-has-tabbar .otk-toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body.otk-has-cta .otk-toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
/* Bottom menu (mock .tabbar): メッセージ is greyed out and disabled (準備中 only in its aria-label). */
.otk .otk-tabbar :is(a,button){border:0;background:none;font-family:inherit;cursor:pointer}
.otk .otk-tabbar .is-off{color:#b8b8b8;cursor:not-allowed}
.otk .otk-tabbar a[aria-current="page"]{color:var(--c-ink);text-decoration:none}
.otk .otk-tabbar a[aria-current="page"] .otk-icon{stroke-width:2.6;color:var(--c-brand-ink)}
.otk .otk-hdr__nav a[aria-current="page"]{color:var(--c-ink);text-decoration:none;box-shadow:inset 0 -3px 0 var(--c-brand)}
.otk .otk-btn-login{height:40px}
/* Sheets (mock .sheet-root / .sheet / .sheet__top / .progress / .ev-mini) */
.otk-sheet{width:100%;max-width:none;max-height:92dvh;margin:auto 0 0;padding:0;border:0;border-radius:16px 16px 0 0;background:var(--c-bg);color:var(--c-ink)}
.otk-sheet::backdrop{background:rgba(0,0,0,.56)}
.otk-sheet[open]{animation:otkSheetIn 380ms var(--ease-out) both}
@keyframes otkSheetIn{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.otk-sheet[open]{animation:none}}
.otk-sheet__body{display:grid;gap:var(--s-4);padding:var(--s-2) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom,0px))}
.otk-sheet__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:44px}
.otk-sheet__step{display:grid;gap:var(--s-5)}
.otk-member .otk-sheet h2{margin:0;font-size:1.375rem}
.otk-sheet__lead{margin:0;color:var(--c-ink-2)}
.otk-member dialog button.otk-icon-btn{width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:var(--c-surface)}
.otk-member .otk-icon-btn .otk-icon{width:20px;height:20px}
.otk-progress{display:flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-ink-2)}
.otk-progress i{display:block;width:28px;height:4px;border-radius:2px;background:var(--c-line)}
.otk-progress i.is-on{background:var(--c-brand)}
.otk-ev-mini{display:grid;gap:2px;margin:0;padding:var(--s-3) var(--s-4);border-radius:12px;background:var(--c-surface);color:var(--c-ink)}
.otk-member .otk-ev-mini:empty{display:none}
.otk-ev-mini span{font-size:var(--t-sm);color:var(--c-ink-2)}
.otk-member .otk-sheet__status{padding:var(--s-3) var(--s-4);border-radius:8px;border:1.5px solid var(--c-brand);background:var(--c-brand-tint);color:var(--c-ink);font-size:var(--t-sm)}
.otk-member .otk-sheet__status:empty{display:none}
@media (min-width:768px){.otk-sheet{max-height:calc(100dvh - 48px);max-width:480px;margin:auto;border-radius:16px}.otk-sheet__body{padding:var(--s-4) var(--s-8) var(--s-8)}.otk-sheet .otk-sheet__grab{display:none}
  .otk-member .otk-ev-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.otk-member .otk-view{max-width:720px;margin-inline:auto;width:100%}}
@media (min-width:1024px){.otk-member .otk-ev-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.otk-member #view-list{max-width:none}}
/* noscript has element children only when scripting is disabled: no status toast then. */
.otk-member:has(main > noscript > p) #status{display:none}
/* Fix pass: list status lines (loading / none / error only, no counts) */
.otk-member .otk-list-status{margin:0;color:var(--c-ink-2);font-size:var(--t-sm)}
.otk-member .otk-list-status:empty{display:none}
.otk-member #view-list{padding-top:0;display:grid;gap:0}
/* Fix pass: Japanese image picker (the native input stays focusable but invisible) */
.otk-file{display:grid;gap:var(--s-2)}
.otk-member .otk-file__lb{margin:0;font-weight:var(--w-bold)}
.otk-file__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.otk-member label.otk-file__btn{position:relative;display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap);padding:0 var(--s-5);border:1.5px solid var(--c-line-2);border-radius:var(--r-pill);background:var(--c-bg);color:var(--c-ink);font-weight:var(--w-bold);cursor:pointer}
.otk-member label.otk-file__btn:hover{border-color:var(--c-ink)}
.otk-member label.otk-file__btn:focus-within{outline:3px solid var(--c-ink);outline-offset:2px}
.otk-member label.otk-file__btn > input[type=file]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.otk-member .otk-file__name{min-width:0;color:var(--c-ink-2);font-size:var(--t-sm);overflow-wrap:anywhere}

/* Fix pass 2 (G1/G3/G4). */
/* Header (mock .hdr): logo, β badge, and on the right only the login button while
   signed out. Every tap target is at least 44px; PC keeps the same row with links. */
.otk-member .otk-hdr__in{height:56px;gap:var(--s-3)}
.otk-member .otk-hdr__logo{min-height:44px;flex:none}
.otk-member .otk-badge{flex:none}
.otk-member .otk-hdr__act{flex:none}
/* The PC links are display:none on phones, so the login button is pushed to the right edge there. */
.otk-member .otk-hdr__nav + .otk-hdr__act{margin-left:auto}
.otk.otk-member .otk-btn-login{min-height:44px;height:44px;max-width:none;margin:0;padding:0 var(--s-5);font-size:var(--t-md)}
.otk.otk-member .otk-btn-login:hover{background:#000}
@media (min-width:1024px){.otk-member .otk-hdr__in{height:60px}.otk-member .otk-hdr__nav + .otk-hdr__act{margin-left:var(--s-3)}}
/* さがす cards (mock .cards / .ev-card): the photo leads, with the availability chip
   on it; title, date/area and capacity follow without a frame, as in the mock. */
.otk-member .otk-ev-cards{gap:var(--s-8)}
.otk-member .otk-ev-cards > li{display:block;padding:0;border:0;border-radius:12px;background:none}
.otk-member .otk-ev-cards .otk-ev-card__open{display:grid;gap:var(--s-3);padding:0;border:0;border-radius:12px;background:none;text-align:left}
.otk-member .otk-ev-cards .otk-ev-card__open:hover{border:0}
.otk-member .otk-ev-cards .otk-ev-card__open:hover .otk-ev-card__title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.otk-member .otk-ev-cards .otk-ev-card__open:focus-visible{outline:3px solid var(--c-ink);outline-offset:4px}
.otk-ev-card__ph{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--c-surface)}
.otk-ev-card__ph img{display:block;width:100%;height:100%;object-fit:cover}
.otk-ev-card__ph .otk-chip{position:absolute;left:var(--s-3);top:var(--s-3)}
.otk-ev-card__body{display:grid;gap:6px;min-width:0}
.otk-member .otk-ev-card__title{font-size:1.25rem;font-weight:var(--w-black);line-height:1.4}
.otk-member .otk-ev-card__when{font-weight:var(--w-bold)}
/* Chips on a photo: white base with a coloured dot (mock .status). */
.otk-ev-card__ph .otk-chip{gap:6px;min-height:26px;padding:0 10px 0 9px;background:var(--c-white);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.otk-ev-card__ph .otk-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
/* Event detail hero (mock .dt-hero__photo): edge to edge on phones, rounded from 768px. */
.otk-dt-hero{margin-inline:calc(var(--gutter) * -1);aspect-ratio:4/3;max-height:62vh;overflow:hidden;background:var(--c-surface)}
.otk-dt-hero img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:768px){.otk-dt-hero{margin-inline:0;border-radius:16px;aspect-ratio:16/9}}
/* One frame for every card and panel: 1px line, 12px corners, no shadow. */
.otk-member .otk-my-card,.otk-kyc-card,.otk-sup-card,.otk-member .otk-pf-head{border:1px solid var(--c-line);border-radius:12px}
.otk-member .otk-my-card:hover{border-color:var(--c-ink-2)}
/* One control height: text fields and selects match the 48px buttons. */
.otk-member label > input:not([type=checkbox]):not([type=file]),.otk-member label > select{height:var(--tap)}
/* One value size for label/value rows: detail facts, deadlines and booking rows use
   15px bold values; only the booking's first row (参加の状態) stays emphasised. */
.otk-member .otk-ev-spec > dd{font-size:var(--t-md)}
.otk-member #event-details > dd:first-of-type{font-size:var(--t-md)}
.otk-member #application-details > dd:first-of-type{font-size:var(--t-lg)}
/* Every remaining small control reaches the 44px minimum tap size. */
.otk-member dialog button.otk-icon-btn{width:44px;height:44px;min-height:44px}
.otk-member .otk-back{min-height:44px}
.otk-member :is(section,dialog) button.otk-btn-text{min-height:44px}

/* Member QA fixes (docs/pm-member-qa-fixes.md): profile editing on マイページ. */
.otk-member #booking-status{color:var(--c-ink)}
.otk-member .otk-me-logout{margin-top:var(--s-4,16px)}
/* FE-1 gender: required choice at registration, one-time prompt when applying / on the my page */
.otk-member .otk-gender{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);min-width:0;margin:0;padding:0;border:0}
.otk-member .otk-gender legend{grid-column:1/-1;margin-bottom:var(--s-2);padding:0;font-weight:var(--w-bold);font-size:var(--t-sm);color:var(--c-ink)}
.otk-member .otk-gender__opt{display:flex;align-items:center;gap:var(--s-2);min-height:var(--tap);margin:0;padding:0 var(--s-4);border:1px solid var(--c-line-2);border-radius:12px;font-weight:var(--w-bold);cursor:pointer}
.otk-member .otk-gender__opt:has(input:checked){border-color:var(--c-brand-ink);background:var(--c-brand-tint)}
/* Beats the text-field rule for label > input (:is(.otk-member,.otk-operator) label > input:not(...)). */
.otk-member .otk-gender label.otk-gender__opt > input[type=radio]{flex:none;width:20px;height:20px;margin:0;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;accent-color:var(--c-brand-ink)}
.otk-member .otk-gender-gate{display:grid;gap:var(--s-3);margin:0 0 var(--s-4);padding:var(--s-5);border:1px solid var(--c-brand-ink);border-radius:12px;background:var(--c-bg)}
.otk-member .otk-gender-gate :is(h2,h3,p){margin:0}
/* FE-2 login sheet: password + Google as the main route, sign-up / reset / login code as panels */
.otk-auth-panel{display:grid;gap:var(--s-3)}
/* Sign-up password step: a 44px round eye button sits inside the right end of each field (the field keeps its 48px
   height and leaves room on the right). The slash shows while the password is hidden (aria-pressed=false). */
.otk-pw-field{position:relative}
.otk-member .otk-pw-field > label > input:not([type=checkbox]):not([type=file]){padding-right:52px}
.otk-member :is(section,dialog) button.otk-pw-eye{position:absolute;right:2px;bottom:2px;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:none;color:var(--c-ink-2)}
.otk-member :is(section,dialog) button.otk-pw-eye:hover{color:var(--c-ink)}
.otk-member :is(section,dialog) button.otk-pw-eye[aria-pressed=true]{color:var(--c-ink)}
.otk-member :is(section,dialog) button.otk-pw-eye:focus-visible{outline-offset:-3px;border-radius:50%}
.otk-member .otk-pw-eye .otk-icon{width:22px;height:22px}
.otk-member .otk-pw-eye[aria-pressed=true] .otk-pw-eye__slash{display:none}
.otk-member :is(section,dialog) button.otk-auth-link{justify-self:center;color:var(--c-ink);text-decoration:underline;text-underline-offset:4px}
.otk-member :is(section,dialog) button.otk-auth-other{font-size:12px;color:var(--c-ink-2);font-weight:var(--w-body)}
.otk-member :is(section,dialog) button.otk-auth-back{margin-left:calc(var(--s-3) * -1);padding-left:var(--s-2)}
.otk-auth-or{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-3);margin:0;font-size:var(--t-sm);color:var(--c-ink-2)}
.otk-auth-or{display:flex;justify-content:center}.otk-auth-or::before,.otk-auth-or::after{content:none}
.otk-member :is(section,dialog) button.otk-btn-google{gap:var(--s-3);border-color:var(--c-line-2);background:var(--c-bg);color:var(--c-ink)}
.otk-member :is(section,dialog) button.otk-btn-google:hover{background:var(--c-surface)}
.otk-g{flex:none;width:20px;height:20px}
.otk-auth-switch{display:grid;gap:var(--s-2);margin-top:var(--s-2);padding:var(--s-4);border-radius:12px;background:var(--c-surface);text-align:center}
.otk-member .otk-auth-switch p{margin:0;font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-ink-2)}
.otk-auth-addr{overflow-wrap:anywhere;color:var(--c-ink)}
/* Sign-up progress: one thin line (filled width = progress) and one short line of text. Sign-up only. */
.otk-auth-bar{height:4px;border-radius:2px;background:var(--c-line);overflow:hidden}
.otk-auth-bar > i{display:block;width:0;height:100%;border-radius:2px;background:var(--c-brand);transition:width .2s ease}
.otk-auth-bar[data-at="1"] > i{width:14.29%}.otk-auth-bar[data-at="2"] > i{width:28.57%}.otk-auth-bar[data-at="3"] > i{width:42.86%}.otk-auth-bar[data-at="4"] > i{width:57.14%}.otk-auth-bar[data-at="5"] > i{width:71.43%}.otk-auth-bar[data-at="6"] > i{width:85.71%}.otk-auth-bar[data-at="7"] > i{width:100%}
@media (prefers-reduced-motion:reduce){.otk-auth-bar > i{transition:none}}
.otk-done-hero--sheet{padding:var(--s-2) 0 0}
.otk-member .otk-done-hero--sheet h2{font-size:1.375rem}
.otk-member .otk-done-hero--sheet p{margin:0}
.otk-member .otk-guide h3{margin:0;font-size:var(--t-base)}
.otk-member .otk-guide p{margin:0}
.otk-member #me-password-status:empty{display:none}
.otk-member .otk-me-account{margin:var(--s-4) 0 0}
/* FE-3 event fields: detail photo carousel (trial gallery: swipe, arrows ≥1024px, dots, n / N), tag and
   genre chips, the target row, the venue-cost note on the fee row, the waitlist block and the meeting guide */
.otk-gal{position:relative}
.otk-gal__track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.otk-gal__track::-webkit-scrollbar{display:none}
.otk-gal__track:focus-visible{outline:3px solid var(--c-white);outline-offset:-6px}
.otk-gal__slide{flex:0 0 100%;min-width:0;height:100%;margin:0;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.otk-gal__slide img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.otk-gal__dots{position:absolute;z-index:2;left:50%;bottom:var(--s-3);transform:translateX(-50%);display:flex;gap:2px}
.otk-member :is(section,dialog) button.otk-gal__dot{width:20px;min-width:20px;height:24px;min-height:24px;padding:0;border:0;border-radius:0;background:none;display:grid;place-items:center}
.otk-member :is(section,dialog) button.otk-gal__dot:active{transform:none}
.otk-gal__dot::before{content:"";width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.6);transition:width .2s ease-out,background-color .15s}
.otk-gal__dot[aria-current]::before{width:18px;background:var(--c-white)}
.otk-gal__count{position:absolute;z-index:2;left:var(--s-3);bottom:var(--s-3);height:28px;padding:0 10px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:rgba(0,0,0,.45);color:var(--c-white);font-size:var(--t-sm);font-weight:var(--w-bold);font-variant-numeric:tabular-nums}
.otk-member :is(section,dialog) button.otk-gal__nav{display:none;position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:var(--c-white)}
.otk-gal__nav .otk-icon{width:22px;height:22px}
.otk-gal__nav--prev{left:var(--s-4)}
.otk-gal__nav--next{right:var(--s-4)}
.otk-member :is(section,dialog) button.otk-gal__nav[disabled]{opacity:0;pointer-events:none}
.otk-member :is(section,dialog) button.otk-gal__nav:active{transform:translateY(-50%) scale(.94)}
.otk-gal [hidden]{display:none!important}
@media (min-width:1024px){.otk-member :is(section,dialog) button.otk-gal__nav{display:grid;place-items:center}}
@media (prefers-reduced-motion:reduce){.otk-gal__track{scroll-behavior:auto}.otk-gal__dot::before{transition:none}}
.otk-tag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-ink);font-size:12px;font-weight:var(--w-bold);white-space:nowrap}
.otk-tag--cat{background:var(--c-bg);border:1.5px solid var(--c-line-2)}
.otk-member .otk-wl{display:grid;gap:var(--s-3);padding:var(--s-5);border:1px solid var(--c-line-2);border-radius:12px;background:var(--c-bg)}
.otk-member .otk-wl :is(h2,h3,p){margin:0}
.otk-member .otk-wl h2{font-size:var(--t-base)}
.otk-member .otk-wl__state{color:var(--c-ink);font-weight:var(--w-bold)}
.otk-member .otk-wl__act{display:grid;gap:var(--s-2)}
.otk-member .otk-wl__status{color:var(--c-ink)}
.otk-member .otk-wl__status:empty,.otk-member .otk-wl p.otk-fine:empty{display:none}
.otk-member .otk-wl .otk-gender-gate{margin:0}
/* TRIAGE_WAITLIST (Nakamura 2026-11-12): a full event's sheet has no grey box any more; the note sits above
   #sheet-waitlist, which takes #apply's place and size as the primary button. */
.otk-member .otk-sheet-wl{display:grid;gap:var(--s-3)}
.otk-member .otk-sheet-wl p{margin:0}
.otk-member .otk-venue-guide{display:grid;gap:var(--s-1,4px);margin-top:var(--s-2);padding-top:var(--s-3)}
.otk-member .otk-venue-guide p{white-space:pre-line;overflow-wrap:anywhere}
/* FE-3 operator: photo rows (image key + position, up/remove) and the read-only waitlist rows */
.otk-operator .otk-op-photos{display:grid;gap:var(--s-2)}
.otk-operator .otk-op-photo{display:grid;grid-template-columns:3.2em minmax(0,1fr) 7.5em auto;align-items:center;gap:var(--s-2)}
.otk-operator .otk-op-photo__no{font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-ink-2)}
.otk-operator .otk-op-photo__act{display:flex;gap:4px}
.otk-operator .otk-op-photo__act:empty{display:none}
.otk-operator .otk-op-photo__drop{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);padding:var(--s-2);border:1px dashed var(--c-line-2);border-radius:10px;font-size:var(--t-sm);color:var(--c-ink-2)}
.otk-operator .otk-op-photo__drop.is-over{border-color:var(--c-ink-2);background:rgba(0,0,0,.04)}
.otk-operator .otk-op-photo__thumb{width:72px;height:48px;object-fit:cover;border-radius:6px;flex:none}
.otk-operator .otk-op-photo__thumb[hidden]{display:none}
@media (max-width:560px){.otk-operator .otk-op-photo{grid-template-columns:3.2em minmax(0,7.5em) 1fr}.otk-operator .otk-op-photo > input[name^="photoKey"]{grid-column:2/-1}.otk-operator .otk-op-photo__pos{grid-column:2}.otk-operator .otk-op-photo__act{grid-column:3;justify-content:flex-end}}
.otk-operator .otk-op-row--static:hover{background:none}
/* Parity pass 2026-11-11 (docs/beta-parity-audit-20261111.md). No divider lines: items are separated by space. */
/* お知らせ bell in the member header (体験版 .bell / .bell__badge) */
.otk .otk-bell{position:relative;width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:50%;color:var(--c-ink);text-decoration:none}
.otk .otk-bell:hover{background:var(--c-surface)}
.otk .otk-bell .otk-icon{width:24px;height:24px}
.otk .otk-bell[aria-current="page"]{color:var(--c-brand-ink)}
.otk-bell__badge{position:absolute;top:2px;right:0;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);background:var(--c-brand);color:var(--c-white);border:2px solid var(--c-bg);font-size:11px;font-weight:var(--w-black);line-height:15px;text-align:center;font-variant-numeric:tabular-nums}
/* お知らせ list (体験版 .notice-list in .people-list) */
.otk-member .otk-notice-list{gap:var(--s-1)}
.otk-member .otk-notice-list > li{padding:0}
.otk .otk-notice{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s-3);align-items:start;padding:var(--s-3) 0;color:var(--c-ink);text-decoration:none}
.otk a.otk-notice{grid-template-columns:44px minmax(0,1fr) 18px}
.otk a.otk-notice:hover b{text-decoration:underline;text-underline-offset:3px}
.otk a.otk-notice > .otk-icon{width:18px;height:18px;align-self:center}
.otk-notice__ic{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--c-surface);color:var(--c-ink)}
.otk-notice__ic .otk-icon{width:20px;height:20px}
.otk-notice.is-unread .otk-notice__ic::after{content:"";position:absolute;top:1px;right:1px;width:10px;height:10px;border-radius:50%;background:var(--c-brand);border:2px solid var(--c-bg)}
.otk-notice__tx{display:grid;gap:2px;min-width:0}
.otk-notice__tx b{font-size:var(--t-md);line-height:1.5;overflow-wrap:anywhere}
.otk-notice__body{font-size:var(--t-sm);font-weight:var(--w-body);white-space:pre-wrap;overflow-wrap:anywhere}
.otk-notice__tx small{font-size:var(--t-sm);font-weight:var(--w-body);color:var(--c-ink-2)}
/* ほかのイベント (体験版 .hscroll of mini cards) */
.otk-member .otk-ev-cards.otk-hscroll{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(200px,62%);gap:var(--s-4);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:var(--s-2)}
.otk-member .otk-ev-cards.otk-hscroll > li{scroll-snap-align:start;min-width:0}
@media (min-width:768px){.otk-member .otk-ev-cards.otk-hscroll{grid-auto-columns:minmax(200px,31%)}}
/* マイイベント card with photo and countdown (体験版 myCard()) */
.otk-member .otk-my-card:has(> .otk-my-card__ph){grid-template-columns:88px minmax(0,1fr);align-items:center;column-gap:var(--s-4);justify-items:stretch}
.otk-my-card__ph{display:block;width:88px;aspect-ratio:1;overflow:hidden;border-radius:10px;background:var(--c-surface)}
.otk-my-card__ph img{display:block;width:100%;height:100%;object-fit:cover}
.otk-my-card__body{display:grid;justify-items:start;gap:4px;min-width:0}
.otk-my-card__top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.otk-countdown{font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-brand-ink)}
.otk-member p.otk-countdown{margin:0}
/* 問い合わせ: list items open their detail in place */
.otk-member .otk-sup-items{gap:var(--s-2)}
.otk-member .otk-sup-items > li{display:grid;gap:var(--s-3)}
.otk-member .otk-sup-items > li > button.otk-sup-item{display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:center;justify-items:start;column-gap:var(--s-3);row-gap:4px;width:100%;max-width:none;margin:0}
.otk-sup-item__title{grid-column:1;font-weight:var(--w-bold);color:var(--c-ink);overflow-wrap:anywhere}
.otk-sup-item__meta{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);font-size:var(--t-sm);font-weight:var(--w-body);color:var(--c-ink-2)}
.otk-member .otk-sup-items > li > button.otk-sup-item::after{grid-column:2;grid-row:1 / span 2;justify-self:center;transition:transform var(--d-fast)}
.otk-member .otk-sup-items > li > button.otk-sup-item[aria-expanded="true"]::after{transform:rotate(90deg)}
.otk-sup-detail{display:grid;gap:var(--s-3);padding-bottom:var(--s-4)}
.otk-member .otk-sup-detail h3{font-size:var(--t-md)}
.otk-member .otk-sup-detail [role="status"]:empty{display:none}
@media (prefers-reduced-motion:reduce){.otk-member .otk-sup-items > li > button.otk-sup-item::after{transition:none}}
/* ---- Registration stages + elderly-user rules for the login/registration sheet (ADDENDUM 4/5, 2026-11-11).
   Stages: 基本情報 → 性別 → 確認・同意, one theme per screen. No divider lines: stages are separated by space. */
.otk-auth-now{margin:0;font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-ink-2)}
.otk-reg-part{display:grid;gap:var(--s-3)}
.otk-reg-part > h3{margin:0;font-size:var(--t-lg);color:var(--c-ink)}
.otk-reg-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-3);margin-top:var(--s-2)}
.otk-reg-nav > button:only-child{grid-column:1/-1}
.otk-member .otk-reg-warn,.otk-member #registration #age-warning,.otk-member #registration #gender-warning{color:#a8124f;font-weight:var(--w-bold);font-size:var(--t-base)}
.otk-member .otk-reg-warn:empty,.otk-member #gender-warning:empty{display:none}
/* REGFIELDS: お住まいの都道府県 + 婚姻状態 below 性別 on the same stage; whitespace only, no rules. */
.otk-member .otk-reg-fields{display:grid;gap:var(--s-3);margin-top:var(--s-2)}
.otk-member .otk-reg-fields > p{margin:0}
.otk-reg-filled{margin:0;padding:var(--s-3) var(--s-4);border-radius:12px;background:var(--c-brand-tint);color:var(--c-ink);font-size:var(--t-base);font-weight:var(--w-bold)}
.otk-reg-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-4);margin:0;padding:var(--s-4);border-radius:12px;background:var(--c-bg)}
.otk-reg-summary dt{color:var(--c-ink-2);font-size:var(--t-md);font-weight:var(--w-bold)}
.otk-reg-summary dd{margin:0;color:var(--c-ink);font-size:var(--t-base);font-weight:var(--w-bold);overflow-wrap:anywhere}
/* Elderly-user rules inside the sheet: labels and buttons ≥16px, body/fine text ≥14px, inputs 16px
   (already), tap targets ≥44px including whole checkbox/radio rows, text contrast ≥4.5:1 (the primary
   button uses the darker brand shade: white on #d02c76 = 4.88:1; #e73b88 was 3.9:1). */
.otk-member #sheet label{font-size:var(--t-base)}
.otk-member #sheet .otk-fine,.otk-member #sheet .otk-sheet__lead,.otk-member #sheet p{font-size:max(14px,var(--t-md))}
.otk-member #sheet label:has(> input[type=checkbox]){min-height:44px;padding-block:10px;font-size:var(--t-base)}
.otk-member #sheet label > input[type=checkbox]{top:11px}
.otk-member #sheet .otk-gender__opt{min-height:52px;font-size:var(--t-base)}
.otk-member #sheet button.otk-btn--primary{background:var(--c-brand-hover)}
.otk-member #sheet button.otk-btn--primary:hover{background:#bf1f63}
.otk-member #sheet button.otk-btn-text{font-size:var(--t-base)}
/* お気に入り (parity run 2; 体験版 .fav-count / .icon-btn--glass / .fav-row). The count chip sits on the photo's
   bottom-right; the heart is a 44px glass button on the photo (top-right). Without a photo both move into the
   heading row (#event-head-tools) and lose the photo styling. Saved = filled brand-colour heart + aria-pressed. */
.otk-fav-count{position:absolute;z-index:2;right:var(--s-3);bottom:var(--s-3);display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:var(--r-pill);background:rgba(0,0,0,.45);color:var(--c-white);font-size:var(--t-sm);font-weight:var(--w-bold);font-variant-numeric:tabular-nums;pointer-events:none}
.otk-fav-count .otk-icon{width:15px;height:15px}
.otk-fav-count.is-on .otk-icon{color:var(--c-brand);fill:currentColor}
.otk-ev-card__meta .otk-fav-count,.otk-dt-head__tools .otk-fav-count{position:static;background:var(--c-surface);color:var(--c-ink)}
.otk-dt-tools{position:absolute;z-index:2;top:var(--s-3);right:var(--s-3);display:flex;gap:var(--s-2)}
.otk-member :is(section,dialog) button.otk-fav-btn{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);color:var(--c-white)}
.otk-member :is(section,dialog) button.otk-fav-btn .otk-icon{width:22px;height:22px}
.otk-member :is(section,dialog) button.otk-fav-btn.is-on{background:var(--c-bg);color:var(--c-brand)}
.otk-member :is(section,dialog) button.otk-fav-btn.is-on .otk-icon{fill:currentColor}
.otk-member :is(section,dialog) button.otk-fav-btn:active{transform:scale(.94)}
.otk-dt-head__tools{display:flex;align-items:center;gap:var(--s-2)}
.otk-dt-head__tools:empty{display:none}
.otk-member .otk-dt-head__tools button.otk-fav-btn{background:var(--c-surface);color:var(--c-ink)}
.otk-fav-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:var(--s-2);align-items:start}
.otk-member .otk-fav-row button.otk-fav-btn{background:var(--c-surface)}
/* 本人確認 (ADDENDUM 7B / DESIGN common rules): states always carry a text label; deadlines and errors are body-size
   text, not fine print; primary buttons 48–56px (otk-btn--lg = 56px). No divider lines (boxes use their own
   rounded background). */
.otk-kyc-banner{display:grid;gap:var(--s-2);padding:var(--s-5);border-radius:12px;background:var(--c-brand-tint)}
.otk-kyc-banner > .otk-chip{justify-self:start}
.otk-member .otk-kyc-banner h2{margin:0;font-size:var(--t-lg);line-height:1.5}
.otk-member .otk-kyc-banner p{margin:0;font-size:1.125rem;line-height:1.7;color:var(--c-ink)}
.otk-kyc-lead,.otk-kyc-deadline,.otk-kyc-step{font-size:1.125rem;line-height:1.7;color:var(--c-ink)}
.otk-member p.otk-kyc-deadline{margin:0;font-weight:var(--w-bold)}
.otk-member p.otk-kyc-step{margin:0;font-weight:var(--w-bold)}
.otk-member p.otk-kyc-step:empty{display:none}
/* Documents steps (2026-11-11): the two required items as numbered steps with a state chip each.
   Separation is whitespace and each item's own rounded frame; no divider lines. */
.otk-member p.otk-kyc-progress{margin:0;font-size:1.125rem;line-height:1.7;font-weight:var(--w-bold);color:var(--c-ink)}
.otk-member p.otk-kyc-progress:empty,.otk-member p.otk-kyc-target:empty{display:none}
.otk-member .otk-kyc-list{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none;border:0}
.otk-member .otk-kyc-list > li.otk-kyc-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-3);margin:0;padding:var(--s-4);border:1.5px solid var(--c-line);border-radius:12px;background:var(--c-bg)}
.otk-member .otk-kyc-list > li.otk-kyc-item.is-on{border-color:var(--c-brand);background:var(--c-brand-tint)}
.otk-kyc-item__no{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--c-surface);color:var(--c-ink);font-weight:var(--w-black)}
.otk-kyc-item.is-on .otk-kyc-item__no{background:var(--c-ink);color:var(--c-white)}
.otk-kyc-item.is-done .otk-kyc-item__no{background:#e6f4ee;color:#0e7a55}
.otk-kyc-item__body{display:grid;gap:2px;min-width:0}
.otk-kyc-item__body > b{font-size:1.125rem;line-height:1.5}
.otk-kyc-item__body > span{font-size:var(--t-sm);line-height:1.6;color:var(--c-ink-2)}
.otk-member p.otk-kyc-target{margin:0;padding:var(--s-3) var(--s-4);border-radius:8px;background:var(--c-brand-tint);color:var(--c-ink);font-weight:var(--w-bold)}
.otk-kyc-soon{margin:0;padding:var(--s-4);border-radius:12px;background:#fff4e5;color:var(--c-ink);font-size:var(--t-base);font-weight:var(--w-bold);line-height:1.7}
.otk-member #confirm-test-note{display:grid;gap:var(--s-2)}.otk-member #confirm-test-note > p{margin:0}
.otk-member .otk-kyc .otk-lead{font-size:1.125rem;line-height:1.7}
.otk-help-link{display:inline-flex;align-items:center;min-height:44px;font-weight:var(--w-bold)}
/* ---- ADDENDUM 8 (UIUX_checker audit of live β, 2026-11-11). No divider lines: separation by space and
   by the boxes' own outlines only. */
/* #14: required marks and live counts (nothing is cut silently). */
.otk-req{margin-left:2px;color:#a8124f;font-weight:var(--w-bold);white-space:nowrap}
.otk-count{margin:-4px 0 0;font-size:var(--t-sm);color:var(--c-ink-2)}
.otk-count.is-over{color:#a8124f;font-weight:var(--w-bold)}
/* #11: a field with an error is marked at the field itself (not by colour alone: the message sits under it). */
.otk-member [aria-invalid="true"]:not([type=checkbox]):not([type=radio]){border-color:#a8124f;box-shadow:inset 0 0 0 1px #a8124f}
.otk-member input[type=checkbox][aria-invalid="true"]{outline:2px solid #a8124f;outline-offset:2px}
/* #3: the already-registered guidance inside the code panel. */
.otk-auth-note{display:grid;gap:var(--s-2);padding:var(--s-4);border-radius:12px;background:var(--c-surface)}
.otk-auth-note h3{margin:0;font-size:var(--t-base)}
.otk-auth-note p{margin:0;font-size:var(--t-base)}
.otk-auth-codestep{display:grid;gap:var(--s-3)}
.otk-auth-codestep[hidden]{display:none}
.otk-member #signup-resend-wait:empty,.otk-member #otp-sent-note:empty{display:none}
/* #7: ログアウト at the top of マイページ and its confirmation. */
.otk-me-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.otk-me-head__logout{min-height:44px}
.otk-confirm{display:grid;gap:var(--s-3);margin:0 0 var(--s-5);padding:var(--s-4);border-radius:12px;border:1.5px solid var(--c-ink);background:var(--c-bg)}
.otk-confirm[hidden]{display:none}
.otk-confirm h2{margin:0;font-size:var(--t-lg)}
.otk-confirm p{margin:0}
.otk-confirm__act{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,2fr);gap:var(--s-3)}
.otk-confirm__act button{min-height:44px}
/* GAPFIX (2026-11-13): 「キャンセル」 wrapped to キャン/セル at 390px (101px column, 24px side padding). Its label never
   wraps now, with 8px side padding; the column is at least its max-content, so on a narrower screen it widens instead
   of overflowing. 「ログアウトする」 (.otk-btn--primary) keeps its own rule and width at 390/1280. */
.otk-member .otk-confirm__act > button:not(.otk-btn--primary){padding-inline:var(--s-2);white-space:nowrap}
/* マイページ: パスワードを変更する is a real button. */
.otk-me-account .otk-btn{min-height:44px}
/* メッセージ shows its reason (準備中) as visible text under the label. */
.otk .otk-tabbar .otk-tabbar__soon{display:block;font-size:10px;line-height:1.2;font-weight:var(--w-bold)}
/* Header ログイン at least 44px tall (G3 single button). */
.otk .otk-btn-login{height:auto;min-height:44px}
/* Detail: long labels take a full-width line (no mid-word wrap), the value follows under them. */
.otk-ev-spec > dt.is-long{grid-column:1/-1;padding-bottom:0;word-break:keep-all}
.otk-ev-spec > dd.is-long{grid-column:1/-1;padding-top:4px}
/* マイイベント: 書類を提出する is a real button (≥44px). */
.otk-my-docs{display:grid;gap:var(--s-2);justify-items:start;margin-bottom:var(--s-4)}
.otk-my-docs .otk-btn{min-height:44px}
/* 退会受付: the confirmation row is a 44px tap target; the send button is visibly off until it is checked. */
.otk-member #withdrawal-form label.otk-check,.otk-member #view-documents label:has(> #upload-consent){min-height:44px;padding-block:10px}
.otk-member #withdrawal-form button#withdrawal-send:not([disabled]){background:#a8124f;color:#fff;border-color:#a8124f}
.otk-member #withdrawal-form button#withdrawal-send[disabled]{opacity:.4;background:var(--c-surface);color:var(--c-ink-2)}
.otk-member #withdrawal-hint[hidden]{display:none}
/* Links inside consent labels: a taller hit area without moving the text. */
.otk-member label:has(> input[type=checkbox]) a{display:inline-block;padding-block:11px;margin-block:-11px}
/* FAQ: 110 / 119 and 「解決しない場合は問い合わせへ」 are ≥44px tap targets. */
.otk-member .otk-faq-contact a{display:inline-flex;align-items:center;min-height:44px}
/* FAQ: β-missing features are marked in the question and explained under the answer. */
.otk-faq-soon{display:inline-block;margin-left:var(--s-2);padding:2px 8px;border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-ink-2);font-size:var(--t-sm);font-weight:var(--w-bold);vertical-align:middle}
.otk-faq-note{margin:var(--s-2) 0 0;padding:var(--s-3);border-radius:8px;background:var(--c-surface);font-weight:var(--w-bold)}
/* 1920px (ADDENDUM 8): the header content uses the same 720px column as the views, so the logo and the
   page content share one left edge at every wide width. */
@media (min-width:768px){.otk-member .otk-hdr__in{max-width:calc(720px + 2 * var(--gutter))}}
@media (min-width:1024px){body.otk-wide-view .otk-hdr__in{max-width:1200px}}
/* ---- ADDENDUM 3 profile parity (体験版 order, per-section editors, completion guide). No divider lines. */
.otk-member .otk-view > .otk-page-head.otk-me-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.otk-member :is(section,dialog) button.otk-me-head__logout{width:auto;flex:none;min-height:44px;padding:0 var(--s-5)}
.otk-member .otk-pf{display:grid;gap:var(--s-6)}
.otk-member .otk-pf-hitokoto{margin:4px 0 0;color:var(--c-ink-2);font-weight:var(--w-bold);overflow-wrap:anywhere}
.otk-member .otk-pf-hitokoto:empty{display:none}
.otk-member .otk-pf-photo-note{display:grid;gap:var(--s-2)}
.otk-member .otk-pf-photo-note h3{margin:0;font-size:var(--t-lg)}
.otk-member .otk-pf-photo-note p{margin:0;color:var(--c-ink-2)}
.otk-member .otk-pf-beta-note{margin:0;padding:var(--s-4) var(--s-5);border-radius:12px;background:var(--c-surface);color:var(--c-ink);font-weight:var(--w-bold);line-height:1.7}
.otk-member .otk-pf-sec[hidden]{display:none}
.otk-member .otk-pf-sec__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.otk-member .otk-pf-sec__head h3{margin:0;font-size:var(--t-lg)}
.otk-member .otk-pf-rows{display:grid;gap:var(--s-2);margin:0;padding:var(--s-4) var(--s-5);border-radius:12px;background:var(--c-surface)}
.otk-member .otk-pf-rows > div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:var(--s-3);align-items:baseline}
.otk-member .otk-pf-rows dt{font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-ink-2)}
.otk-member .otk-pf-rows dd{margin:0;font-weight:var(--w-bold);color:var(--c-ink);overflow-wrap:anywhere}
.otk-member .otk-pf-rows:empty{display:none}
/* Signed-out header (2026-11-11): ログイン (quiet outline) + 新規登録 (brand). The pair fits beside the logo
   and the ベータ版 badge at 390px; the outline is the button's own frame, not a divider. */
.otk.otk-member .otk-btn-login--plain,.otk.otk-member .otk-btn-login--plain:hover{background:none;color:var(--c-ink)}
.otk.otk-member .otk-btn-login--plain{box-shadow:inset 0 0 0 1.5px var(--c-line-2)}
.otk.otk-member .otk-btn-login--plain:hover{box-shadow:inset 0 0 0 1.5px var(--c-ink)}
.otk.otk-member .otk-btn-login--reg:hover{background:var(--c-brand-hover)}
@media (max-width:479px){.otk.otk-member .otk-entry-auth-links .otk-btn-login{padding:0 var(--s-3)}}
/* detail-rebuild (2026-11-11): 体験版 events-mock css/app.css "B. Event detail", ported with its mechanism.
   DOM: .otk-dt-hero (photo) then .otk-dt-main (the white sheet) inside #event-detail-body, the book card beside
   them. Below 1024px the photo stays pinned under the header and the sheet slides over it with rounded top
   corners; the photo blurs, dims and grows slightly as it is covered (--hero-p, 0 → 1, set from scroll by
   heroFx() in member.mjs). From 1024px: two columns, the apply controls in the sticky book card. */
.otk-member .otk-dt__body{display:block}
.otk-dt-col{display:grid;gap:var(--s-6);min-width:0}
.otk-dt-main{position:relative;z-index:3;background:var(--c-bg);padding-top:var(--s-6)}
.otk-dt-hero[hidden] + .otk-dt-main{padding-top:0}
.otk-info-banners{display:grid;gap:var(--s-2)}
.otk-member .otk-dt-sec > .otk-fine{margin:0}
.otk-book-card > :not(.otk-cta-bar){display:none}
@media (max-width:1023px){
  .otk-dt-hero{position:sticky;top:calc(env(safe-area-inset-top,0px) + 56px);z-index:1}
  .otk-dt-hero .otk-gal__track{filter:blur(calc(var(--hero-p,0) * 10px)) brightness(calc(1 - var(--hero-p,0) * .55));transform:scale(calc(1 + var(--hero-p,0) * .06))}
  .otk-dt-hero .otk-dt-tools{opacity:calc(1 - var(--hero-p,0) * 1.6)}
  .otk-dt-hero:not([hidden]) + .otk-dt-main{margin-top:-24px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);border-radius:24px 24px 0 0}
  .otk-dt-hero :is(.otk-gal__dots,.otk-gal__count,.otk-fav-count){bottom:calc(24px + var(--s-3))}
}
@media (min-width:768px) and (max-width:1023px){
  .otk-dt-hero:not([hidden]) + .otk-dt-main{margin-inline:0;padding-inline:var(--s-6)}
  .otk-member .otk-dt-hero{border-radius:16px 16px 0 0}
}
@media (min-width:1024px){
  .otk-member #view-detail{max-width:1120px}
  .otk-dt-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s-12);align-items:start}
  .otk-dt-main{padding-top:var(--s-8)}
  .otk-member #event-facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-8)}
  .otk-member .otk-dt-sec h2{font-size:1.5rem}
  .otk-book-card{display:grid;gap:var(--s-4);position:sticky;z-index:4;top:calc(env(safe-area-inset-top,0px) + 60px + var(--s-6));padding:var(--s-6);border:1px solid var(--c-line-2);border-radius:12px;background:var(--c-bg)}
  .otk-book-card > :not(.otk-cta-bar){display:revert}
  .otk-dt__body[hidden] + .otk-book-card > :not(.otk-cta-bar){display:none}
  .otk-member p.otk-book-card__fee{display:flex;align-items:baseline;justify-content:space-between;margin:0;font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-ink-2)}
  .otk-book-card__fee b{font-size:2.25rem;line-height:1;color:var(--c-ink);font-variant-numeric:tabular-nums}
  .otk-member ul.otk-info-rows{display:grid;gap:var(--s-3);margin:0;padding:var(--s-4) 0;list-style:none;border:0}
  .otk-member ul.otk-info-rows > li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--s-3);align-items:center;margin:0;padding:0;border:0}
  .otk-info-rows__ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--c-surface);color:var(--c-ink)}
  .otk-info-rows__ic .otk-icon{width:18px;height:18px}
  .otk-info-rows b{display:block;font-size:var(--t-base);line-height:1.5;overflow-wrap:anywhere}
  .otk-info-rows span:not(.otk-info-rows__ic){display:block;font-size:var(--t-sm);color:var(--c-ink-2);line-height:1.5}
  .otk-info-rows span:empty{display:none}
  .otk-book-card .otk-cta-bar{position:static;z-index:auto;flex-direction:column;padding:0;background:none}
  body.otk-has-cta .otk-app{padding-bottom:var(--s-8)}
  body.otk-has-cta .otk-toast{bottom:calc(var(--s-6) + env(safe-area-inset-bottom,0px))}
}
/* Flight 1 (2026-11-11) — entrance panel of the login sheet: the four entrances as large rows. */
.otk-auth-rows{display:grid;gap:var(--s-2)}
.otk-member :is(section,dialog) button.otk-auth-row{display:grid;grid-template-columns:28px minmax(0,1fr) 20px;align-items:center;justify-content:stretch;gap:var(--s-3);width:100%;min-height:72px;padding:var(--s-3) var(--s-4);border:1.5px solid var(--c-line-2);border-radius:14px;background:var(--c-bg);color:var(--c-ink);text-align:left}
.otk-member :is(section,dialog) button.otk-auth-row:hover{background:var(--c-surface)}
.otk-auth-row__tx{display:grid;gap:2px;min-width:0}
.otk-auth-row__tx > b{font-size:var(--t-lg);font-weight:var(--w-black);line-height:1.4}
.otk-auth-row__tx > span{font-size:var(--t-sm);font-weight:var(--w-body);color:var(--c-ink-2);line-height:1.5}
.otk-member .otk-auth-row .otk-auth-row__ic{width:26px;height:26px;justify-self:center}
.otk-member .otk-auth-row .otk-auth-row__go{width:20px;height:20px;color:var(--c-ink-2)}

/* Phase 2: transplanted trial card sash, ev-mini, res-card, guide and crumbs.
   Missing token values are copied from events-mock/css/tokens.css. */
.otk-member :is(#events-list,#event-others,.otk-confirm-mini,#complete-event){--s-10:40px;--r-sm:8px;--r-md:12px;--c-av-2:#2d6a8a}
.otk-sash {
  position: absolute; z-index: 2; top: 0; left: 0; width: 92px; height: 92px; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 0 100%); border-top-left-radius: var(--r-md);
}
.otk-sash > span {
  position: absolute; top: 19px; left: -22px; width: 100px;
  transform: rotate(-45deg); text-align: center; white-space: nowrap;
  color: var(--c-white); font-size: 12px; font-weight: var(--w-black); letter-spacing: .04em; line-height: 1.2;
}
.otk-sash--new { background: var(--c-av-2); }
.otk-sash--new > span { letter-spacing: .14em; }

.otk-confirm-mini { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding-block: var(--s-3); }
.otk-confirm-mini img { width: 64px; height: 48px; border-radius: var(--r-sm); object-fit: cover; }


.otk-sash--full{background:var(--c-ink)}

.otk-member .otk-ev-cards > li{position:relative}
.otk-ev-card:not(:has(.otk-ev-card__ph)) .otk-ev-card__body{padding-right:56px}
.otk-member section button.otk-card-save{width:40px;min-width:40px;height:40px;min-height:40px}
@media(max-width:767px){.otk-member section button.otk-card-save{width:44px;min-width:44px;height:44px;min-height:44px}}
.otk-card-save{position:absolute;right:12px;top:12px;z-index:3}
/* GAPFIX (2026-11-13, Nakamura): the 「N件」 row → first card gap is half the trial's 40px. */
.otk-member #events-list{padding-block:20px 0}
.otk-list-meta b{color:var(--c-ink);font-size:var(--t-base);margin-right:2px}
.otk-list-meta{display:flex;align-items:center;margin-top:var(--s-2);padding-block:var(--s-3);font-size:var(--t-sm);color:var(--c-ink-2)}
.otk-confirm-mini b{display:block;font-size:var(--t-md);line-height:1.45}
.otk-confirm-mini span{display:block;font-size:var(--t-sm);color:var(--c-ink-2)}
.otk-confirm-mini:has(img[hidden]){grid-template-columns:minmax(0,1fr)}
.otk-member section.otk-doc-flow{gap:var(--s-3)}
.otk-member .otk-doc-flow h3{font-size:var(--t-lg);display:flex;gap:var(--s-2);align-items:center}
.otk-doc-flow ol{display:grid;gap:var(--s-3);counter-reset:g;list-style:none;padding:0}
.otk-doc-flow li{counter-increment:g;display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--s-2);font-size:var(--t-md);line-height:1.6;color:var(--c-ink)}
.otk-doc-flow li::before{content:counter(g);width:24px;height:24px;border-radius:50%;background:var(--c-ink);color:var(--c-white);font-weight:var(--w-black);font-size:12px;display:grid;place-items:center}
/* TRIAGE_DOCMARGIN: below 1024px the fixed bottom tabbar (88px at 390) covered the last line of 「提出の流れ」 on first
   paint (9px to spare at 390x844; already overlapping with the 3-line step note). The list carried two stacked,
   invisible spacings: the UA <ol> margin (16px above and below, on top of the section's 12px grid gap) and the page-wide
   section li padding-block (12px on each item). Drop both and space the items by the list gap alone: 20px between
   items (was 36px between texts), 12px heading to first item (was 40px), 24px after the last item (was 52px).
   Wording, font size and line height are unchanged; from 1024px (no tabbar, TRIAGE_HDRFIX geometry) nothing changes. */
@media (max-width:1023px){.otk-member .otk-doc-flow ol{margin:0;gap:var(--s-5)}.otk-member .otk-doc-flow li{padding-block:0}}
.otk-crumbs{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;font-size:12px;color:var(--c-ink-3);padding:10px 0 4px}
.otk-crumbs::-webkit-scrollbar{display:none}
.otk-crumbs__sep{flex:none}
.otk-crumbs a{color:var(--c-ink-2);text-decoration:none;white-space:nowrap}
.otk-crumbs a:hover{color:var(--c-brand);text-decoration:underline}
.otk-crumbs [aria-current="page"]{color:var(--c-ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:767px){.otk-crumbs a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}.otk-crumbs{padding-block:0}}

/* My page parity: events-mock/css/profile.css and css/app.css.
   Declarations copied from the trial; selectors use beta IDs/classes. */
.otk-member :is(#view-me,#view-my,#view-booking){--s-1:4px;--s-10:40px;--r-sm:8px;--r-md:12px;--r-lg:16px;--t-xs:.75rem;--d-slow:380ms}
.otk-member .otk-pf-sec { display: grid; gap: var(--s-4); min-width: 0; }
.otk-member .otk-pf-sec__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 40px; }
.otk-member .otk-pf-sec__head h3 { font-size: 1.25rem; }
.otk-member .otk-pf-music { background: var(--c-brand-tint); border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-6); }
.otk-member .otk-pf-rows > div { display: grid; grid-template-columns: minmax(5.5em, auto) minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding-block: 14px; }
.otk-member .otk-pf-rows > div:last-child { padding-bottom: 0; }
.otk-member .otk-pf-rows dt { font-size: var(--t-md); color: var(--c-ink-2); font-weight: var(--w-body); white-space: nowrap; }
.otk-member .otk-pf-rows dd { font-size: var(--t-base); font-weight: var(--w-bold); text-align: right; overflow-wrap: anywhere; line-height: 1.5; }
.otk-member .otk-pf-hub__ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface); }
.otk-member .otk-pf-hub__ic .otk-icon { width: 20px; height: 20px; }
.otk-member .otk-pf-hub :is(button,a) { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: var(--s-3); align-items: center; min-height: 76px; padding: var(--s-3) 0; border: 0; background: none; text-align: left; cursor: pointer; }
.otk-member .otk-pf-hub :is(button,a):hover b { text-decoration: underline; text-underline-offset: 3px; }
.otk-member .otk-pf-hub__tx { display: grid; gap: 4px; }
.otk-member .otk-pf-hub__tx b { display: flex; align-items: center; flex-wrap: wrap; font-size: var(--t-base); }
.otk-member .otk-res-card { border-radius: var(--r-md); background: var(--c-bg); overflow: hidden; border: 1px solid var(--c-line-2); }
.otk-member .otk-res-card__body { display: grid; gap: var(--s-4); padding: var(--s-5); }
.otk-member .otk-res-card__body h2 { font-size: var(--t-lg); }
.otk-member .otk-booking-wrap { display: grid; gap: var(--s-6); min-width: 0; }
.otk-member .otk-my-card { display: grid; grid-template-columns: 88px minmax(0, 1fr) 20px; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border: 0; background: none; text-align: left; cursor: pointer; width: 100%; animation: otk-my-rise var(--d-slow) var(--ease-out) both; }
.otk-member .otk-my-card::after { content: "›"; font-size: 24px; font-weight: var(--w-bold); color: var(--c-ink); }
.otk-member .otk-my-card:hover .otk-my-card__title { text-decoration: underline; text-underline-offset: 3px; }
.otk-member .otk-my-card__ph { position: relative; width: 96px; height: 72px; border-radius: var(--r-sm); overflow: hidden; }
.otk-member .otk-my-card__body { display: grid; gap: 4px; min-width: 0; }
.otk-member .otk-my-card__title { font-weight: var(--w-black); font-size: var(--t-base); line-height: 1.45; }
.otk-member .otk-my-card__when { font-size: var(--t-sm); color: var(--c-ink-2); display: flex; align-items: center; gap: 4px; }
.otk-member .otk-my-card__top { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.otk-member #view-me{max-width:600px;margin-inline:auto;gap:var(--s-10);padding-top:var(--s-6)}
.otk-member .otk-pf{gap:var(--s-10)}
.otk-member .otk-pf-hub{margin:0;padding:0;list-style:none;display:block;border:0}
.otk-member .otk-pf-hub > li{display:block;padding:0;border:0}
.otk-member .otk-pf-hub :is(button,a){color:var(--c-ink);text-decoration:none;border-radius:0;font-weight:var(--w-bold)}
.otk-member .otk-pf-hub [hidden]{display:none}
.otk-member .otk-pf-hub small{font-size:var(--t-sm);font-weight:var(--w-body);color:var(--c-ink-2)}
/* LP footer (2026-11-12): the LP's own <footer class="site-footer"> closes the guest list (#list-lpfoot; members never see it).
   Values are the LP's, 1:1: lp-eventlist-mock/site brand-lp.css (.site-footer, .content-wide, body font, a/img base rules)
   and events-mock.css (centred nav, 44px rows below 768px). The footer leaves the list column to span the viewport, as on
   the LP; the list and main lose their bottom padding while it shows, so it reaches the page end. */
.otk-member .otk-main:has(> #view-list:not([hidden]) > .otk-lpfoot:not([hidden])){padding-bottom:0}
.otk-member #view-list:has(> .otk-lpfoot:not([hidden])){padding-bottom:0}
.otk-member .otk-lpfoot{box-sizing:border-box;margin:var(--s-12) calc(50% - 50vw) 0;background:#333;color:#fff;padding:60px 0 35px;font-family:Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;font-size:16px;font-weight:600;line-height:1.7;letter-spacing:normal;text-align:left}
.otk-member .otk-lpfoot *{box-sizing:border-box}
.otk-member .otk-lpfoot__in{width:min(1100px,calc(100% - 48px));margin-inline:auto}
.otk-member .otk-lpfoot a{color:inherit;font-size:14px;font-weight:inherit;text-decoration:none}
.otk-member .otk-lpfoot a.otk-lpfoot__logo{display:block;width:330px;max-width:75%;margin:0 auto 45px}
.otk-member .otk-lpfoot__logo svg{display:block;width:100%;height:auto}
.otk-member .otk-lpfoot nav{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin:0 0 25px;padding:0}
.otk-member .otk-lpfoot small{display:block;text-align:center;font-size:13px}
@media (max-width:767px){.otk-member .otk-lpfoot nav{gap:8px}.otk-member .otk-lpfoot nav a{display:flex;align-items:center;min-height:44px}}
@media (max-width:700px){.otk-member .otk-lpfoot__in{width:calc(100% - 48px)}.otk-member .otk-lpfoot nav{display:grid}.otk-member .otk-lpfoot nav a{justify-content:center;text-align:center}}
@media (max-width:390px){.otk-member .otk-lpfoot__in{width:calc(100% - 36px)}}
.otk-member .otk-pf-rows{display:block;margin:0;background:var(--c-bg)}
.otk-member .otk-pf-rows dd{margin:0}
.otk-member .otk-my-card{justify-items:stretch;border-radius:0}
.otk-member .otk-my-card:has(> .otk-my-card__ph){grid-template-columns:88px minmax(0,1fr) 20px}
.otk-member .otk-my-card:not(:has(> .otk-my-card__ph)){grid-template-columns:minmax(0,1fr) 20px}
.otk-member .otk-my-card__ph{aspect-ratio:auto}
.otk-member .otk-booking-side{display:grid;gap:var(--s-5);min-width:0}
.otk-member .otk-res-card__body #application-details{margin:0}
@media (min-width:768px){.otk-member #view-me{max-width:624px}.otk-member .otk-booking-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-10);max-width:1040px;margin-inline:auto;align-items:start}}
.otk-member .otk-pf-rows { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-1) var(--s-5); }
.otk-member #booking-actions { display: grid; gap: var(--s-2); }
.otk-member .otk-res-card__ph { position: relative; aspect-ratio: 4 / 3; max-width: 100%; }
.otk-member .otk-res-card__ph img { width: 100%; height: 100%; object-fit: cover; }
.otk-member .otk-pf-private { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-surface); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.otk-member .otk-pf-none { display: grid; justify-items: start; gap: var(--s-3); }
.otk-member #me-upcoming-title{font-size:1.25rem;margin:0}
.otk-member #profile-hitokoto{padding:0;background:none;border-radius:0;font-size:1.0625rem;font-weight:var(--w-bold);line-height:1.75}
.otk-member #profile-hitokoto-head{display:none}
.otk-member #pf-sec-music .otk-pf-sec__head h3::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c-brand);margin-right:8px;vertical-align:3px}
.otk-member #profile-artists .otk-pf-tag{font-size:var(--t-base)}
.otk-member :is(.otk-pf-sec,#booking-actions,.otk-res-card__ph)[hidden]{display:none}

.otk-member #view-booking{max-width:1040px}

.otk-member .otk-my-card__when .otk-icon{width:14px;height:14px;color:var(--c-ink);order:-1;flex:none}

/* Trial viewMy favHtml / .fav-row: the remove button is outside the card. */
.otk-member #favorites-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.otk-member .otk-fav-row{align-items:center}
.otk-member .otk-fav-row .otk-my-card:has(> .otk-my-card__ph){grid-template-columns:88px minmax(0,1fr)}
.otk-member .otk-fav-row .otk-my-card:not(:has(> .otk-my-card__ph)){grid-template-columns:minmax(0,1fr)}
.otk-member .otk-fav-row .otk-my-card::after{display:none}
.otk-member .otk-my-list{gap:0;padding-block:var(--s-2) 0}

@keyframes otk-my-rise { from { opacity: .001; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion:reduce){.otk-member .otk-my-card{animation-duration:.01ms!important;animation-iteration-count:1!important}}

.otk-member .otk-doc-submit{grid-column:1/-1;width:100%;min-width:0;margin-top:16px}
/* Night batch: own photo and settings */
.otk-me-head{display:flex;align-items:center;justify-content:space-between}
.otk-pf-av{position:relative;cursor:pointer;overflow:hidden}
.otk-pf-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.otk-member #withdrawal-form{padding:16px}
/* Follow-up: guest actions, entrance and document spacing. */
.otk-member #view-need-login .otk-empty__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:400px;margin-inline:auto}
.otk-member #view-need-login .otk-empty__actions button{width:100%;height:48px;margin:0}
.otk-guest-links{display:grid;gap:16px;margin-top:24px}
.otk #signup-open{background:var(--c-brand-ink);color:var(--c-white);border-color:var(--c-brand-ink)}
.otk #signup-open :is(b,span,svg){color:inherit}
.otk-member .otk-pf-av{background:#e5e5e5;color:#999;cursor:default}
.otk-doc-intro{display:grid;gap:16px;margin-bottom:24px}
.otk-doc-intro p{margin:0}

/* Profile summary: more breathing room around the three registered facts. */
.otk-member #profile-basic { padding-block: var(--s-5); }
.otk-member #profile-basic > div { padding-block: var(--s-4); }
.otk-member #profile-basic > div:first-child { padding-top: 0; }
.otk-member #profile-basic > div:last-child { padding-bottom: 0; }
/* Registration DOB uses the trial's native year/month/day selects. */
.otk-member .otk-dob-field{margin:12px 0}
.otk-member .dob{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-2)}
.otk-member .dob > select{box-sizing:border-box;width:100%;min-width:0;max-width:none;height:var(--tap);padding:0 var(--s-4);border-radius:8px;border:1.5px solid var(--c-line-2);background:var(--c-bg);font:inherit;font-size:16px;color:var(--c-ink)}
.otk-member .dob > select:focus{outline:none;border-color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)}
.otk-member .dob > select[aria-invalid="true"]{border-color:var(--c-danger,#b42318)}

/* 体験版 .back-link */
.otk-member .otk-route-back{width:auto;max-width:none;justify-self:start;justify-content:flex-start;margin:0;display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;font-weight:700;color:var(--c-ink);font-size:14px;cursor:pointer;min-height:44px}
.otk-member .otk-route-back .otk-icon{width:18px;height:18px}
/* Final device fixes: FAQ withdrawal, select inset and verification entry. */
.otk-member #withdrawal-form{display:grid;gap:var(--s-4);min-width:0}
.otk-member #withdrawal-form > label{min-width:0}
.otk-member #withdrawal-comment{display:block;box-sizing:border-box;width:100%;min-width:0}
.otk-member #withdrawal-comment-count{margin:-8px 0 0;text-align:right;font-size:var(--t-sm);color:var(--c-ink-2)}
.otk-member #withdrawal-form label.otk-check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s-3);align-items:start;line-height:1.6;padding-left:0}
.otk-member #withdrawal-confirm{position:static;width:22px;height:22px;margin:2px 0 0;padding:0}
.otk-member #withdrawal-send{width:100%;max-width:none;box-sizing:border-box;margin:0}
.otk-member select:not([multiple]):not([size]){appearance:none;background-image:linear-gradient(45deg,transparent 50%,#555 50%),linear-gradient(135deg,#555 50%,transparent 50%);background-repeat:no-repeat;background-size:5px 5px;background-position:right 21px center,right 16px center;padding-right:44px}
.otk-member .otk-doc-open{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-3);grid-column:1/-1;width:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;text-align:left;white-space:normal}
.otk-member .otk-doc-open:disabled{opacity:1;cursor:default}
.otk-member .otk-doc-open:not(:disabled) .otk-kyc-item__body > b{text-decoration:underline;text-underline-offset:4px}
.otk-member .otk-doc-open:focus-visible{outline:2px solid var(--c-brand);outline-offset:6px}
/* TRIAGE_HDRFIX390: below 1024px (56px member header, bottom tabbar shown) the same two resting positions now put
   the first step row at 76px (header 56 + 20, the ≥1024 relationship), so the flow (it ends ≥56px above #doc-steps)
   is never partly under the header:
   - proceedDocument(): scroll-margin 12 + html scroll-padding-top 64 = 76 (was 100 + 64 = 164px, which cut item 3);
   - page end: #doc-steps reserves 100dvh - 76px - 120px (the space below it: view padding 24 + main padding 32 +
     the tabbar's body padding 64 + safe-area inset).
   - row 2 (step 2) uses scroll-margin 108 = 12 + row 1 (84px, the finished row) + the 12px row gap, so it lands at
     172 with row 1 at 76: the spot every page-end-clamped step-2 scroll already reaches. At 76 an 8px strip of
     row 1 stayed under the header, and a landing that hides row 1 gets clamped at the page end on short screens.
   The ≥1024 rule below overrides the first two declarations, and the row-2 rule is scoped to <1024. */
.otk-member .otk-kyc-item{scroll-margin-top:12px}
.otk-member #doc-steps{min-height:calc(100dvh - 196px - env(safe-area-inset-bottom,0px));align-content:start}
@media (max-width:1023px){.otk-member .otk-kyc-item + .otk-kyc-item{scroll-margin-top:108px}}
/* TRIAGE_HDRFIX: from 1024px the documents page was shorter than one screen past 「提出の流れ」, so its last scroll
   position (a wheel scroll to the form, or proceedDocument()'s scrollIntoView clamped at the page end) left a flow
   item under the 60px sticky header. Both resting positions now put the first step row at 80px (20px below the
   header), so the flow (it ends 56px above #doc-steps) lies wholly above the header:
   - page end: #doc-steps reserves 100dvh - 80px - 56px (the space below it: view padding 24 + main padding 32);
   - proceedDocument(): scroll-margin 16 + html scroll-padding-top 64 (was 100 + 64 = 164px, which cut item 3).
   align-content:start keeps the rows at their own height inside the reserved grid. */
@media (min-width:1024px){.otk-member #doc-steps{min-height:calc(100dvh - 136px);align-content:start}.otk-member .otk-kyc-item{scroll-margin-top:16px}}
/* TRIAGE_CAMERA #5: the fixed 「本人確認を進める」 bar is gone (the step rows lead the way), and with it the extra
   bottom padding of #view-documents that kept the last row clear of the bar; the view uses the normal .otk-view padding. */

/* Application event cards: match the trial card's compact title and information rows. */
.otk-member .otk-res-card__body h2{margin:0}
.otk-member .otk-res-card__body ul.otk-info-rows{padding:0;gap:var(--s-3)}

/* Keep only the message label on one line, including at 390px. */
.otk .otk-tabbar button[aria-label="メッセージ（準備中）"]{white-space:nowrap}

/* Final2: reuse list-card components for reservation summaries. */
.otk-member .otk-booking-main{display:grid;gap:20px;min-width:0}
.otk-member .otk-res-card{padding:16px}
.otk-member .otk-ev-card--summary{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:16px;align-items:start}
.otk-member .otk-ev-card--summary .otk-ev-card__body{padding:0;gap:8px}
.otk-member .otk-ev-card--summary .otk-ev-card__title{font-size:16px}
.otk-member .otk-ev-card--summary .otk-ev-card__when{display:grid;gap:4px;font-size:13px;line-height:1.5}
.otk-member .otk-ev-card--summary .otk-ev-card__when > span{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}
.otk-member .otk-ev-card--summary .otk-ev-icon{flex:0 0 16px}
.otk-member .otk-ev-card--summary .otk-ev-card__ph{aspect-ratio:1;margin:0}
.otk-member .otk-ev-card--summary:not(:has(.otk-ev-card__ph)){grid-template-columns:1fr}
.otk-member #doc-submit{display:grid;gap:20px;padding-top:8px}
.otk-member #doc-submit[hidden]{display:none}
.otk-member #doc-submit > *{margin:0}
.otk-member #doc-submit .otk-file{display:grid;gap:12px}
@media(min-width:1024px){body.otk-wide-view .otk-hdr__in{max-width:calc(720px + 2 * var(--gutter))}}

/* Verification camera: the guide is visual only; retain the complete photo. */
.otk-member #camera-dialog { width: min(94vw, 680px); max-height: 94dvh; overflow: auto; border: 0; border-radius: 16px; padding: 20px; }
.otk-member #camera-dialog::backdrop { background: rgb(0 0 0 / .65); }
.otk-camera-stage { position: relative; background: #111; }
.otk-camera-stage video, .otk-camera-stage img { display: block; width: 100%; max-height: 65dvh; object-fit: contain; }
.otk-camera-stage [hidden] { display: none; }
.otk-member #camera-guide { position: absolute; width: 82%; max-height: 85%; aspect-ratio: 85.6 / 53.98; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid white; border-radius: 10px; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .25); pointer-events: none; }
.otk-camera-stage { overflow: hidden; }
.otk-camera-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.otk-member #camera-error { color: #a32929; }

/* Next2: compact verification entry, shared privacy note and aligned event cards. */
.otk-member #view-me{gap:24px}
.otk-member #sec-mypage{gap:24px}
.otk-member #sec-mypage > #profile-status:empty{display:none}
.otk-member #sec-mypage .otk-pf-head{padding:0;border:0;border-radius:0}
.otk-member #sec-mypage .otk-pf-photo-note{margin:0}
.otk-member #me-verification{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:12px 0;color:var(--c-ink);text-decoration:none}
.otk-member #me-verification-state{grid-column:1;font-size:var(--t-sm);color:var(--c-ink-2)}
.otk-member #me-verification > [aria-hidden]{grid-column:2;grid-row:1 / 3;font-size:24px}
.otk-member .otk-kyc-note{font-size:var(--t-xs);line-height:1.6;color:var(--c-ink-2);padding:0;background:none;border:0}
.otk-member .otk-my-card:has(> .otk-my-card__ph){grid-template-columns:96px minmax(0,1fr) 20px}
.otk-member .otk-my-card > .otk-my-card__ph{grid-row:1;grid-column:1;align-self:center}
.otk-member .otk-my-card > .otk-my-card__body{grid-row:1;grid-column:2}
.otk-member .otk-my-card:not(:has(> .otk-my-card__ph)) > .otk-my-card__body{grid-column:1}
.otk-member .otk-my-card::after{grid-row:1;grid-column:-2}
.otk-member .otk-fav-row .otk-my-card:has(> .otk-my-card__ph){grid-template-columns:96px minmax(0,1fr)}
/* One overlay switches between the card outline and a head/shoulders silhouette.
   TRIAGE_CAMERA #1: the head and shoulders used to be % of a box that followed the video's shape, so on a portrait
   front camera the head oval became about 2.3 times as tall as wide. Now the box is square (90% of the stage height,
   at most 90% of its width) and both shapes are sized and placed from its width only (aspect-ratio, and margin %
   which also refers to the width), so they keep their shape whatever the box: head oval 40% wide at height:width
   1.36 (a real head is about 1.3–1.5), shoulders 100% wide (2.5 head widths) and 40% high, the chin 2% above the
   shoulder line. The figure (97.2% of the width tall) is centred on the box's middle: bottom:50% + margin -48.6%. */
.otk-member #camera-guide[data-purpose="photo"]{width:auto;height:90%;max-width:90%;max-height:90%;aspect-ratio:1/1;border:0;border-radius:0;box-shadow:none}
.otk-member #camera-guide[data-purpose="photo"]::before{content:"";position:absolute;top:auto;bottom:50%;left:30%;width:40%;height:auto;aspect-ratio:1/1.36;margin-bottom:-6.6%;border:3px solid white;border-radius:50%;box-sizing:border-box}
.otk-member #camera-guide[data-purpose="photo"]::after{content:"";position:absolute;top:auto;bottom:50%;left:0;width:100%;height:auto;aspect-ratio:1/.4;margin-bottom:-48.6%;border:3px solid white;border-bottom:0;border-radius:50% 50% 0 0;box-sizing:border-box}
/* TRIAGE_CAMERA #2–#4: after a shot the buttons read この写真を使う (primary, pink) → 撮り直し → 閉じる (DOM order),
   and the taken photo is shown one size smaller (80% of the stage width, lower height cap) on the dialog background.
   Display only: the File sent is still the full-resolution canvas blob. */
.otk-member .otk-camera-stage:has(> #camera-preview:not([hidden])){background:transparent}
.otk-member .otk-camera-stage > #camera-preview{width:80%;max-height:52dvh;margin-inline:auto;border-radius:8px}
/* Center both icon boxes and compensate for the bell artwork sitting low in its viewBox. */
.otk .otk-hdr__act .otk-bell{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;margin:0}
.otk .otk-hdr__act .otk-bell > .otk-icon{display:block;flex:none;margin:0}

.otk .otk-hdr__act .otk-bell[aria-label="お知らせ"] > .otk-icon{transform:translateY(-1.5px)}

/* Polish pass (TRIAGE_POLISH.md): spacing / alignment / overlap only, measured at 390px and 1280px. */
/* P1 The camera <dialog> sits inside #doc-submit, whose `> *{margin:0}` removed the dialog's auto margins, so
   it was pinned to the top-left corner. Centre it again like every other dialog. */
.otk-member #doc-submit > #camera-dialog{margin:auto}
/* P2 お気に入り rows: `.otk-ev-cards > li{display:block}` overrode the row grid, so the remove heart fell
   under the card. The row is card | 44px heart, vertically centred (the existing .otk-fav-row rules). */
.otk-member .otk-ev-cards.otk-fav-list > li.otk-fav-row{display:grid}
/* P3 In the sheet every field label is 16px; the 性別 legend was 13px. */
.otk-member #sheet .otk-gender legend{font-size:var(--t-base)}
/* P4 My card date/area rows: when the date wraps, the icon centred on both lines; keep it on the first line. */
.otk-member .otk-my-card__when{align-items:flex-start}
.otk-member .otk-my-card__when .otk-icon{margin-top:4px;margin-top:calc((1lh - 14px) / 2)}
/* P5 設定 is the only page title outside .otk-page-head and fell back to the browser's 2em (32px);
   every other page title is --t-2xl (28px). */
.otk-member #settings-heading{font-size:var(--t-2xl);letter-spacing:-.03em}
/* P6 マイページ started 8px lower than マイイベント (both are bottom-menu top pages without a back link). */
.otk-member #view-me{padding-top:var(--s-4)}
/* P7 本人確認: 「画像を選ぶ」 and 「カメラで撮影」 are the two ways to pick the same image; same pill size, side by side. */
.otk-member #doc-submit button#camera-open{width:auto;padding:0 var(--s-5)}
.otk-member #doc-submit label.otk-file__btn{font-size:var(--t-base)}
/* P8 The bottom menu is 88px tall (labels with 準備中 take two lines), not 64px: the toast covered its top 12px.
   Keep a 12px gap above the menu. (The fixed 「本人確認を進める」 bar this also moved was removed in TRIAGE_CAMERA #5.) */
@media (max-width:1023px){
 body.otk-has-tabbar .otk-toast{bottom:calc(100px + env(safe-area-inset-bottom,0px))}
}
/* P9 While a sheet is open the same message is shown inside it (#sheet-status / #cancel-status); the page toast
   behind the backdrop peeked out under the 1280px sheet. */
body.otk-member:has(> dialog[open]) > .otk-toast{visibility:hidden}

/* TRIAGE_FIX2 (checker full-screen pass): display / behaviour only. */
/* #1 The toast never takes clicks. member.mjs hides it after 4s. (TRIAGE_CAMERA #5: the fixed 本人確認 bar it was
   lifted above is gone, so in 本人確認 the toast sits where it does on every other page.) */
.otk-member .otk-toast{pointer-events:none}
.otk-member .otk-toast[hidden]{display:none}
/* #2 --t-xs is only defined for #view-me/#view-my/#view-booking, so in 本人確認 the note fell back to the inherited
   15px. And the empty #camera-error line took a grid row, doubling the 20px gap above the note: while it is empty it
   leaves the flow (still rendered, so its role=status keeps announcing); with text it is a normal row as before. */
.otk-member .otk-kyc-note{font-size:var(--t-xs,.75rem)}
.otk-member #doc-submit > #camera-error:empty{position:absolute}
/* #3 「画像を選ぶ」 (icon + 5 characters) and 「カメラで撮影」 (6 characters) were 150px / 138px: one shared width, centred. */
.otk-member #doc-submit :is(label.otk-file__btn,button#camera-open){box-sizing:border-box;min-width:9.5em;justify-content:center}
/* #4 My Events / お気に入り card: the time range (e.g. 19:00〜21:30) is one unbreakable piece; the date before it wraps. */
.otk-member .otk-my-card__when > .otk-my-card__sched{min-width:0}
.otk-member .otk-my-card__when .otk-my-card__time{white-space:nowrap}
/* #5 The bell artwork sits 1.4px low in its viewBox (ink centre y=13.4 of 24); the -1.5px lift only matched
   aria-label="お知らせ", so with an unread badge (aria-label お知らせ（未読n件）) the bell dropped back down. */
.otk .otk-hdr__act #notice-bell > .otk-icon{transform:translateY(-1.5px)}

/* GOOGLE-POPUP: the Google login popup's 「ログインしています」 page (src/runtime/google-popup-page.mjs), shown
   for a moment while the opener reads the result and closes the popup. Plain member look, no dividers. */
.otk-gpop__main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);min-height:100vh;min-height:100dvh;padding:var(--s-8) var(--gutter);text-align:center}
.otk-gpop__brand{margin:0 0 var(--s-4);color:var(--c-brand);font-size:var(--t-lg);font-weight:var(--w-bold);letter-spacing:.04em}
.otk-gpop__spin{display:block;width:36px;height:36px;border-radius:50%;border:3px solid var(--c-brand-tint);border-top-color:var(--c-brand);animation:otkGpopSpin .9s linear infinite}
.otk-gpop__title{font-size:var(--t-lg);font-weight:var(--w-bold)}
.otk-gpop__note{max-width:22em;margin:0;color:var(--c-ink-2);font-size:var(--t-sm);line-height:1.6}
@keyframes otkGpopSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.otk-gpop__spin{animation-duration:2.4s}}
/* TRIAGE_SKELETON (2026-11-12): skeleton loaders, ported from the 体験版 —
   ~/workspace/lp-eventlist-mock/app-build/events-mock/css/app.css 744-772 「Skeleton (loading)」 (rules, sizes,
   sweep animation) and js/app.js 1533-1578 (skelCard / skelList / skelDetail markup). Class names gain the otk-
   prefix (UI-INT2: every app.css selector starts with .otk). The trial's inline style="width:…" pieces are width
   classes (.otk-sk-w*), because member CSP is style-src 'self'. --r-* tokens fall back to the trial's values
   (tokens.css 65-68), since β defines them only inside some views. No borders or rules: whitespace only. */
.otk-sk{display:block;position:relative;overflow:hidden;border-radius:var(--r-sm,8px);background:var(--c-surface-2)}
.otk-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:skShimmer 1.3s ease-in-out infinite}
.otk-sk-photo{aspect-ratio:4 / 3;max-width:100%;border-radius:var(--r-md,12px)}
.otk-sk-line{height:14px;width:100%}
.otk-sk-line--title{height:22px;width:85%}
.otk-sk-line--h1{height:26px;width:80%}
.otk-sk-chip{flex:none;height:40px;border-radius:var(--r-pill,999px)}
.otk-sk-pill{width:84px;height:26px;border-radius:var(--r-pill,999px)}
.otk-sk-circle{width:32px;height:32px;border-radius:50%}
.otk-sk-circle--md{width:44px;height:44px}
.otk-sk-btn{height:56px;width:100%;border-radius:var(--r-pill,999px)}
.otk-sk-row{display:flex;flex-wrap:wrap;gap:6px}
.otk-ev-card--sk{cursor:default}
.otk-ev-card--sk .otk-ev-card__body{gap:10px;margin-top:4px}
.otk-dt-hero.otk-sk{border-radius:0}
.otk-list-meta .otk-sk-line{height:12px}
/* The trial's skeleton cards sit in .cards (css/app.css 255, padding-block:var(--s-10) 0). β halves that top gap on
   #events-list (GAPFIX, 20px), and the skeleton follows, so the first card does not move when the list arrives. */
.otk-member #events-sk > .otk-ev-cards{padding-block:20px 0}
/* β's count row is one line of <b> text (larger than the trial's meta line): an empty strut of that size keeps the
   skeleton row the same height, so the first card does not move when the list arrives. */
.otk-member #events-sk > .otk-list-meta::before{content:"\200b";font-size:var(--t-base)}
.otk-sk-facts > div .otk-sk-line{height:14px}
.otk-cta-bar .otk-sk-btn{flex:1}
@keyframes skShimmer{to{transform:translateX(100%)}}
/* β's hero is rounded from 768px (the trial's from 1024px: @media (min-width:1024px) .dt-hero__photo.sk). */
@media (min-width:768px){.otk-dt-hero.otk-sk{border-radius:16px}}
/* The trial's inline widths/heights (js/app.js 1539, 1550, 1566, 1568). */
.otk-sk.otk-sk-w90{width:90px}.otk-sk.otk-sk-w72{width:72%}.otk-sk.otk-sk-w70{width:70%}.otk-sk.otk-sk-w85{width:85%}.otk-sk.otk-sk-w60{width:60%}.otk-sk.otk-sk-w50{width:50%}.otk-sk.otk-sk-w40{width:40%}
.otk-sk.otk-sk-h20{height:20px}.otk-sk.otk-sk-h28{height:28px}
/* The trial's two inline grids (js/app.js 1563, 1568) and its .facts / .facts > div layout (css/app.css 453-454)
   without β's facts hairlines. */
.otk-sk-col{display:grid;gap:var(--s-6);min-width:0}
.otk-sk-stack{display:grid;gap:10px}
.otk-sk-facts{display:grid}
.otk-sk-facts > div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:var(--s-3);padding-block:var(--s-3);align-items:baseline}
.otk-sk-set[hidden]{display:none}
/* The apply sheet's mode text (4 lines at 390px): one trial .sk-line per text line, each centred in one line box, so
   the sheet keeps its height when the text replaces the lines. */
.otk-member #confirm-kyc-sk{gap:0}
.otk-member #confirm-kyc-sk > .otk-sk-line{margin-block:5px;margin-block:calc((1lh - 14px) / 2)}
@media (min-width:600px){.otk-member #confirm-kyc-sk > .otk-sk-line:nth-child(3){display:none}}
@media (min-width:600px) and (max-width:767px){.otk-member #confirm-kyc-sk > .otk-sk-line:nth-child(2){display:none}}
/* Skeleton rows are not links: no chevron. The booking view hides its still-empty card frame behind its skeleton. */
.otk-member .otk-my-card--sk::after{content:none}
.otk-member #view-booking:has(#booking-sk:not([hidden])) .otk-booking-wrap{display:none}
/* β list cards: `.otk-member .otk-ev-cards > li{display:block}` would drop the trial .ev-card grid (css/app.css 256). */
.otk-member .otk-ev-cards > li.otk-ev-card--sk{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);padding:0;border:0;background:none}
/* Waiting shapes for β views the trial has no skeleton for (documents steps, notices, profile name), built
   from the same pieces. */
.otk-sk-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-3);padding:var(--s-4)}
.otk.otk-member p[data-sk]{min-height:1.5em;max-width:12em;border-radius:var(--r-sm,8px)}
/* The trial's sr-only 「…を読み込み中」 heading: β keeps its own role=status line (and its text), visually hidden while
   the skeleton beside it is shown. */
.otk-member [role="status"]:has(+ .otk-sk-set:not([hidden])),.otk-member #view-detail:has(#event-detail-sk:not([hidden])) #event-detail-status,.otk-member #sec-mypage:has(#profile-sk:not([hidden])) #profile-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* A control or label whose real text is a waiting text (申込状況を確認中, 取得中) is drawn as the trial's .sk-btn /
   .sk-line in place: same box, text kept for screen readers and tests, transparent on screen. */
.otk.otk-member [data-sk]{position:relative;overflow:hidden;color:transparent!important;background:var(--c-surface-2)!important;border-color:transparent!important;box-shadow:none!important;opacity:1!important;cursor:default}
.otk.otk-member [data-sk] > *{visibility:hidden}
.otk.otk-member button[data-sk]{border-radius:var(--r-pill,999px)}
.otk.otk-member span[data-sk]{display:inline-block;justify-self:start;width:6em;max-width:100%;border-radius:var(--r-sm,8px);line-height:1.4}
.otk.otk-member [data-sk]::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:skShimmer 1.3s ease-in-out infinite;visibility:visible}
/* The trial stops every animation under reduced motion (css/app.css 785-787). */
@media (prefers-reduced-motion:reduce){.otk-sk::after,.otk.otk-member [data-sk]::after{animation:none;transform:translateX(100%)}}
/* TRIAGE_DOCFIX B: the 本人写真 step is camera-only. member.mjs disables #image on that step (it still carries the
   camera shot to the upload), and its 「画像を選ぶ」 pill leaves the layout, so nothing opens a file picker there and the
   invisible full-size input is no drop target either. The 本人確認書類 step keeps both ways. */
.otk-member #doc-submit label.otk-file__btn:has(> input:disabled){display:none}

/* LEGAL (2026-11-13): 利用規約 /terms.html, プライバシーポリシー /privacy-policy.html, 本人確認情報の取扱い /privacy.html.
   Layout and type scale from the LP's legal pages (otokara.jp/legal.css: pink hero, 860px white article card,
   h2 clamp(22px,3.2vw,30px), h3 18px pink, line-height 1.9). Adapted: weights capped at 700 (the LP uses 900),
   body stays at the beta's 600, the LP's header rule and summary rules are left out (no divider lines; the
   card's own outline stays), no LP header/footer content. Clause numbers 「1. 」「・」 stay text in .otk-legal__no. */
body.otk-legal{background:#f7f7f7;color:#333;line-height:1.9}
.otk-legal__main{max-width:none;margin:0;padding:0}
.otk-legal__hero{padding:76px 24px 62px;background:linear-gradient(115deg,#fc5c6c 0%,#fa1d88 100%);color:#fff}
.otk-legal__hero-in{width:min(100%,860px);margin:0 auto}
.otk-legal__hero h1{font-size:clamp(28px,4.4vw,44px);font-weight:700;line-height:1.4;letter-spacing:-.035em}
.otk-legal__hero h1 > span{display:inline-block}
.otk-legal__date{margin:20px 0 0;font-size:13px;font-weight:700}
.otk-legal__doc{width:min(100% - 48px,860px);margin:54px auto 90px;padding:clamp(28px,5vw,64px);border:1px solid rgba(51,51,51,.13);border-radius:28px;background:#fff;overflow-wrap:anywhere}
.otk-legal__doc > :first-child{margin-top:0}
.otk-legal__doc h2{margin:54px 0 18px;padding-top:4px;font-size:clamp(22px,3.2vw,30px);font-weight:700;line-height:1.55;letter-spacing:-.025em}
.otk-legal__doc h3{margin:30px 0 12px;color:#fa1d88;font-size:18px;font-weight:700;line-height:1.65}
.otk-legal__doc p{margin:0 0 18px}
.otk-legal__doc :is(ul,ol){margin:0 0 20px;padding-left:1.5em}
.otk-legal__doc li{margin:5px 0}
.otk-legal__doc .otk-legal__items{list-style:none;padding-left:2em}
.otk-legal__doc .otk-legal__items--sub{margin:5px 0 0;padding-left:1em}
.otk-legal__no{display:inline-block;width:2em;margin-left:-2em}
.otk-legal__items--sub .otk-legal__no{width:1em;margin-left:-1em}
.otk-legal__note{color:#666;font-size:13px}
.otk-legal__doc .otk-legal__end{margin:36px 0 0;text-align:right}
@media (max-width:640px){
  body.otk-legal{font-size:15px;line-height:1.85}
  .otk-legal__hero{padding:48px 20px 40px}
  .otk-legal__hero h1{font-size:26px}
  .otk-legal__doc{width:calc(100% - 32px);margin:28px auto 60px;padding:28px 20px 34px;border-radius:20px}
  .otk-legal__doc h2{margin-top:42px;font-size:21px}
  .otk-legal__doc h3{font-size:16px}
}
/* beta-apply-checklist: 申し込み前の確認 in the apply sheet. No rules or borders — whitespace separates;
   each label keeps the sheet's 44px checkbox tap target (#sheet label:has(> input[type=checkbox])). */
.otk-member .otk-apply-checks{display:grid;gap:var(--s-2);margin:0}
.otk-member .otk-apply-checks :is(h3,p){margin:0}
.otk-member .otk-apply-checks__list{display:grid;gap:var(--s-1)}
.otk-member .otk-apply-checks__list > label{color:var(--c-ink)}