.guide-page { background: var(--bg); }
.guide-page main { overflow: hidden; }
.guide-page .nav { position: fixed; }
.guide-page .guide-footer-legal { margin-top:20px; font-size:11px; opacity:.6; }

.guide-hero {
  position: relative;
  padding: 132px 0 78px;
  background:
    radial-gradient(850px 500px at 88% 20%, color-mix(in srgb, var(--pink) 66%, transparent), transparent 66%),
    radial-gradient(700px 400px at 8% 95%, color-mix(in srgb, var(--blue) 48%, transparent), transparent 68%),
    var(--bg);
}
.guide-hero-orb { position:absolute; border-radius:50%; filter:blur(1px); pointer-events:none; }
.orb-one { width:120px; height:120px; right:8%; top:140px; border:1px solid color-mix(in srgb, var(--pink-deep) 24%, transparent); }
.orb-two { width:26px; height:26px; left:9%; bottom:80px; background:var(--pink-deep); opacity:.48; }
.guide-hero-inner { position:relative; }
.guide-breadcrumb { font-size:11px; color:var(--sub); letter-spacing:.08em; margin-bottom:44px; }
.guide-breadcrumb span { margin:0 8px; opacity:.55; }
.guide-hero-copy { text-align:center; }
.guide-hero-copy h1 {
  margin:7px 0 18px;
  font-family:var(--font-head);
  font-size:clamp(38px, 5vw, 66px);
  line-height:1.25;
  letter-spacing:.05em;
}
.guide-hero-copy p { color:var(--sub); font-size:15px; }
.guide-jump {
  max-width:920px; margin:48px auto 0;
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius:24px; overflow:hidden;
  background:color-mix(in srgb, white 72%, transparent);
  box-shadow:0 18px 50px rgba(61,42,59,.07);
}
.guide-jump a {
  min-height:92px; padding:18px 14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:13px; font-weight:700;
  border-right:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  transition:background .2s, color .2s;
}
.guide-jump a:last-child { border-right:0; }
.guide-jump a:hover { background:var(--ink); color:var(--bg); }
.guide-jump span { font-family:var(--font-accent); font-style:italic; color:var(--pink-deep); font-size:18px; }

.guide-section { padding:94px 0; scroll-margin-top:76px; }
.guide-tint { background:color-mix(in srgb, var(--bg-alt) 64%, var(--bg)); }
.guide-section-head {
  display:grid; grid-template-columns:1.25fr .75fr; align-items:end; gap:50px;
  margin-bottom:42px;
}
.guide-section-head > div { position:relative; }
.guide-number {
  position:absolute; left:-6px; top:-38px; z-index:0;
  font-family:var(--font-accent); font-style:italic; font-size:78px; line-height:1;
  color:color-mix(in srgb, var(--pink) 35%, transparent);
}
.guide-section-head .kicker, .guide-section-head h2 { position:relative; z-index:1; }
.guide-section-head h2 { margin-top:5px; font-family:var(--font-head); font-size:clamp(30px,4vw,46px); line-height:1.25; }
.guide-section-head > p { color:var(--sub); font-size:14px; padding-bottom:5px; }

.guide-access-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.guide-feature-card {
  background:white; border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius:28px; overflow:hidden; box-shadow:0 14px 42px rgba(61,42,59,.06);
}
.guide-placeholder, .guide-map-frame { height:330px; }
.guide-square-media {
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:color-mix(in srgb,var(--bg-alt) 70%,white);
}
.guide-square-media img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.guide-youtube iframe {
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.guide-video-cover {
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border:0;
  background:var(--ink);
  color:white;
  cursor:pointer;
}
.guide-video-cover img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s, filter .3s;
}
.guide-video-cover::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(35,22,34,.5),transparent 42%);
}
.guide-video-cover:hover img { transform:scale(1.025); filter:brightness(.94); }
.guide-play-button {
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:68px;
  height:68px;
  padding-left:5px;
  border-radius:50%;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.94);
  color:var(--pink-deep);
  box-shadow:0 12px 35px rgba(61,42,59,.2);
  font-size:23px;
}
.guide-video-cover small {
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:20px;
  color:white;
  font-size:10px;
  letter-spacing:.12em;
  font-weight:700;
}
.guide-text-link {
  display:inline-block;
  margin-top:12px;
  color:var(--pink-deep);
  font-size:12px;
  font-weight:700;
}
.guide-placeholder {
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--pink) 45%,white), color-mix(in srgb,var(--blue) 35%,white));
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--sub);
}
.placeholder-icon { font-size:58px; color:var(--pink-deep); line-height:1; }
.guide-placeholder strong { margin-top:12px; font-family:var(--font-head); font-size:20px; color:var(--ink); }
.guide-placeholder small, .guide-video-placeholder small, .service-sample small { margin-top:4px; font-size:10px; letter-spacing:.12em; }
.guide-card-text { padding:25px 28px 28px; }
.guide-card-text h3 { font-family:var(--font-head); font-size:20px; margin-bottom:6px; }
.guide-card-text p { color:var(--sub); font-size:13px; }
.guide-wide-card {
  margin-top:24px; min-height:260px;
  display:grid; grid-template-columns:1.4fr 1fr;
  border-radius:28px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent); background:white;
}
.guide-video-placeholder {
  min-height:260px; display:flex; align-items:center; justify-content:center; gap:22px;
  background:linear-gradient(135deg, #3D2A3B, #6b4866); color:white;
}
.guide-video-placeholder > div { display:flex; flex-direction:column; }
.guide-video-placeholder strong { font-family:var(--font-head); font-size:20px; }
.play-mark { width:64px; height:64px; display:grid; place-items:center; padding-left:4px; border-radius:50%; background:white; color:var(--pink-deep); }
.guide-wide-copy { padding:42px; align-self:center; }
.guide-label { font-size:9px; letter-spacing:.16em; color:var(--pink-deep); font-weight:700; }
.guide-wide-copy h3 { margin:8px 0; font-family:var(--font-head); font-size:24px; }
.guide-wide-copy p { color:var(--sub); font-size:13px; }

.floor-placeholder { padding:22px; background:white; border-radius:30px; border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); }
.floor-paper {
  position:relative; min-height:520px; padding:44px;
  display:grid; grid-template-columns:1.1fr .9fr 1fr; grid-template-rows:1fr 1fr 1fr; gap:12px;
  background-color:#fffdfb;
  background-image:linear-gradient(color-mix(in srgb,var(--ink) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 4%,transparent) 1px,transparent 1px);
  background-size:24px 24px; border-radius:20px; border:1px dashed color-mix(in srgb,var(--ink) 20%,transparent);
}
.floor-compass { position:absolute; right:18px; top:14px; font-family:var(--font-accent); color:var(--sub); }
.floor-room {
  border:2px solid color-mix(in srgb,var(--ink) 18%,transparent); border-radius:14px;
  display:grid; place-items:center; text-align:center; padding:10px;
  font-family:var(--font-head); font-weight:700; font-size:13px; background:white;
}
.room-pink { grid-row:1/3; background:#fff0f6; border-color:#ffb8d1; }
.room-china { background:#fff0f0; border-color:#d77c87; }
.room-neon { background:#f3efff; border-color:#b49ad3; }
.room-game { grid-row:2/4; background:#eff4ff; border-color:#91add7; }
.room-paper { background:#fff9df; border-color:#e5cd69; }
.room-common { background:#f6f0f5; }
.room-change { background:#f1faf7; border-color:#92c7b7; }
.floor-placeholder > p { padding:18px 6px 2px; text-align:center; color:var(--sub); font-size:11px; }
.floor-map-image {
  padding:16px;
  border-radius:30px;
  background:white;
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  box-shadow:0 14px 42px rgba(61,42,59,.06);
  overflow:hidden;
}
.floor-map-image img {
  width:100%;
  height:auto;
  border-radius:18px;
}
.floor-map-image picture { display:block; }

.equipment-columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.equipment-panel { padding:34px; border-radius:28px; border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); background:white; }
.equipment-panel.free { box-shadow:inset 0 5px 0 var(--pink); }
.equipment-panel.paid { box-shadow:inset 0 5px 0 var(--blue); }
.equipment-title { display:flex; align-items:center; gap:14px; }
.equipment-title span { padding:5px 10px; border-radius:999px; background:var(--ink); color:white; font-size:9px; letter-spacing:.12em; }
.equipment-title h3 { font-family:var(--font-head); font-size:22px; }
.equipment-empty {
  margin-top:26px; min-height:230px; border-radius:20px; border:1px dashed color-mix(in srgb,var(--ink) 18%,transparent);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; background:color-mix(in srgb,var(--bg) 70%,white);
}
.equipment-empty i { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--bg-alt); color:var(--pink-deep); font-style:normal; font-size:22px; }
.equipment-empty strong { margin-top:14px; font-family:var(--font-head); }
.equipment-empty p { margin-top:4px; color:var(--sub); font-size:12px; }
.equipment-photo {
  margin-top:24px;
  aspect-ratio:1;
  border-radius:20px;
  overflow:hidden;
  background:var(--bg-alt);
}
.equipment-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.equipment-list {
  margin-top:18px;
  display:flex;
  flex-direction:column;
  border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
}
.equipment-list > div {
  min-height:54px;
  padding:12px 3px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  font-size:13px;
}
.equipment-list > div > span:last-child {
  flex:0 0 auto;
  color:var(--sub);
  font-size:12px;
}
.equipment-name {
  display:flex;
  flex-direction:column;
  min-width:0;
}
.equipment-name small {
  margin-top:3px;
  color:var(--sub);
  font-size:10px;
  font-weight:400;
}
.paid-list .equipment-price {
  color:var(--pink-deep) !important;
  font-weight:700;
  white-space:nowrap;
}
.guide-note {
  margin-top:22px; padding:24px 28px; border-radius:20px;
  background:color-mix(in srgb,var(--yellow) 44%,white); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px;
}
.guide-note strong { font-family:var(--font-head); }
.guide-note p { color:var(--sub); font-size:12px; }
.guide-note a { font-size:12px; font-weight:700; color:var(--pink-deep); white-space:nowrap; }

.service-showcase { display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:1fr 1fr; gap:18px; min-height:520px; }
.service-sample {
  position:relative; padding:30px; border-radius:26px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; color:white;
  background:linear-gradient(145deg,#5e3c58,#2d2230);
}
.service-sample::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 22%,rgba(255,184,209,.55),transparent 42%); }
.service-sample.large { grid-row:1/3; background:linear-gradient(145deg,#d98ba9,#66425d); }
.service-photo-image {
  padding:0;
  background:white;
}
.service-photo-image::before { display:none; }
.service-photo-image img {
  width:100%;
  height:100%;
  object-fit:contain;
  background:white;
}
.service-sample:nth-child(3) { background:linear-gradient(145deg,#526b8f,#31293e); }
.service-video-link.china-video {
  background:
    linear-gradient(to top,rgba(46,25,31,.82),rgba(46,25,31,.08) 70%),
    url("assets/china1.webp") center/cover no-repeat;
  transition:transform .25s, box-shadow .25s;
}
.service-video-link.china-video:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(61,42,59,.2);
}
.service-video-link.china-video::before {
  background:radial-gradient(circle at 78% 18%,rgba(255,184,209,.28),transparent 38%);
}
.service-video-link.china-video small {
  margin-top:8px;
  font-weight:700;
  opacity:1;
}
.service-video-link.neon-video {
  background:
    linear-gradient(to top,rgba(30,20,45,.86),rgba(30,20,45,.08) 70%),
    url("assets/neon1.webp") center/cover no-repeat;
  transition:transform .25s, box-shadow .25s;
}
.service-video-link.neon-video:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(61,42,59,.2);
}
.service-video-link.neon-video::before {
  background:radial-gradient(circle at 78% 18%,rgba(255,63,164,.3),transparent 38%);
}
.service-video-link.neon-video small {
  margin-top:8px;
  font-weight:700;
  opacity:1;
}
.service-booth-grid {
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.service-booth-card {
  position:relative;
  min-height:300px;
  padding:28px;
  border-radius:26px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:white;
  box-shadow:0 12px 34px rgba(61,42,59,.1);
}
.service-booth-card::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(40,25,38,.86),rgba(40,25,38,.08) 72%);
}
.service-booth-card > * { position:relative; }
.service-booth-card span { font-size:9px; letter-spacing:.14em; opacity:.8; }
.service-booth-card strong { font-family:var(--font-head); font-size:21px; line-height:1.5; }
.service-booth-card small {
  align-self:flex-start;
  margin-top:10px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:var(--ink);
  font-size:9px;
  font-weight:700;
}
.service-booth-card.published {
  transition:transform .25s, box-shadow .25s;
}
.service-booth-card.published:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(61,42,59,.2);
}
.service-booth-card.published small {
  background:rgba(255,255,255,.94);
  color:var(--pink-deep);
}
.pink-sample { background:url("assets/pink1.webp") center/cover no-repeat; }
.game-sample { background:url("assets/game1.webp") center/cover no-repeat; }
.service-sample > * { position:relative; }
.service-sample span { font-size:9px; letter-spacing:.16em; opacity:.78; }
.service-sample strong { font-family:var(--font-head); font-size:22px; }
.service-sample.large strong { font-size:30px; }
.service-action {
  margin-top:24px; padding:30px 34px; border-radius:24px; background:white;
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px;
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
}
.service-action h3 { font-family:var(--font-head); font-size:19px; }
.service-action p { margin-top:3px; color:var(--sub); font-size:12px; }

.guide-bottom-cta { padding:80px 0; }
.guide-bottom-card {
  padding:48px 54px; border-radius:30px; background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:space-between; gap:30px;
}
.guide-bottom-card .kicker { color:var(--pink); }
.guide-bottom-card h2 { margin:4px 0 8px; font-family:var(--font-head); font-size:32px; }
.guide-bottom-card p { opacity:.72; font-size:13px; }
.guide-bottom-card .btn-primary { background:var(--pink-deep); color:white; white-space:nowrap; }

@media (max-width:820px) {
  .guide-page .nav-links a:not(.nav-cta):not(.nav-terms):not(.nav-guide-mobile) { display:none; }
  .guide-hero { padding:112px 0 55px; }
  .guide-breadcrumb { margin-bottom:30px; }
  .guide-hero-copy { text-align:left; }
  .guide-hero-copy h1 { font-size:31px; white-space:nowrap; letter-spacing:.02em; }
  .guide-hero-copy p { font-size:13px; }
  .pc-only { display:none; }
  .guide-jump { margin-top:35px; grid-template-columns:1fr 1fr; border-radius:20px; }
  .guide-jump a { min-height:78px; font-size:11px; }
  .guide-jump a:nth-child(2) { border-right:0; }
  .guide-jump a:nth-child(-n+2) { border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent); }
  .guide-section { padding:72px 0; }
  .guide-section-head { grid-template-columns:1fr; gap:15px; margin-bottom:30px; }
  .guide-section-head > p { font-size:12px; }
  .guide-section-head h2 { font-size:30px; }
  .guide-number { top:-27px; font-size:60px; }
  .guide-access-grid, .guide-wide-card, .equipment-columns { grid-template-columns:1fr; }
  .guide-placeholder, .guide-map-frame { height:250px; }
  .guide-wide-card { display:block; }
  .guide-video-placeholder { min-height:220px; }
  .guide-wide-copy { padding:28px; }
  .floor-placeholder { padding:10px; }
  .floor-map-image { padding:7px; border-radius:20px; overflow:hidden; }
  .floor-map-image img { min-width:0; width:100%; border-radius:14px; }
  .floor-paper { min-height:430px; padding:32px 12px 12px; gap:7px; }
  .floor-room { font-size:10px; border-width:1px; padding:5px; }
  .equipment-panel { padding:25px; }
  .equipment-list > div { align-items:flex-start; }
  .guide-note { grid-template-columns:1fr; gap:8px; }
  .service-showcase { grid-template-columns:1fr 1fr; grid-template-rows:auto 210px; min-height:0; }
  .service-sample.large { grid-column:1/3; grid-row:auto; }
  .service-photo-image { aspect-ratio:4/3; }
  .service-sample { padding:20px; }
  .service-sample strong, .service-sample.large strong { font-size:16px; }
  .service-booth-grid { grid-template-columns:1fr; }
  .service-booth-card { min-height:250px; }
  .service-action { padding:26px; grid-template-columns:1fr; }
  .service-action .btn { text-align:center; }
  .guide-bottom-cta { padding:55px 0; }
  .guide-bottom-card { padding:34px 26px; flex-direction:column; align-items:stretch; }
  .guide-bottom-card h2 { font-size:25px; }
  .guide-bottom-card .btn { text-align:center; }
}