/* ============================================================
   內 UCHI — EN Members Club · refined web theme
   High izakaya, private club. Restraint over saturation.
   Warm near-black lacquer; paper-cream is the quiet "pop";
   oxblood/rust only in small doses. Builds on colors_and_type.css.
   Scoped under .uchi-web. Web-first, responsive.
   ============================================================ */

.uchi-web {
  /* ---- DARK (default): warm near-black lacquer ---- */
  --bg:        #16100C;
  --bg-2:      #1B1410;
  --surface:   #211A14;
  --surface-2: #29201A;
  --field:     #1A130E;
  --ink:       #EAE0CE;
  --ink-2:     rgba(234,224,206,0.60);
  --ink-3:     rgba(234,224,206,0.38);
  --line:      rgba(234,224,206,0.10);
  --line-2:    rgba(234,224,206,0.18);
  --accent:    #C06A48;   /* lightened oxblood — used sparingly */
  --accent-2:  #C9A878;   /* faint old-gold — rules, marks */
  --shadow-1:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-2:  0 20px 50px rgba(0,0,0,0.5);
  --on-accent: #16100C;

  --maxw: 1180px;
  --nav-h: 76px;
  --density: 1;

  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- PAPER theme (default): uncoated cream, ink, oxblood/bordô accent ---- */
.uchi-web[data-theme="paper"] {
  --bg:        #F4E8D2;   /* warm paper — as the landing */
  --bg-2:      #FBF5E8;
  --surface:   #FBF5E8;
  --surface-2: #ECDCBF;
  --field:     #FFFFFF;
  --ink:       #241813;   /* sumi */
  --ink-2:     #5C4B3D;
  --ink-3:     #9A8366;
  --line:      rgba(36,24,19,0.13);
  --line-2:    rgba(36,24,19,0.22);
  --accent:    #6B2A20;   /* oxblood / bordô */
  --accent-2:  #A8452F;   /* rust */
  --shadow-1:  0 1px 2px rgba(46,18,13,0.10);
  --shadow-2:  0 16px 40px rgba(46,18,13,0.16);
  --on-accent: #FBF5E8;
  /* image-placeholder tones */
  --ph-ox:     #6B2A20;
  --ph-kraft:  #A87C4F;
}
.uchi-web {
  /* dark fallback placeholder tones */
  --ph-ox:     #3a1712;
  --ph-kraft:  #5a4126;
}

/* base */
.uchi-web * { box-sizing: border-box; }
.uchi-web { min-height: 100vh; position: relative; z-index: 0; }

/* paper grain — sits over the page field, behind content (like the landing) */
.uchi-web[data-grain="on"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.uchi-web[data-theme="paper"][data-grain="on"]::before { opacity: .36; mix-blend-mode: multiply; }
.uchi-web[data-theme="dark"][data-grain="on"]::before { opacity: .07; mix-blend-mode: overlay; }

/* ---- type ---- */
.uchi-web .eyebrow {
  font-weight: 700; font-size: 11px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--ink-3);
}
.uchi-web .eyebrow.accent { color: var(--accent); }
.uchi-web .display {
  font-weight: 900; letter-spacing: -0.025em; line-height: 0.98;
  font-size: clamp(40px, 6vw, 82px); margin: 0;
}
.uchi-web h1, .uchi-web .h1 { font-weight: 900; letter-spacing: -0.02em; line-height: 1.05;
  font-size: clamp(30px, 3.6vw, 44px); margin: 0; }
.uchi-web h2, .uchi-web .h2 { font-weight: 800; letter-spacing: -0.015em; line-height: 1.12;
  font-size: clamp(22px, 2.2vw, 28px); margin: 0; }
.uchi-web h3, .uchi-web .h3 { font-weight: 700; font-size: 17px; letter-spacing: -0.005em; margin: 0; line-height: 1.25; }
.uchi-web .body { font-weight: 400; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.uchi-web .body-lg { font-weight: 400; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.uchi-web .small { font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.uchi-web .cap { font-size: 12px; letter-spacing: .02em; color: var(--ink-3); font-weight: 500; }
.uchi-web .num { font-variant-numeric: tabular-nums; }

/* hairline rule */
.uchi-web .rule { width: 38px; height: 1px; background: var(--accent); opacity: .75; }
.uchi-web .divider { height: 1px; background: var(--line); border: none; margin: 0; }

/* ---- buttons (refined) ---- */
.uchi-web .btn {
  font-family: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer;
  border: none; border-radius: 2px; padding: 14px 26px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .25s ease, box-shadow .25s ease, transform .08s ease, color .25s ease, border-color .25s ease;
  text-decoration: none; letter-spacing: .01em;
}
.uchi-web .btn:active { transform: translateY(1px); }
.uchi-web .btn--primary { background: var(--ink); color: var(--bg); }
.uchi-web .btn--primary:hover { box-shadow: var(--shadow-2); opacity: .92; }
.uchi-web .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.uchi-web .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.uchi-web .btn--accent { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.uchi-web .btn--accent:hover { background: var(--accent); color: var(--on-accent); }
.uchi-web .btn--block { width: 100%; }
.uchi-web .btn[disabled] { opacity: .35; cursor: not-allowed; }

/* oauth */
.uchi-web .oauth {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  cursor: pointer; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 2px;
  font-family: inherit; font-weight: 600; font-size: 14.5px; padding: 14px 18px;
  transition: border-color .2s ease, background .2s ease, transform .08s ease;
}
.uchi-web .oauth:hover { border-color: var(--ink-3); }
.uchi-web .oauth:active { transform: translateY(1px); }

/* ---- fields ---- */
.uchi-web .label { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: 10px; }
.uchi-web .field {
  width: 100%; font-family: inherit; font-size: 16px; font-weight: 400;
  padding: 11px 0; border: none; border-bottom: 1px solid var(--line-2);
  background: transparent; color: var(--ink); border-radius: 0; outline: none;
  transition: border-color .2s ease;
}
.uchi-web .field::placeholder { color: var(--ink-3); }
.uchi-web .field:focus { border-bottom-color: var(--accent); }
.uchi-web textarea.field { resize: none; line-height: 1.55; }
.uchi-web .hint { font-size: 12px; color: var(--ink-3); margin-top: 8px; }

.uchi-web .box {
  width: 100%; font-family: inherit; font-size: 16px; padding: 14px;
  background: var(--field); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 3px; outline: none; transition: border-color .2s ease;
}
.uchi-web .box::placeholder { color: var(--ink-3); }
.uchi-web .box:focus { border-color: var(--accent); }

/* ---- chips ---- */
.uchi-web .chip {
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; background: transparent;
  color: var(--ink-2); border: 1px solid var(--line-2);
  transition: all .18s ease; white-space: nowrap;
}
.uchi-web .chip:hover { border-color: var(--ink-3); color: var(--ink); }
.uchi-web .chip.on { border-color: var(--accent); color: var(--ink);
  background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* segmented */
.uchi-web .seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; }
.uchi-web .seg button { font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 20px;
  background: transparent; color: var(--ink-2); border: none; cursor: pointer;
  border-right: 1px solid var(--line-2); transition: all .18s ease; }
.uchi-web .seg button:last-child { border-right: none; }
.uchi-web .seg button.on { background: var(--ink); color: var(--bg); }

/* ---- card ---- */
.uchi-web .card {
  background: var(--surface); border-radius: 4px; border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.uchi-web .card.hover { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; cursor: pointer; }
.uchi-web .card.hover:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* tag */
.uchi-web .tag { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; display: inline-block; }
.uchi-web .tag--accent { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.uchi-web .tag--solid { background: var(--ink); color: var(--bg); }
.uchi-web .tag--dim { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }

/* image placeholders — flat bordô / kraft fields with grain (no gradients) */
.uchi-web .photo { position: relative; overflow: hidden; background: var(--ph-ox); }
.uchi-web .photo::after { content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.42; mix-blend-mode:overlay; pointer-events:none; }
.uchi-web .photo--neon, .uchi-web .photo--smoke { background: var(--ph-kraft); }
.uchi-web .photo--lantern, .uchi-web .photo--dim { background: var(--ph-ox); }
.uchi-web .photo__label { position:absolute; left:14px; bottom:12px; font-family:ui-monospace,monospace;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,232,210,0.55); z-index:2; }

/* brush mark recolor */
.uchi-web .mark svg { width: 100%; height: 100%; display: block; }
.uchi-web .mark svg path { fill: currentColor !important; }

/* layout helpers */
.uchi-web .container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.uchi-web .stack > * + * { margin-top: 14px; }

/* scrollbars */
.uchi-web .noscroll::-webkit-scrollbar { width: 0; height: 0; }
.uchi-web .noscroll { scrollbar-width: none; }

/* entrance */
@keyframes uw-rise { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
@keyframes uw-fade { from { opacity:0; } to { opacity:1; } }
@keyframes uw-spin { to { transform: rotate(360deg); } }
.uchi-web .rise { animation: uw-rise .6s cubic-bezier(.2,.7,.3,1) both; }
.uchi-web .fade { animation: uw-fade .5s ease both; }
@media (prefers-reduced-motion: reduce) { .uchi-web .rise, .uchi-web .fade { animation: none; } }

.uchi-web ::selection { background: var(--accent); color: var(--on-accent); }

/* ---- card scan / viewfinder ---- */
.uchi-web .scan-view { position: relative; width: 100%; aspect-ratio: 1; max-width: 380px; margin: 0 auto;
  border-radius: 18px; overflow: hidden; background:
  radial-gradient(120% 90% at 50% 0%, #241914 0%, #16100c 55%, #0d0907 100%);
  box-shadow: inset 0 0 0 1px rgba(244,232,210,.06), inset 0 30px 80px rgba(0,0,0,.5),
  0 30px 60px -30px rgba(20,12,8,.6); }
.uchi-web .scan-view::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(110% 110% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); }
.uchi-web .scan-line { position:absolute; left:8%; right:8%; height:2px; top:0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 90%, white) , transparent);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 70%, transparent);
  animation: uw-scan 2.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes uw-scan { 0%{ top:14%; opacity:0; } 12%{ opacity:1; } 50%{ top:86%; opacity:1; } 88%{ opacity:1; } 100%{ top:14%; opacity:0; } }
.uchi-web .recticle { position:absolute; inset:18%; }
.uchi-web .recticle i { position:absolute; width:34px; height:34px; border:2.5px solid rgba(244,232,210,.85);
  transition: border-color .3s ease, transform .3s ease; }
.uchi-web .recticle i.tl { top:0; left:0; border-right:none; border-bottom:none; border-radius:6px 0 0 0; }
.uchi-web .recticle i.tr { top:0; right:0; border-left:none; border-bottom:none; border-radius:0 6px 0 0; }
.uchi-web .recticle i.bl { bottom:0; left:0; border-right:none; border-top:none; border-radius:0 0 0 6px; }
.uchi-web .recticle i.br { bottom:0; right:0; border-left:none; border-top:none; border-radius:0 0 6px 0; }
.uchi-web .scan-view.found .recticle i { border-color: var(--accent); transform: scale(.92); }
.uchi-web .scan-view.found .recticle { animation: uw-lock .4s cubic-bezier(.2,.8,.3,1) both; }
@keyframes uw-lock { 0%{ transform: scale(1.04); } 60%{ transform: scale(.96); } 100%{ transform: scale(1); } }
.uchi-web .scan-card { position:absolute; top:50%; left:50%; width:58%;
  transform: translate(-50%,-50%) rotate(-4deg); border-radius:12px;
  background: linear-gradient(160deg, #211712, #18110d); padding:14px;
  box-shadow: 0 24px 40px -16px rgba(0,0,0,.7), inset 0 0 0 1px rgba(233,212,168,.12);
  transition: transform .5s cubic-bezier(.2,.8,.3,1); }
.uchi-web .scan-view.found .scan-card { transform: translate(-50%,-50%) rotate(0deg) scale(1.03); }
@media (prefers-reduced-motion: reduce) { .uchi-web .scan-line { animation: none; opacity:0; } }

/* ---- Stripe-style hosted card element ---- */
.uchi-web .stripe-el { border: 1px solid var(--line-2); border-radius: 6px; background: var(--field); overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease; }
.uchi-web .stripe-el:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.uchi-web .stripe-el .se-row { display: flex; align-items: center; }
.uchi-web .stripe-el input { width: 100%; font-family: inherit; font-size: 15px; letter-spacing: .01em;
  padding: 14px 14px; background: transparent; color: var(--ink); border: none; outline: none; }
.uchi-web .stripe-el input::placeholder { color: var(--ink-3); }
.uchi-web .stripe-el .se-hr { height: 1px; background: var(--line); }
.uchi-web .stripe-el .se-vr { width: 1px; align-self: stretch; background: var(--line); }