/* ============================================================
   ROWAKEN — LINK SITE v12
   Black × lavender · all-gothic · ROWAKEN first · mobile-first
   ============================================================ */

:root{
  color-scheme:dark;
  --bg:#0B0A10;
  --surface:#15121E;
  --surface-2:#1B1826;
  --line:rgba(236,230,255,.08);
  --line-2:rgba(236,230,255,.14);
  --line-3:rgba(236,230,255,.26);
  --text:#F1EEF8;
  --text-2:#ADA7BE;
  --text-3:#7B7590;
  --accent:#B49BFF;
  --accent-ink:#120C2A;
  --accent-soft:rgba(180,155,255,.12);
  --glow:rgba(180,155,255,.28);
  --well:#EDEAF4;
  --well-2:#B8B2C9;

  --f-display:"Inter Tight", "Noto Sans JP", system-ui, sans-serif;
  --f-sans:"Noto Sans JP", "Inter Tight", -apple-system, "Hiragino Sans", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --gutter:clamp(20px, 5vw, 56px);
  --max:1040px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
html[lang="ko"]{ --f-sans:"Noto Sans KR", "Inter Tight", sans-serif; }

/* ===== Base ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; min-height:100vh;
  background:var(--bg); color:var(--text);
  font-family:var(--f-sans); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"palt" 1;
  overflow-x:clip;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
ul, ol, p, h1, h2, h3, dl, dd{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:6px; }
.mono{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; }
.eyebrow{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.skip{ position:fixed; top:-100px; left:16px; z-index:100; padding:10px 14px; border-radius:8px; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:13px; }
.skip:focus{ top:12px; }

/* Lamp light + grain */
.lamp{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70vw 60vh at 85% -10%, rgba(180,155,255,.20), transparent 60%),
    radial-gradient(40vw 30vh at 10% 110%, rgba(111,91,214,.12), transparent 70%);
}
body::before{
  content:""; position:fixed; inset:-50%; z-index:-1; pointer-events:none; opacity:.045;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Header ===== */
.top{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px var(--gutter);
  border-bottom:1px solid transparent;
  transition:background .4s, border-color .4s, padding .4s var(--ease);
}
.top.is-scrolled{
  padding-top:10px; padding-bottom:10px;
  background:rgba(11,10,16,.72);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  border-color:var(--line);
}
.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:800; font-size:15px; letter-spacing:-.01em; }
.brand-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--glow); }
.lang{ display:inline-flex; padding:3px; border-radius:999px; border:1px solid var(--line-2); }
.lang-btn{ min-width:38px; height:30px; padding:0 9px; border-radius:999px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; color:var(--text-3); transition:color .2s, background .2s; }
.lang-btn:hover{ color:var(--text); }
.lang-btn.on{ background:var(--text); color:var(--bg); }

/* ===== Page ===== */
.page{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

/* ===== Hero: ROWAKEN ===== */
.hero{ padding:40px 0 8px; display:flex; flex-direction:column; align-items:flex-start; }
.kicker{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; font-size:13px; font-weight:500; color:var(--text-2); }
.kicker .mono{ color:var(--text-3); }
.kicker-sep{ color:var(--text-3); opacity:.6; }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(180,155,255,.5); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(180,155,255,.45); } 70%,100%{ box-shadow:0 0 0 8px rgba(180,155,255,0); } }

.name{
  margin-top:16px;
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(60px, 17vw, 150px); line-height:.92; letter-spacing:-.045em;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.name-ja{ font-family:var(--f-sans); font-weight:700; font-size:clamp(15px, 4vw, 20px); letter-spacing:.16em; color:var(--accent); line-height:1; }

.tag{ margin-top:26px; font-size:clamp(26px, 7vw, 40px); font-weight:900; line-height:1.25; letter-spacing:-.01em; }
.lead{ margin-top:12px; font-size:15px; line-height:1.9; color:var(--text-2); max-width:34em; }

.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
.chip{ padding:5px 12px; border-radius:999px; border:1px solid var(--line-2); font-size:12.5px; font-weight:500; color:var(--text-2); }
.chip--accent{ border-color:rgba(180,155,255,.4); background:var(--accent-soft); color:var(--accent); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; display:inline-flex; align-items:center; }

.cta{ display:flex; flex-direction:column; gap:10px; margin-top:26px; width:100%; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  height:56px; padding:0 26px; border-radius:999px;
  font-size:15px; font-weight:700; white-space:nowrap;
  transition:gap .25s var(--ease), background .2s, border-color .2s, box-shadow .3s;
}
.btn i{ font-size:12px; }
.btn--accent{ background:var(--accent); color:var(--accent-ink); box-shadow:0 18px 40px -18px var(--glow); }
.btn--accent:hover{ background:#C6B3FF; gap:18px; box-shadow:0 0 0 6px rgba(180,155,255,.12), 0 18px 40px -14px var(--glow); }
.btn--ghost{ border:1px solid var(--line-3); color:var(--text); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

.social{ display:flex; gap:6px; margin-top:22px; }
.social a{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:16px; color:var(--text-2); border:1px solid var(--line-2); transition:color .2s, border-color .2s, background .2s; }
.social a:hover{ color:var(--text); border-color:var(--line-3); background:var(--surface-2); }
.note-n{ font-family:var(--f-display); font-weight:800; font-size:16px; line-height:1; }

.facts{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;
  width:100%; margin-top:32px; padding-top:22px; border-top:1px solid var(--line-2);
}
.facts dt{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.facts dd{ margin-top:4px; font-size:13.5px; font-weight:700; line-height:1.5; }

/* ===== Sections ===== */
.sec{ padding-top:64px; }
.sec-head{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.sec-title{ font-family:var(--f-display); font-size:clamp(30px, 8vw, 52px); font-weight:800; line-height:1.1; letter-spacing:-.03em; text-wrap:balance; }
html[lang="ja"] .sec-title[data-i18n], html[lang="ko"] .sec-title[data-i18n]{ font-family:var(--f-sans); font-weight:900; letter-spacing:-.01em; font-size:clamp(26px, 7vw, 44px); }
.sec-sub{ font-size:14.5px; line-height:1.8; color:var(--text-2); max-width:40em; }

/* Counts */
.counts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:28px; }
.counts[hidden]{ display:none; }
.count{ padding:18px 18px 20px; border-radius:18px; border:1px solid var(--line-2); background:var(--surface); display:flex; flex-direction:column; gap:4px; min-width:0; }
.count-label{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--text-2); }
.count-num{ display:flex; align-items:baseline; gap:4px; }
.count-num b{ font-family:var(--f-display); font-weight:800; font-size:clamp(34px, 9.6vw, 72px); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.count-num small{ font-size:13px; font-weight:700; color:var(--text-2); }
.count--today .count-num b{ color:var(--accent); text-shadow:0 0 40px var(--glow); }
.count-note{ grid-column:1 / -1; font-size:12px; line-height:1.7; color:var(--text-3); }
.live-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 2.4s ease-out infinite; }

/* Five entrances */
.entr{ border-top:1px solid var(--line-2); }
.entr-row{
  display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"no body arrow" "no meta arrow";
  column-gap:14px; row-gap:6px; align-items:center;
  padding:18px 4px; border-bottom:1px solid var(--line);
  transition:padding .3s var(--ease);
}
a.entr-row:hover{ padding-left:10px; }
.entr-no{ grid-area:no; font-family:var(--f-mono); font-size:12px; color:var(--accent); align-self:start; padding-top:6px; }
.entr-body{ grid-area:body; display:flex; flex-direction:column; min-width:0; }
.entr-body b{ font-size:19px; font-weight:900; line-height:1.35; }
.entr-body span{ margin-top:4px; font-size:13px; line-height:1.7; color:var(--text-2); }
.entr-meta{ grid-area:meta; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; color:var(--text-3); }
.entr-meta--soon{ display:inline-flex; align-items:center; align-self:start; padding:2px 9px; border-radius:999px; border:1px dashed var(--line-3); }
.entr-arrow{ grid-area:arrow; font-size:14px; color:var(--text-3); transition:color .2s, transform .3s var(--ease); }
a.entr-row:hover .entr-arrow{ color:var(--accent); transform:translateX(3px); }
.entr-row--soon{ opacity:.6; }

/* Gear marquee */
.gear{ margin:28px calc(-1 * var(--gutter)) 0; padding:0 var(--gutter); overflow:clip; }
.gear-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.gear-sub{ font-size:12px; color:var(--text-3); }
.marquee{ display:flex; gap:10px; width:max-content; margin:14px 0 0; animation:marquee 60s linear infinite; will-change:transform; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.gear-card{ flex:none; width:124px; display:flex; flex-direction:column; align-items:center; gap:4px; transition:transform .3s var(--ease); }
.gear-card:hover{ transform:translateY(-3px); }
.gear-well{ position:relative; width:100%; height:104px; border-radius:16px; display:grid; place-items:center; isolation:isolate; overflow:hidden; background:radial-gradient(90% 80% at 50% 45%, #FFFFFF 0%, var(--well) 40%, var(--well-2) 100%); }
.gear-well::after{ content:""; position:absolute; left:18%; right:18%; bottom:9%; height:10%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side, rgba(13,14,16,.22), transparent); filter:blur(4px); }
.gear-well img{ width:80%; height:72%; object-fit:contain; mix-blend-mode:multiply; transition:transform .5s var(--ease); }
.gear-card:hover .gear-well img{ transform:scale(1.08); }
.gear-brand{ margin-top:6px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.gear-name{ font-size:12px; font-weight:700; line-height:1.3; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gear-cap{ margin-top:10px; text-align:right; color:var(--text-3); font-size:9.5px; }

.more{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:14px; font-weight:700; color:var(--text-2); border-bottom:1px solid var(--line-3); transition:color .2s, gap .25s var(--ease); }
.more i{ font-size:11px; }
.more:hover{ color:var(--accent); gap:16px; }
#lab > .more{ margin-top:24px; }

/* Works */
.works{ display:grid; grid-template-columns:1fr; gap:12px; }
.card{ display:flex; flex-direction:column; gap:14px; padding:22px 20px 24px; border-radius:20px; border:1px solid var(--line-2); background:var(--surface); transition:border-color .3s, transform .3s var(--ease); }
a.card:hover{ border-color:var(--line-3); transform:translateY(-2px); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card-sub{ color:var(--text-3); }
.card-arrow{ font-size:13px; color:var(--text-3); transition:color .2s, transform .3s var(--ease); }
a.card:hover .card-arrow{ color:var(--accent); transform:translate(2px, -2px); }
.card-title{ font-size:18px; font-weight:900; line-height:1.45; }
.card--coach{ background:linear-gradient(180deg, var(--surface-2), var(--surface)); }
.menu{ border-top:1px solid var(--line); }
.menu li{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.menu li b{ flex:none; font-family:var(--f-mono); font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }
.card-cta{ font-size:14px; font-weight:700; color:var(--accent); }
.rows{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; gap:12px; min-height:50px; border-top:1px solid var(--line); font-size:15px; font-weight:700; transition:padding .3s var(--ease); }
.row:hover{ padding-left:6px; }
.row .code{ width:30px; font-family:var(--f-mono); font-size:11px; font-weight:500; color:var(--text-3); }
.row i{ margin-left:auto; font-size:12px; color:var(--text-3); transition:color .2s, transform .3s var(--ease); }
.row:hover i{ color:var(--accent); transform:translate(2px, -2px); }
.videos{ display:grid; grid-template-columns:1fr; gap:10px; }
.video{ display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:700; }
.thumb{ flex:none; width:96px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:var(--surface-2); }
.thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.video:hover .thumb img{ transform:scale(1.06); }

/* Footer */
.foot{ display:flex; flex-direction:column; gap:12px; margin-top:72px; padding:24px 0 max(28px, env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.foot-mark{ font-family:var(--f-display); font-weight:800; font-size:22px; letter-spacing:-.03em; }
.foot-meta{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--text-3); }

/* Reveal */
.rv{ opacity:0; transform:translateY(16px); filter:blur(6px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out), border-color .3s, padding .3s var(--ease); }
.rv.on{ opacity:1; transform:none; filter:none; }
a.card.rv.on:hover{ transform:translateY(-2px); }
.name.rv{ transition-delay:.06s; } .tag.rv{ transition-delay:.14s; } .lead.rv{ transition-delay:.2s; } .chips.rv{ transition-delay:.26s; } .cta.rv{ transition-delay:.32s; } .social.rv{ transition-delay:.38s; } .facts.rv{ transition-delay:.44s; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; filter:none; transition:none; }
  .dot, .live-dot{ animation:none; } .marquee{ animation:none; }
}

/* ============================================================
   ≥ 720px
   ============================================================ */
@media (min-width: 720px){
  .hero{ padding:64px 0 8px; }
  .cta{ flex-direction:row; width:auto; }
  .facts{ grid-template-columns:repeat(4, 1fr); }
  .counts{ gap:12px; }
  .count{ padding:22px 24px 24px; }
  .count-num b{ font-size:clamp(56px, 7vw, 84px); }
  .entr-row{ grid-template-columns:56px 1fr auto auto; grid-template-areas:"no body meta arrow"; column-gap:20px; padding:22px 6px; }
  .entr-body b{ font-size:21px; }
  .works{ grid-template-columns:1fr 1fr; }
  .card--coach{ grid-column:1 / -1; }
  .videos{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .video{ flex-direction:column; align-items:stretch; gap:8px; }
  .thumb{ width:100%; }
  .foot{ flex-direction:row; align-items:center; justify-content:space-between; }
  .foot-meta{ flex-direction:row; gap:18px; align-items:center; }
}

/* ============================================================
   ≥ 1024px
   ============================================================ */
@media (min-width: 1024px){
  .top{ padding:20px var(--gutter); }
  .hero{ padding:88px 0 8px; }
  .name{ font-size:clamp(120px, 15vw, 168px); }
  .tag{ margin-top:32px; font-size:40px; }
  .lead{ font-size:16px; }
  .facts{ margin-top:40px; }
  .sec{ padding-top:104px; }
  .sec-head{ margin-bottom:28px; }
  .counts{ margin-bottom:36px; }
  .works{ grid-template-columns:1.2fr 1fr 1fr; }
  .card--coach{ grid-column:auto; }
  .card{ padding:26px 26px 28px; }
  .videos{ grid-template-columns:1fr; }
  .video{ flex-direction:row; align-items:center; }
  .thumb{ width:96px; }
  .foot{ margin-top:104px; }
}