/* 00 Fonts
   RIIZE MAP backend shell. Source-preserving component extraction. */

@import url("https://use.typekit.net/wgk3sba.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;600;700&display=swap");
@import url("./member-colors.css?v=riize-button-token-v1");

:root{
  --font-base:'neue-haas-grotesk-text','Neue Haas Grotesk Text','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif;
  --font-display:'neue-haas-grotesk-display',var(--font-base);
  --font-point:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-cjk:var(--font-base);
  --serif:var(--font-base);
  --mono:var(--font-point);
  --kr:var(--font-cjk);
}

/* 01 Tokens
   RIIZE MAP backend shell. Source-preserving component extraction. */

:root{
  --canvas:#ececec;
  --paper:#ffffff;
  --ink:#0a0a0a;
  --meta:#7a7a7a;
  --rule:#e6e6e6;
  --soft-rule:rgba(0,0,0,0.10);
  --ph-1:#dadada;
  --ph-2:#c4c4c4;
  --ph-3:#aeaeae;
  --silver-hi:#f3f3f3;
  --silver-mi:#cfcfcf;
  --silver-lo:#8d8d8d;
  --map-ground:#e5e1da;
  --map-overview-ground:#f7f4ee;

  --member-light-pastel-text:#293348;
  --member-light-pastel-riize:var(--member-riize-button-color);
  --member-light-pastel-riize-text:#FFFFFF;
  --member-light-pastel-shotaro:#FFAEBF;
  --member-light-pastel-eunseok:#F6F98B;
  --member-light-pastel-sungchan:#FECC96;
  --member-light-pastel-wonbin:#C4BAFF;
  --member-light-pastel-sohee:#FFC1F7;
  --member-light-pastel-anton:#B3F7D2;
  --member-bright-clear-riize:var(--member-riize-button-color);
  --member-bright-clear-shotaro:#FF6678;
  --member-bright-clear-eunseok:#BDD600;
  --member-bright-clear-sungchan:#FF9F51;
  --member-bright-clear-wonbin:#BA8FFF;
  --member-bright-clear-sohee:#FF92DB;
  --member-bright-clear-anton:#6EE6A8;

  --ls-h1:-0.04em;
  --ls-h2:-0.025em;
  --ls-h3:0.005em;
  --ls-body:0;
  --ls-meta:0.10em;
  --ls-meta-w:0.14em;
  --ls-caption:0.18em;
  --ls-micro:0.22em;

  --lh-display:0.85;
  --lh-h1:0.9;
  --lh-h2:1.0;
  --lh-body:1.5;
  --lh-meta:1.4;
  --lh-tight:1.0;

  --z-chrome:5;
  --z-overlay:6;
  --z-map-pin:10;
  --z-map-label:11;

  --ease-soft:cubic-bezier(0.25,0.1,0.25,1);
  --duration-slow:600ms;
  --screen-viewport-height:100vh;
  --screen-safe-bottom:env(safe-area-inset-bottom, 0px);

  --wave-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 90'%3E%3Cg stroke='%23111111' stroke-width='2.1' stroke-linecap='square'%3E%3Cpath d='M4,39V51M12,34V56M20,27V63M28,22V68M36,18V72M44,25V65M52,31V59M60,36V54M68,29V61M76,22V68M84,16V74M92,20V70M100,28V62M108,34V56M116,37V53M124,33V57M132,26V64M140,19V71M148,14V76M156,24V66M164,35V55M172,28V62M180,21V69M188,18V72M196,29V61M204,34V56M212,27V63M220,20V70M228,25V65M236,32V58M244,36V54M252,30V60M260,22V68M268,15V75M276,18V72M284,27V63M292,35V55M300,30V60M308,21V69M316,25V65'/%3E%3C/g%3E%3C/svg%3E");
}

@supports (height:100dvh){
  :root{
    --screen-viewport-height:100dvh;
  }
}

/* 02 Base
   RIIZE MAP backend shell. Source-preserving component extraction. */

  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background:var(--canvas);
    font-family:var(--font-base);
    color:var(--ink);
    padding:60px 20px 120px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    font-feature-settings:'kern' 1, 'liga' 1, 'calt' 1;
  }

@media (max-width:767px){
  html,
  body{overflow-x:hidden}
  body{padding:40px 0 80px}
}

@media print{
  @page{size:1920px auto;margin:0}
}

/* Component: document preview chrome
   RIIZE MAP backend shell. Source-preserving component extraction. */

  /* === DOC CHROME === */
  .doc-head{
    max-width:1440px;
    margin:0 auto 40px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    border-bottom:1px solid var(--ink);
    padding-bottom:20px;
  }
  .doc-title{
    font-size:48px;
    font-weight:700;
    letter-spacing:var(--ls-h1);
    line-height:var(--lh-h1);
  }
  .doc-title .v{
    font-weight:200;
    color:var(--meta);
    letter-spacing:var(--ls-h2);
  }
  .doc-sub{
    margin-top:12px;
    font-family:var(--font-point);
    font-size:11px;
    color:var(--meta);
    letter-spacing:var(--ls-meta);
    line-height:var(--lh-meta);
    text-transform:uppercase;
  }
  .doc-meta{
    font-family:var(--font-point);
    font-size:10px;
    color:var(--meta);
    text-transform:uppercase;
    letter-spacing:var(--ls-meta);
    text-align:right;
    line-height:1.55;
    font-feature-settings:'tnum';
  }
  .doc-changes{
    max-width:1440px;
    margin:0 auto 16px;
    padding:14px 18px;
    border:1px solid var(--ink);
    background:#fff;
    font-family:var(--font-point);
    font-size:10px;
    letter-spacing:var(--ls-meta);
    text-transform:uppercase;
    color:var(--ink);
    line-height:1.7;
  }
  .doc-changes:last-of-type{margin-bottom:60px}
  .doc-changes b{font-weight:700;margin-right:10px;letter-spacing:var(--ls-meta-w)}
  .doc-changes span{color:var(--meta)}

  .stack{
    max-width:1440px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:80px;
  }
  .item{display:flex;flex-direction:column;gap:14px}
  .item-label{
    font-family:var(--font-point);
    font-size:10px;
    letter-spacing:var(--ls-meta-w);
    text-transform:uppercase;
    color:var(--meta);
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--ink);
    padding-top:8px;
    line-height:1.5;
  }
  .item-label b{color:var(--ink);font-weight:500;letter-spacing:var(--ls-caption)}

@media (max-width:767px){
      /* === DOC CHROME === */
      .doc-head{
        max-width:430px;
        margin:0 auto 32px;
        padding:0 20px 16px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        border-bottom:1px solid var(--ink);
      }
      .doc-title{
        font-size:20px;
        font-weight:700;
        letter-spacing:var(--ls-h1);
        line-height:var(--lh-h1);
      }
      .doc-title .v{
        font-weight:200;
        color:var(--meta);
        letter-spacing:var(--ls-h2);
      }
      .doc-sub{
        margin-top:10px;
        font-family:var(--font-point);
        font-size:10px;
        color:var(--meta);
        letter-spacing:var(--ls-meta);
        line-height:var(--lh-meta);
        text-transform:uppercase;
      }
      .doc-meta{
        font-family:var(--font-point);
        font-size:9px;
        color:var(--meta);
        text-transform:uppercase;
        letter-spacing:var(--ls-meta);
        text-align:left;
        line-height:1.55;
        font-feature-settings:'tnum';
      }
      .doc-changes{
        max-width:430px;
        margin:0 auto 12px;
        padding:12px 20px;
        border:1px solid var(--ink);
        background:#fff;
        font-family:var(--font-point);
        font-size:9px;
        letter-spacing:var(--ls-meta);
        text-transform:uppercase;
        color:var(--ink);
        line-height:1.7;
      }
      .doc-changes:last-of-type{margin-bottom:48px}
      .doc-changes b{font-weight:700;margin-right:10px;letter-spacing:var(--ls-meta-w)}
      .doc-changes span{color:var(--meta)}

      /* stack: 20px side padding so 390px scr fits inside 430px max-width */
      .stack{
        max-width:430px;
        margin:0 auto;
        padding:0 20px;
        display:flex;
        flex-direction:column;
        gap:60px;
      }
      .item{display:flex;flex-direction:column;gap:12px}
      .item-label{
        font-family:var(--font-point);
        font-size:9px;
        letter-spacing:var(--ls-meta-w);
        text-transform:uppercase;
        color:var(--meta);
        display:flex;
        justify-content:space-between;
        border-top:1px solid var(--ink);
        padding-top:7px;
        line-height:1.5;
      }
      .item-label b{color:var(--ink);font-weight:500;letter-spacing:var(--ls-caption)}
}

/* Component: fixed design screen and page chrome
   RIIZE MAP backend shell. Source-preserving component extraction. */

  /* === SCREEN FRAME === */
  .scr{
    --screen-width:1440px;
    --screen-height:900px;
    width:var(--screen-width);
    height:var(--screen-height);
    background:var(--paper);
    position:relative;
    overflow:hidden;
    box-shadow:0 1px 0 rgba(0,0,0,0.04), 0 14px 36px rgba(0,0,0,0.07);
  }

  /* === TYPE UTILS === */
  .meta{
    font-family:var(--font-point);
    font-size:var(--meta-font-size, 11px);
    letter-spacing:var(--ls-meta);
    text-transform:uppercase;
    line-height:var(--lh-meta);
    color:var(--ink);
    font-feature-settings:'tnum';
  }
  .meta--mute{color:var(--meta)}
  .meta--xs{font-size:var(--meta-xs-font-size, 10px);letter-spacing:var(--ls-meta-w)}
  /* === SCREEN HEADER === */
  .screen-header{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:var(--z-chrome);
    display:flex;
    align-items:center;
    color:var(--ink);
  }
  .screen-header--brand{
    justify-content:space-between;
    align-items:flex-start;
    padding:var(--chrome-y, 28px) var(--chrome-x, 32px) 0;
    pointer-events:none;
  }
  .screen-header--detail{
    --screen-header-side-width:var(--key-visual-width, 88px);
    height:var(--screen-header-detail-height, 72px);
    padding:0 var(--screen-header-pad-x, 24px);
    border-bottom:1px solid var(--rule);
    background:#fff;
    gap:var(--screen-header-gap, 32px);
  }
  .screen-header__left,
  .screen-header__right{
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .screen-header__left{
    gap:var(--screen-header-left-gap, 16px);
  }
  .screen-header__right{
    gap:var(--screen-header-right-gap, 24px);
    margin-left:auto;
  }
  .screen-header--detail .screen-header__left{
    flex:0 0 var(--screen-header-side-width);
  }
  .screen-header--detail .screen-header__right{
    flex:0 0 var(--screen-header-side-width);
    margin-left:0;
    justify-content:flex-end;
  }
  .screen-header__title,
  .screen-header__center,
  .screen-footer__text,
  .screen-footer__count{
    font-family:var(--font-base);
    font-size:var(--screen-footer-font-size, var(--screen-meta-font-size, 11px));
    font-weight:400;
    letter-spacing:-0.01em;
    text-transform:uppercase;
    line-height:var(--lh-meta);
    font-feature-settings:'tnum' 1;
  }
  .screen-header__title{
    color:var(--ink);
  }
  .screen-header__center{
    flex:1;
    min-width:0;
    text-align:center;
    font-size:var(--screen-header-center-font-size, 11px);
    letter-spacing:-0.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:var(--ink);
  }
  .screen-back{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--screen-back-size, 32px);
    height:var(--screen-back-size, 32px);
    cursor:pointer;
    flex-shrink:0;
    color:var(--ink);
    text-decoration:none;
  }
  .screen-back svg{
    display:block;
  }
  .key-visual-image{
    display:block;
    width:var(--key-visual-width, 88px);
    height:var(--key-visual-height, 13px);
    overflow:hidden;
    background-image:var(--key-visual-image, url("../images/key-visual/title-black.png"));
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    color:transparent;
    text-decoration:none;
    cursor:pointer;
    flex-shrink:0;
    pointer-events:auto;
  }
  .home-header-logo{
    display:block;
    width:var(--home-header-logo-width, 128px);
    line-height:0;
    color:transparent;
    text-decoration:none;
    pointer-events:auto;
  }
  .home-header-logo img{
    display:block;
    width:100%;
    height:auto;
  }
  /* === SCREEN FOOTER === */
  .screen-footer{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:var(--z-chrome);
    display:flex;
    align-items:center;
    color:var(--meta);
  }
  .screen-footer--bar{
    height:calc(var(--screen-footer-height, 48px) + var(--screen-safe-bottom));
    padding:0 var(--screen-footer-pad-x, 32px) var(--screen-safe-bottom);
    border-top:1px solid var(--rule);
    background:#fff;
  }
  .screen-footer--floating{
    bottom:var(--chrome-y, 28px);
    justify-content:center;
    pointer-events:none;
  }
  .screen-footer__left,
  .screen-footer__center,
  .screen-footer__right{
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .screen-footer__right{
    margin-left:auto;
  }
  .screen-footer--bar .screen-footer__center{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
  .screen-footer__text,
  .screen-footer__count{
    color:var(--meta);
    white-space:nowrap;
  }
  /* === MAP MEMBER FOOTER === */
  .map-member-footer{
    --member-bar-height:48px;
    --member-bar-pad-x:32px;
    --member-bar-overflow-x:visible;
    --member-bar-overflow-y:visible;
    --member-bar-scroll-snap:none;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:var(--z-chrome);
    height:var(--member-bar-height);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 var(--member-bar-pad-x);
    border-top:1px solid var(--rule);
    background:#fff;
    overflow-x:var(--member-bar-overflow-x);
    overflow-y:var(--member-bar-overflow-y);
    scrollbar-width:none;
    scroll-snap-type:var(--member-bar-scroll-snap);
  }
  .member-pill{
    width:var(--member-pill-width, 96px);
    height:24px;
    min-width:var(--member-pill-min-width, 0);
    padding:var(--member-pill-padding, 0 10px);
    padding-top:8px;
    padding-bottom:8px;
    appearance:none;
    -webkit-appearance:none;
    border:1px solid var(--member-stroke-color, #0a0a0a);
    border-radius:100px;
    background:#fff;
    color:var(--member-stroke-text, #0a0a0a);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:var(--serif);
    font-size:8px;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    line-height:1;
    white-space:nowrap;
    flex-shrink:0;
    cursor:pointer;
    scroll-snap-align:var(--member-pill-snap, none);
  }
  .member-pill:not(.on){
    border-width:1.25px;
    box-shadow:inset 0 0 0 0.25px var(--member-stroke-color, var(--member-color, #0a0a0a));
  }
  .member-pill.on{
    background:var(--member-color, #0a0a0a);
    border-color:var(--member-color, #0a0a0a);
    color:#fff;
    font-weight:600;
    box-shadow:none;
  }
  .member-pill.is-member{
    border-color:var(--member-stroke-color, var(--member-color));
    color:var(--member-stroke-text, var(--member-text, #0a0a0a));
  }
  .member-pill.is-member.on{
    background:var(--member-color);
    border-color:var(--member-color);
    color:var(--member-text, #fff);
  }
  .chrome-icon-button{
    appearance:none;
    -webkit-appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--chrome-icon-button-size, 28px);
    height:var(--chrome-icon-button-size, 28px);
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:inherit;
    cursor:pointer;
    line-height:0;
    flex-shrink:0;
  }
  .chrome-icon-button svg,
  .chrome-icon-button img{
    display:block;
    width:100%;
    height:100%;
  }
  .chrome-icon-button:focus-visible{
    outline:1px solid var(--ink);
    outline-offset:3px;
  }
  .nav-compass{
    --chrome-icon-button-size:28px;
  }
  .nav-compass__icon{
    display:block;
  }

  /* === SILVER BUTTON === */
  .silver{
    background:radial-gradient(circle at 30% 25%, var(--silver-hi) 0%, var(--silver-mi) 55%, var(--silver-lo) 100%);
    border-radius:50%;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.7),
      inset 0 -1px 0 rgba(0,0,0,0.25),
      0 1px 1px rgba(0,0,0,0.1);
    border:1px solid #777;
    display:flex;align-items:center;justify-content:center;
    transition:opacity 600ms cubic-bezier(0.25,0.1,0.25,1),
               transform 600ms cubic-bezier(0.25,0.1,0.25,1);
  }
  .silver svg{width:14px;height:14px;fill:#1a1a1a}
  .silver--play svg{margin-left:1px}

@media (max-width:767px){
      /* === SCREEN FRAME — 390×844 === */
      .scr{
        --screen-width:390px;
        --screen-height:844px;
        --meta-font-size:10px;
        --meta-xs-font-size:9px;
        --key-visual-width:78px;
        --key-visual-height:12px;
        --chrome-x:16px;
        --chrome-y:16px;
        --screen-meta-font-size:10px;
        --screen-footer-height:44px;
        --screen-footer-pad-x:16px;
        --screen-footer-font-size:9px;
        --screen-header-detail-height:56px;
        --screen-header-pad-x:16px;
        --screen-header-gap:16px;
        --screen-header-left-gap:12px;
        --screen-back-size:28px;
        --screen-header-center-font-size:10px;
      }

      /* === SILVER BUTTON === */
      .silver svg{width:12px;height:12px;fill:#1a1a1a}
      .nav-compass{
        --chrome-icon-button-size:26px;
      }
      .screen-header__center{
        white-space:normal;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
      }
      .route-shell{
        --key-visual-width:78px;
        --key-visual-height:12px;
      }
}

:is(.mobile-preview-shell,.responsive-view--mobile) .screen-header__center{
  white-space:normal;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

/* Component: schedule poster
   RIIZE MAP backend shell. Source-preserving component extraction. */

.schedule-shell{
  --schedule-gap:20px;
  --schedule-poster-width:min(360px, calc(100vw - 64px), calc((100vh - 150px) * 0.75));
  --schedule-poster-label-size:10px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--schedule-gap);
}

.schedule-poster{
  position:relative;
  width:var(--schedule-poster-width);
  height:auto;
  aspect-ratio:3/4;
  background:var(--ph-1);
  background-image:repeating-linear-gradient(
    45deg,
    transparent 0px,
    transparent 6px,
    rgba(0,0,0,0.055) 6px,
    rgba(0,0,0,0.055) 7px
  );
  border:1.5px dashed #b8b8b8;
  display:flex;
  align-items:center;
  justify-content:center;
}

.schedule-poster::after{
  content:'SCHEDULE POSTER\A 3 : 4';
  white-space:pre;
  font-family:var(--font-base);
  font-size:var(--schedule-poster-label-size);
  color:#777;
  letter-spacing:0.04em;
  text-align:center;
  line-height:1.7;
  text-transform:uppercase;
}

@media (max-width:767px){
  .schedule-shell{
    --schedule-gap:16px;
    --schedule-poster-width:min(300px, calc(100vw - 48px), calc((100vh - 120px) * 0.75));
    --schedule-poster-label-size:9px;
  }
}

.route-shell--schedule{
  --timetable-stage-width:100vw;
  --timetable-pad-top:0;
  --timetable-pad-bottom:0;
  padding:0;
  margin:0;
  background:#fff;
  position:static;
  display:block;
  width:100%;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  place-items:normal;
}

.route-shell--schedule > .scr{
  background:#fff;
  width:100vw;
  height:auto;
  min-height:0;
  overflow:visible;
  box-shadow:none;
}

html:has(.route-shell--schedule){
  height:auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:none;
}

html:has(.route-shell--schedule)::-webkit-scrollbar,
html:has(.route-shell--schedule) .route-shell--schedule::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}

.timetable-scroll{
  position:relative;
  z-index:1;
  display:block;
  width:100vw;
  height:auto;
  overflow:visible;
  padding:var(--timetable-pad-top) 0 var(--timetable-pad-bottom);
  scroll-padding-block:50vh;
  background:#fff;
  scrollbar-width:none;
}

.timetable-scroll::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}

.timetable-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.timetable-scroll::-webkit-scrollbar-thumb{
  background:#00ff5e;
  border-radius:0;
}

.timetable-stage{
  position:relative;
  width:var(--timetable-stage-width);
  aspect-ratio:3000/13000;
  flex:none;
  background:#fff;
  overflow:visible;
}

.schedule-page-loader{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  pointer-events:none;
}

.schedule-page-loader[hidden]{
  display:none;
}

.schedule-spinner{
  position:relative;
  display:block;
  width:44px;
  height:44px;
}

.schedule-spinner::before,
.schedule-spinner::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-sizing:border-box;
}

.schedule-spinner::before{
  border:6px solid #dedede;
}

.schedule-spinner::after{
  border:6px solid transparent;
  border-top-color:#555;
  border-right-color:#555;
  animation:schedule-spinner-rotate 760ms linear infinite;
}

.schedule-spinner--image{
  width:26px;
  height:26px;
}

.schedule-spinner--image::before{
  border-width:4px;
}

.schedule-spinner--image::after{
  border-width:4px;
}

.timetable-image-loader{
  position:absolute;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.timetable-image-loader--base{
  inset:0;
}

.timetable-image-loader--item{
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
}

.timetable-image-loader--title{
  top:0.34%;
  left:50%;
  width:36%;
  aspect-ratio:1095/252;
  transform:translateX(-50%);
}

.is-timetable-image-loading{
  visibility:hidden;
}

@keyframes schedule-spinner-rotate{
  to{transform:rotate(360deg)}
}

.timetable-base,
.timetable-item,
.timetable-title{
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.timetable-base{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
}

.timetable-motion-plane{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.timetable-item{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
  object-fit:fill;
  backface-visibility:hidden;
}

.timetable-base--bg{z-index:1}
.timetable-motion-plane--z-1,
.timetable-item--z-1{z-index:6}
.timetable-motion-plane--z-2,
.timetable-item--z-2{z-index:5}
.timetable-motion-plane--z-3,
.timetable-item--z-3{z-index:4}
.timetable-motion-plane--z-4,
.timetable-item--z-4{z-index:3}
.timetable-motion-plane--z-5,
.timetable-item--z-5{z-index:2}
.timetable-base--text{z-index:8}

.timetable-title{
  position:absolute;
  z-index:7;
  top:0.34%;
  left:50%;
  width:36%;
  height:auto;
  transform:translateX(-50%);
}

.schedule-close,
.media-view__close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  color:var(--ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.schedule-close{
  position:fixed;
  top:calc(23px + env(safe-area-inset-top, 0px));
  right:calc(32px + env(safe-area-inset-right, 0px));
  z-index:30;
  border:1px solid rgba(0,0,0,0.14);
  border-radius:50%;
  background:rgba(255,255,255,0.30);
  text-decoration:none;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.schedule-close[hidden]{
  display:none !important;
}

.schedule-close:focus-visible,
.media-view__close:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:3px;
}

.schedule-close__mark,
.media-view__close .meta{
  position:relative;
  display:block;
  width:9px;
  height:9px;
  font-size:0;
  line-height:0;
  letter-spacing:0;
}

.schedule-close__mark::before,
.schedule-close__mark::after,
.media-view__close .meta::before,
.media-view__close .meta::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  display:block;
  width:11px;
  height:1px;
  background:currentColor;
  transform-origin:center;
}

.schedule-close__mark::before,
.media-view__close .meta::before{
  transform:translate(-50%, -50%) rotate(45deg);
}

.schedule-close__mark::after,
.media-view__close .meta::after{
  transform:translate(-50%, -50%) rotate(-45deg);
}

@media (max-width:767px){
  .route-shell--schedule{
    --timetable-stage-width:100vw;
    --timetable-pad-top:0;
    --timetable-pad-bottom:0;
  }

  .timetable-stage{
    overflow:hidden;
  }

  .timetable-scroll{
    scrollbar-width:none;
  }

  .timetable-scroll::-webkit-scrollbar{
    display:none;
  }

  .schedule-close,
  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__close{
    top:calc(15px + env(safe-area-inset-top, 0px));
    right:calc(16px + env(safe-area-inset-right, 0px));
    width:28px;
    height:28px;
  }
}

@media (prefers-reduced-motion:reduce){
  .timetable-item{
    transform:none !important;
    will-change:auto;
  }

  .schedule-spinner::after{
    animation:none;
  }
}

/* Component: gallery grid
   RIIZE MAP backend shell. Source-preserving component extraction. */

.gallery-grid{
  --gallery-columns:3;
  position:absolute;
  left:0;
  right:0;
  overflow:hidden;
}

.gallery-grid.rm-scroll-y{
  scrollbar-gutter:auto;
}

.gallery-grid--web{
  --gallery-columns:6;
  --gallery-column-gap:16px;
  --gallery-row-gap:36px;
  --gallery-min-thumb-width:216px;
  top:var(--screen-header-detail-height, 72px);
  bottom:calc(var(--screen-footer-height, 48px) + var(--screen-safe-bottom));
  padding:48px 32px;
}

.gallery-grid--mobile{
  --gallery-columns:3;
  --gallery-column-gap:8px;
  --gallery-row-gap:20px;
  top:var(--screen-header-detail-height, 56px);
  bottom:calc(var(--screen-footer-height, 44px) + var(--screen-safe-bottom));
  padding:20px 16px;
}

.gallery-grid__row{
  display:grid;
  align-items:end;
}

.gallery-grid__row--web{
  grid-template-columns:repeat(var(--gallery-columns), minmax(0, 1fr));
  column-gap:var(--gallery-column-gap);
  margin-bottom:var(--gallery-row-gap);
}

.gallery-grid__row--mobile{
  grid-template-columns:repeat(var(--gallery-columns), minmax(0, 1fr));
  column-gap:var(--gallery-column-gap);
  margin-bottom:var(--gallery-row-gap);
}

.gallery-grid__row:last-child{margin-bottom:0}

.gallery-cell{
  --gallery-cap-bottom:-18px;
  --gallery-cap-font-size:9px;
  --gallery-video-play-x:18px;
  --gallery-video-play-y:11px;
  --gallery-wave-height:40px;
  --gallery-wave-gap:4px;
  --gallery-wave-padding-x:14%;
  --gallery-text-padding:18px 12px;
  --gallery-text-gap:6px;
  background:var(--ph-1);
  border:0;
  padding:0;
  position:relative;
  aspect-ratio:1;
  display:block;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

div.gallery-cell{cursor:default}

.gallery-cell--portrait{aspect-ratio:3/4}
.gallery-cell--tall{aspect-ratio:2/3}
.gallery-cell--landscape{aspect-ratio:4/3}
.gallery-cell--wide{aspect-ratio:3/2}

.gallery-cell .cap{
  position:absolute;
  bottom:var(--gallery-cap-bottom);
  left:0;
  right:0;
  display:flex;
  justify-content:flex-start;
  font-family:var(--font-base);
  font-size:var(--gallery-cap-font-size);
  letter-spacing:0.04em;
  color:var(--meta);
  text-transform:uppercase;
  font-feature-settings:'tnum';
  white-space:nowrap;
}

.gallery-cell__media{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.gallery-cell--video::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:0;
  height:0;
  border-left:var(--gallery-video-play-x) solid rgba(255,255,255,0.85);
  border-top:var(--gallery-video-play-y) solid transparent;
  border-bottom:var(--gallery-video-play-y) solid transparent;
  z-index:2;
}

.gallery-cell--audio{background:#ededed}

.gallery-cell--audio .wave{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:var(--gallery-wave-height);
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--gallery-wave-gap);
  padding:0 var(--gallery-wave-padding-x);
}

.gallery-cell--audio .wave span{
  flex:none;
  width:2px;
  background:var(--ink);
  border-radius:1px;
  opacity:0.55;
}

.gallery-cell--text{
  background:#fafafa;
  border:1px solid #f1f1f1;
  overflow:hidden;
}

.gallery-cell--text::before{
  content:none;
}

.gallery-cell--text::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:56%;
  background:linear-gradient(180deg, rgba(250,250,250,0) 0%, #fafafa 82%);
  pointer-events:none;
  z-index:1;
}

.gallery-cell--text .note-preview{
  position:absolute;
  inset:0;
  padding:18px 16px 24px;
  display:block;
  color:#0a0a0a;
  font-family:var(--font-cjk);
  font-size:14px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  word-break:keep-all;
  overflow:hidden;
  filter:blur(2px);
}

.gallery-cell--text .note-preview p{
  margin:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
}

.gallery-cell--text .note-preview p + p{
  margin-top:10px;
  -webkit-line-clamp:5;
}

.gallery-cell--text .cap{
  z-index:2;
}

.gallery-cell--text .lines{
  padding:var(--gallery-text-padding);
  display:flex;
  flex-direction:column;
  gap:var(--gallery-text-gap);
}

.gallery-cell--text .lines span{
  display:block;
  height:2px;
  background:var(--ph-3);
}

.gallery-cell--text .lines span:nth-child(2){width:75%}
.gallery-cell--text .lines span:nth-child(4){width:60%}
.gallery-cell--text .lines span:nth-child(5){width:90%}

.gallery-grid__status{
  font-family:var(--font-point);
  font-size:10px;
  letter-spacing:var(--ls-meta);
  color:var(--meta);
  text-transform:uppercase;
}

@media (max-width:767px){
  .gallery-cell{
    --gallery-cap-bottom:-16px;
    --gallery-cap-font-size:8px;
    --gallery-video-play-x:14px;
    --gallery-video-play-y:9px;
    --gallery-wave-height:32px;
    --gallery-wave-gap:3px;
    --gallery-wave-padding-x:12%;
    --gallery-text-padding:14px 10px;
    --gallery-text-gap:5px;
  }

  .gallery-cell--text .note-preview{
    padding:14px 12px 22px;
    font-size:10px;
    line-height:1.5;
    filter:blur(1.5px);
  }

  .gallery-cell--text::after{
    height:30%;
  }

  .gallery-cell--text .note-preview p + p{
    margin-top:8px;
  }
}

/* Component: BGM and waveform indicators
   RIIZE MAP backend shell. Source-preserving component extraction. */

  /* BGM 진폭 애니메이션 */
  .bgm-wave{
    display:inline-flex;
    align-items:center;
    gap:2px;
    height:14px;
  }
  .bgm-wave span{
    display:block;
    width:2px;
    height:3px;
    border-radius:0;
    background:var(--ink);
    opacity:0.35;
    transform:scaleY(1);
    transform-origin:center;
    animation:none;
  }
  .bgm-control.is-playing .bgm-wave span{
    opacity:0.85;
    animation:bgm-pulse 680ms var(--ease-soft) infinite alternate;
  }
  .bgm-control.is-playing .bgm-wave span:nth-child(1){height:4px;animation-delay:0s}
  .bgm-control.is-playing .bgm-wave span:nth-child(2){height:10px;animation-delay:0.15s}
  .bgm-control.is-playing .bgm-wave span:nth-child(3){height:7px;animation-delay:0.30s}
  .bgm-control.is-playing .bgm-wave span:nth-child(4){height:13px;animation-delay:0.05s}
  .bgm-control.is-playing .bgm-wave span:nth-child(5){height:5px;animation-delay:0.20s}
  .bgm-control.is-playing .bgm-wave span:nth-child(6){height:9px;animation-delay:0.35s}
  .bgm-control.is-playing .bgm-wave span:nth-child(7){height:6px;animation-delay:0.10s}
  .bgm-control.is-playing .bgm-wave span:nth-child(8){height:11px;animation-delay:0.25s}
  @keyframes bgm-pulse{
    from{transform:scaleY(0.2);opacity:0.35}
    to{transform:scaleY(1);opacity:0.85}
  }

.bgm-control{display:flex;align-items:center;gap:12px}
.bgm-control--compact{gap:10px}
.bgm-control__button{--chrome-icon-button-size:28px}
.bgm-control__icon{display:block;width:28px;height:28px}
.bgm-control__button .bgm-control__icon{width:100%;height:100%}
.bgm-control__icon--compact{width:26px;height:26px}
.bgm-control__button .bgm-control__icon--pause{display:none}
.bgm-control.is-playing .bgm-control__button .bgm-control__icon--play{display:none}
.bgm-control.is-playing .bgm-control__button .bgm-control__icon--pause{display:block}
.wave-bar{height:var(--wave-height, 50%)}
.wave-bar--30{--wave-height:30%}.wave-bar--35{--wave-height:35%}.wave-bar--40{--wave-height:40%}
.wave-bar--45{--wave-height:45%}.wave-bar--50{--wave-height:50%}.wave-bar--55{--wave-height:55%}
.wave-bar--60{--wave-height:60%}.wave-bar--65{--wave-height:65%}.wave-bar--70{--wave-height:70%}
.wave-bar--75{--wave-height:75%}.wave-bar--80{--wave-height:80%}.wave-bar--85{--wave-height:85%}
.wave-bar--90{--wave-height:90%}
@media (max-width:767px){
      /* BGM 진폭 애니메이션 */
      .bgm-wave{
        display:inline-flex;align-items:center;gap:2px;height:12px;
      }
      .bgm-wave span{
        display:block;width:2px;height:3px;border-radius:0;background:var(--ink);opacity:0.35;transform:scaleY(1);transform-origin:center;animation:none;
      }
      .bgm-control.is-playing .bgm-wave span{
        opacity:0.85;
        animation:bgm-pulse 680ms var(--ease-soft) infinite alternate;
      }
      .bgm-control.is-playing .bgm-wave span:nth-child(1){height:4px;animation-delay:0s}
      .bgm-control.is-playing .bgm-wave span:nth-child(2){height:10px;animation-delay:0.15s}
      .bgm-control.is-playing .bgm-wave span:nth-child(3){height:7px;animation-delay:0.30s}
      .bgm-control.is-playing .bgm-wave span:nth-child(4){height:13px;animation-delay:0.05s}
      .bgm-control.is-playing .bgm-wave span:nth-child(5){height:5px;animation-delay:0.20s}
      .bgm-control.is-playing .bgm-wave span:nth-child(6){height:9px;animation-delay:0.35s}
      .bgm-control.is-playing .bgm-wave span:nth-child(7){height:6px;animation-delay:0.10s}
      .bgm-control.is-playing .bgm-wave span:nth-child(8){height:11px;animation-delay:0.25s}
      @keyframes bgm-pulse{
        from{transform:scaleY(0.2);opacity:0.35}
        to{transform:scaleY(1);opacity:0.85}
      }

  .bgm-control{gap:10px}
  .bgm-control__button{--chrome-icon-button-size:26px}
  .bgm-control__icon{width:26px;height:26px}
  .bgm-control__button .bgm-control__icon{width:100%;height:100%}
}

/* Component: poster carousel
   RIIZE MAP backend shell. Source-preserving component extraction. */

  .poster-stage{
    --poster-gap:24px;
    --poster-card-width:min(clamp(220px, 19.5vw, 280px), calc((100vh - 150px) * 0.726));
    --poster-selected-card-width:min(clamp(280px, 25vw, 360px), calc((100vh - 150px) * 0.726));
    --poster-label-margin:12px;
    --poster-label-size:12px;
    --poster-edge-pad:max(28px, calc((100% - var(--poster-selected-card-width)) / 2));
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  .poster-carousel{
    width:100%;
    display:flex;
    gap:var(--poster-gap);
    align-items:center;
    overflow-x:hidden;
    overflow-y:hidden;
    padding-inline:var(--poster-edge-pad);
    overscroll-behavior:contain;
    scrollbar-width:none;
    touch-action:pan-y;
  }
  .poster-carousel::-webkit-scrollbar{display:none}
  .poster-card{
    --poster-progress:0;
    --poster-current-card-width:calc(var(--poster-card-width) + ((var(--poster-selected-card-width) - var(--poster-card-width)) * var(--poster-progress)));
    --poster-frost-radius:5px;
    --poster-frost-spread:18px;
    --poster-frost-grain-size:160px;
    --poster-unselected-wash:0.2;
    position:relative;
    z-index:0;
    display:flex;
    flex:0 0 var(--poster-current-card-width);
    width:var(--poster-current-card-width);
    flex-direction:column;
    align-items:center;
    cursor:grab;
    outline:none;
    user-select:none;
  }
  .poster-card__image{
    width:var(--poster-current-card-width);
    aspect-ratio:1200/1652;
    background:transparent;
    position:relative;
    overflow:visible;
    isolation:isolate;
    transition:width 360ms cubic-bezier(0.22,0.61,0.36,1);
    will-change:width;
  }
  .poster-card__image::before,
  .poster-card__image::after{
    content:"";
    position:absolute;
    inset:calc(var(--poster-frost-spread) * -1);
    pointer-events:none;
    transition:opacity 600ms cubic-bezier(0.25,0.1,0.25,1);
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 var(--poster-frost-spread), #000 calc(100% - var(--poster-frost-spread)), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 var(--poster-frost-spread), #000 calc(100% - var(--poster-frost-spread)), transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 var(--poster-frost-spread), #000 calc(100% - var(--poster-frost-spread)), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 var(--poster-frost-spread), #000 calc(100% - var(--poster-frost-spread)), transparent 100%);
    mask-composite:intersect;
  }
  .poster-card__image::before{
    z-index:3;
    background:rgb(255 255 255 / var(--poster-unselected-wash));
  }
  .poster-card__image::after{
    z-index:4;
    opacity:0.52;
    background-image:
      linear-gradient(135deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.02) 48%, rgb(0 0 0 / 0.13)),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3 .3' numOctaves='3' seed='17'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.44'/%3E%3C/svg%3E");
    background-size:100% 100%, var(--poster-frost-grain-size) var(--poster-frost-grain-size);
    background-blend-mode:soft-light, overlay;
    mix-blend-mode:screen;
  }
  .poster-card.is-selected{
    --poster-progress:1;
    cursor:pointer;
    z-index:2;
  }
  .poster-card.is-locked{
    --poster-frost-radius:5px;
    --poster-unselected-wash:0.22;
    cursor:default;
  }
  .poster-card.is-locked.is-selected{
    cursor:default;
  }
  .poster-carousel.is-dragging .poster-card{
    cursor:grabbing;
  }
  .poster-carousel.is-restoring-focus .poster-card__image,
  .poster-carousel.is-restoring-focus .poster-card__image::before,
  .poster-carousel.is-restoring-focus .poster-card__image::after,
  .poster-carousel.is-restoring-focus .poster-card__label,
  .poster-carousel.is-restoring-focus .media-fill{
    transition:none !important;
  }
  .nav-compass:disabled{
    cursor:default;
    opacity:0.45;
  }
  .poster-card__label{
    width:min(var(--poster-card-width), calc(100vw - 32px));
    margin-top:var(--poster-label-margin);
    font-family:var(--font-base);
    font-size:var(--poster-label-size);
    font-weight:700;
    letter-spacing:0;
    line-height:1.12;
    text-align:center;
    color:#CBCBCB;
    text-transform:none;
    transition:color 600ms cubic-bezier(0.25,0.1,0.25,1);
  }
  .poster-card__label-prefix{
    font-weight:700;
  }
  .poster-card__label-title{
    font-weight:400;
  }
  .poster-card.is-selected .poster-card__image{
    background:var(--ph-1);
  }
  .poster-card.is-selected .poster-card__image::before,
  .poster-card.is-selected .poster-card__image::after{
    opacity:0;
  }
  .poster-card.is-locked .poster-card__image::before,
  .poster-card.is-locked.is-selected .poster-card__image::before{
    opacity:0.72;
    background:rgb(255 255 255 / 0.22);
  }
  .poster-card.is-locked .poster-card__image::after,
  .poster-card.is-locked.is-selected .poster-card__image::after{
    opacity:0.52;
    background-image:
      linear-gradient(135deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.02) 48%, rgb(0 0 0 / 0.08)),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3 .3' numOctaves='3' seed='17'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.44'/%3E%3C/svg%3E");
    mix-blend-mode:screen;
  }
  .poster-card.is-selected .poster-card__label{
    color:#000000;
  }
  .poster-card.is-locked .poster-card__label,
  .poster-card.is-locked.is-selected .poster-card__label{
    color:#8a8a8a;
  }
  .poster-card:focus-visible .poster-card__image{
    outline:1px solid #000000;
    outline-offset:4px;
  }
  .poster-card.is-locked:focus-visible .poster-card__image{
    outline-color:rgb(0 0 0 / 0.12);
    outline-offset:0;
  }

.poster-stage--desktop-offset,
.poster-stage--mobile-offset{bottom:calc(var(--screen-footer-height, 48px) + var(--screen-safe-bottom))}
.media-fill{width:100%;height:100%;object-fit:cover;display:block}
.poster-card__image .media-fill{
  position:absolute;
  inset:0;
  z-index:1;
  transition:filter 600ms cubic-bezier(0.25,0.1,0.25,1);
}
.poster-card:not(.is-selected) .media-fill{
  filter:blur(var(--poster-frost-radius));
}
.poster-card.is-locked .media-fill,
.poster-card.is-locked.is-selected .media-fill{
  opacity:1;
  filter:blur(var(--poster-frost-radius)) saturate(0.9);
}
.poster-card__lock{
  position:absolute;
  left:0;
  right:0;
  bottom:18%;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:rgb(0 0 0 / 0.48);
  text-align:center;
  pointer-events:none;
  transform:translateZ(0);
}
.poster-card__lock-line{
  width:34px;
  height:1px;
  background:currentColor;
  opacity:0.45;
}
.poster-card__lock-state{
  font-family:var(--font-base);
  font-size:10px;
  font-weight:700;
  letter-spacing:0;
  line-height:1.05;
}
.poster-card__lock-time{
  font-family:var(--font-point);
  font-size:8px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.1;
  color:rgb(0 0 0 / 0.34);
}
.poster-card.is-lock-bump .poster-card__lock{
  animation:poster-lock-bump 320ms var(--ease-soft);
}
@keyframes poster-lock-bump{
  0%{opacity:1;transform:translateZ(0)}
  45%{opacity:0.58;transform:translateY(-1px)}
  100%{opacity:1;transform:translateZ(0)}
}

@media (max-width:767px){
      .poster-stage{
        --poster-gap:18px;
        --poster-card-width:200px;
        --poster-selected-card-width:260px;
        --poster-label-margin:10px;
        --poster-label-size:10px;
      }
      .poster-card{
        --poster-frost-radius:4px;
        --poster-frost-spread:14px;
        --poster-frost-grain-size:112px;
      }
      .poster-card__lock-state,
      .poster-card__lock-time{
        font-size:8px;
      }
}

/* Component: single media shell
   RIIZE MAP backend shell. Source-preserving component extraction. */

.media-view__backdrop{
  position:absolute;
  inset:0;
  overflow:hidden;
  filter:blur(12px) brightness(0.92);
}

.media-view{
  position:absolute;
  inset:0;
  z-index:var(--z-overlay);
  --media-view-container-ratio-k:0.75;
  --media-view-container-h-over-w:1.333;
  --media-view-container-bound-width:405px;
  --media-view-max-width:840px;
  --media-view-safe-x:220px;
  --media-view-safe-y:240px;
  --media-view-stage-top:72px;
  --media-view-stage-bottom:159px;
  --media-view-stage-center-y:calc(var(--media-view-stage-top) + (100% - var(--media-view-stage-top) - var(--media-view-stage-bottom)) / 2);
  --media-view-frame-max-height:calc(var(--screen-viewport-height) - var(--media-view-safe-y));
  --media-view-default-width:min(var(--media-view-max-width), calc(100vw - var(--media-view-safe-x)), var(--media-view-container-bound-width), calc(var(--media-view-frame-max-height) * var(--media-view-container-ratio-k)));
  --media-view-frame-width:min(var(--media-view-max-width), calc(100vw - var(--media-view-safe-x)));
  --media-view-frame-height:min(var(--media-view-frame-max-height), calc(var(--media-view-default-width) * var(--media-view-container-h-over-w)));
  --media-view-index-top:calc(var(--media-view-stage-center-y) + (var(--media-view-frame-height) * 0.5) + 12px);
}

.media-view[data-gallery-media-view]{
  opacity:0;
  pointer-events:none;
  transition:opacity 360ms var(--ease-soft);
}

.media-view[hidden]{display:none !important}

.responsive-view > :not(.media-view){
  transition:filter 360ms var(--ease-soft);
}

body.is-media-view-open .responsive-view > :not(.media-view){
  filter:blur(12px) brightness(0.92);
}

.media-view[data-gallery-media-view].media-view--open,
.media-view[data-gallery-media-view].media-view--closing{
  pointer-events:auto;
}

.media-view[data-gallery-media-view].media-view--open{
  opacity:1;
}

.media-view__shade{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.90);
}

.media-view[data-gallery-media-view] .media-view__shade{
  opacity:0;
  transition:opacity 360ms var(--ease-soft);
}

.media-view[data-gallery-media-view].media-view--open .media-view__shade{
  opacity:1;
}

.media-view__frame{
  position:absolute;
  top:var(--media-view-stage-center-y);
  left:50%;
  transform:translate(-50%, -50%);
  width:var(--media-view-frame-width);
  height:var(--media-view-frame-height);
  --media-view-media-bound-width:var(--media-view-container-bound-width);
  --media-view-media-max-width:min(var(--media-view-frame-width), var(--media-view-media-bound-width));
  --media-view-media-max-height:var(--media-view-frame-height);
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  z-index:1;
  box-shadow:none;
}

.media-view[data-gallery-media-view] .media-view__frame{
  opacity:0;
  transform:translate(-50%, -48%) scale(0.965);
  transition:opacity 360ms var(--ease-soft), transform 420ms var(--ease-soft);
  will-change:opacity, transform;
}

.media-view[data-gallery-media-view].media-view--open .media-view__frame{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}

@supports (width:calc(1px * 1)){
  .media-view__frame{
    width:var(--media-view-frame-width);
  }
}

.media-view__frame::after{
  content:'MEDIA IMAGE';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:pre;
  font-family:var(--font-base);
  font-size:10px;
  color:#777;
  letter-spacing:0.04em;
  line-height:1.7;
  text-align:center;
  text-transform:uppercase;
  border:1px dashed rgba(0,0,0,0.22);
  margin:18px;
  pointer-events:none;
}

.media-view__frame--video::after{
  content:'MEDIA VIDEO';
}

.media-view[data-media-type="image"] .media-view__frame::after{
  border:0;
}

.media-view__frame--video{
  overflow:hidden;
  cursor:pointer;
}

.media-view__video-shell{
  --media-view-video-ratio-w:3;
  --media-view-video-ratio-h:4;
  position:relative;
  width:min(
    var(--media-view-media-max-width),
    calc(var(--media-view-media-max-height) * var(--media-view-video-ratio-w) / var(--media-view-video-ratio-h))
  );
  aspect-ratio:var(--media-view-video-ratio-w) / var(--media-view-video-ratio-h);
  max-height:var(--media-view-media-max-height);
}

.media-view__frame--ratio-16-9 .media-view__video-shell{
  --media-view-video-ratio-w:16;
  --media-view-video-ratio-h:9;
}

.media-view__frame--ratio-3-2 .media-view__video-shell{
  --media-view-video-ratio-w:3;
  --media-view-video-ratio-h:2;
}

.media-view__frame--ratio-4-3 .media-view__video-shell{
  --media-view-video-ratio-w:4;
  --media-view-video-ratio-h:3;
}

.media-view__frame--ratio-1-1 .media-view__video-shell{
  --media-view-video-ratio-w:1;
  --media-view-video-ratio-h:1;
}

.media-view__frame--ratio-2-3 .media-view__video-shell{
  --media-view-video-ratio-w:2;
  --media-view-video-ratio-h:3;
}

.media-view__frame--video .media-view__media{
  pointer-events:none;
}

.media-view__frame:has(.media-view__media[src]:not([src=""]))::after,
.media-view__frame:has(.media-view__media source[src]:not([src=""]))::after{
  content:none;
}

.media-view__play{
  appearance:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:56px;
  height:56px;
  padding:0;
  border-radius:50%;
  background:rgba(255,255,255,0.32);
  border:0;
  color:#fff;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  cursor:pointer;
  transition:opacity 160ms ease, background-color 160ms ease;
}

.media-view__video-shell:hover .media-view__play,
.media-view__video-shell:focus-within .media-view__play,
.media-view__frame--video:not(:has(.media-view__video-shell)):hover .media-view__play{
  opacity:1;
  pointer-events:auto;
}

.media-view__play:hover,
.media-view__play:focus-visible{
  background:rgba(255,255,255,0.46);
}

.media-view__play::before{
  content:'';
  display:block;
  width:0;
  height:0;
  margin-left:4px;
  border-left:16px solid currentColor;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}

.media-view__play::after{
  content:'';
  display:none;
  width:14px;
  height:20px;
  box-sizing:border-box;
  border-left:5px solid currentColor;
  border-right:5px solid currentColor;
}

.media-view__frame--video.is-playing .media-view__play::before{
  display:none;
}

.media-view__frame--video.is-playing .media-view__play::after{
  display:block;
}

.media-view__frame--content,
.media-view__frame:has(.media-slot){
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  padding:0;
}

.media-view__frame.media-view__frame--audio,
.media-view__frame.media-view__frame--audio:has(.media-slot){
  background:transparent;
  border:0;
}

.media-view__frame.media-view__frame--text-memo,
.media-view__frame.media-view__frame--text-memo:has(.media-slot){
  width:var(--media-view-default-width);
  align-items:stretch;
  background:#fff;
  border:1px solid var(--rule);
  padding:34px 34px 18px;
}

.media-view__frame--text-memo .media-slot{
  width:100%;
  height:100%;
  align-items:stretch;
  padding:0;
}

.media-view__frame--text-memo .text-terminal{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  max-height:100%;
  min-height:0;
  color:var(--ink);
  font-family:var(--font-base);
  letter-spacing:0;
}

.media-view__frame--text-memo .terminal-copy.quote-kr{
  flex:1;
  min-height:0;
}

.media-view__frame--content::after,
.media-view__frame:has(.media-slot)::after,
.media-view__frame--filled::after{
  content:none;
}

.media-view__media{
  display:block;
  width:var(--media-view-media-width, var(--media-view-media-max-width));
  height:var(--media-view-media-height, var(--media-view-media-max-height));
  max-width:var(--media-view-media-max-width);
  max-height:var(--media-view-media-max-height);
  object-fit:contain;
  object-position:center center;
  background:transparent;
}

.media-view__video-shell .media-view__media{
  --media-view-media-width:100%;
  --media-view-media-height:100%;
}

.media-view__frame--ratio-16-9{
  --media-view-media-bound-width:840px;
}

.media-view__frame--ratio-3-2{
  --media-view-media-bound-width:810px;
}

.media-view__frame--ratio-4-3{
  --media-view-media-bound-width:720px;
}

.media-view__frame--ratio-1-1{
  --media-view-media-bound-width:540px;
}

.media-view__frame--ratio-2-3{
  --media-view-media-bound-width:360px;
}

.media-slot{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.media-view__close{
  position:absolute;
  top:23px;
  right:32px;
  padding:0;
  border:0;
  background:transparent;
  z-index:2;
}

.media-view[data-gallery-media-view] .media-view__close{
  opacity:0;
  transition:opacity 280ms var(--ease-soft);
}

.media-view[data-gallery-media-view].media-view--open .media-view__close{
  opacity:1;
}

.media-view__index{
  position:absolute;
  top:var(--media-view-index-top);
  left:50%;
  transform:translateX(-50%);
  width:min(600px, calc(100vw - 64px));
  text-align:center;
  z-index:1;
  font-family:var(--font-point);
  font-size:11px;
  font-weight:400;
  line-height:13px;
  height:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-feature-settings:'tnum';
  color:var(--ink);
}

.media-view[data-gallery-media-view] .media-view__index{
  opacity:0;
  transform:translate(-50%, 4px);
  transition:opacity 320ms var(--ease-soft), transform 360ms var(--ease-soft);
}

.media-view[data-gallery-media-view].media-view--open .media-view__index{
  opacity:1;
  transform:translate(-50%, 0);
}

.media-view__meta{
  position:absolute;
  top:auto;
  bottom:56px;
  left:50%;
  transform:translateX(-50%);
  width:min(600px, calc(100vw - 64px));
  text-align:center;
  z-index:1;
}

.media-view[data-gallery-media-view] .media-view__meta{
  opacity:0;
  transform:translate(-50%, 6px);
  transition:opacity 320ms var(--ease-soft), transform 360ms var(--ease-soft);
}

.media-view[data-gallery-media-view].media-view--open .media-view__meta{
  opacity:1;
  transform:translate(-50%, 0);
}

.media-view__meta .ctx{
  font-family:var(--font-base);
  font-size:12px;
  font-weight:500;
  letter-spacing:calc(var(--screen-header-center-font-size, 11px) * -0.01);
  text-transform:uppercase;
  line-height:1.4;
  color:var(--ink);
}

.media-view__meta .member{
  margin-top:6px;
  font-family:var(--font-base);
  font-size:10px;
  font-weight:400;
  letter-spacing:0.04em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--meta);
}

.media-view__meta .member--tag{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  min-height:calc(1.4em + 9px);
}

.media-view__nav{
  --media-view-stage-top:72px;
  --media-view-stage-bottom:159px;
  position:absolute;
  top:calc(var(--media-view-stage-top) + (100% - var(--media-view-stage-top) - var(--media-view-stage-bottom)) / 2);
  transform:translateY(-50%);
  width:32px;
  height:32px;
  padding:0;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0;
  color:var(--ink);
  z-index:2;
  opacity:0.7;
  overflow:visible;
  cursor:pointer;
  transition:opacity 320ms var(--ease-soft);
}

.media-view[data-gallery-media-view]:not(.media-view--open) .media-view__nav{
  opacity:0;
}

.media-view__nav::before{
  content:'';
  display:block;
  width:8px;
  height:8px;
  border-top:1.25px solid currentColor;
  border-right:1.25px solid currentColor;
}

.media-view__nav--prev{left:32px}
.media-view__nav--next{right:32px}
.media-view__nav--prev::before{transform:rotate(-135deg)}
.media-view__nav--next::before{transform:rotate(45deg)}

@media (max-width:767px){
  body.is-media-view-open .responsive-view > :not(.media-view){
    filter:blur(6px) brightness(0.92);
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__backdrop{
    filter:blur(6px) brightness(0.92);
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view{
    --media-view-max-width:280px;
    --media-view-safe-x:72px;
    --media-view-safe-y:188px;
    --media-view-stage-top:56px;
    --media-view-stage-bottom:120px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__play{
    width:48px;
    height:48px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__play::before{
    border-left-width:14px;
    border-top-width:8px;
    border-bottom-width:8px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__play::after{
    width:13px;
    height:18px;
    border-left-width:4px;
    border-right-width:4px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__frame::after{
    margin:14px;
    font-size:9px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__frame--content,
  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__frame:has(.media-slot){
    padding:0;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__frame.media-view__frame--text-memo,
  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__frame.media-view__frame--text-memo:has(.media-slot){
    padding:18px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__frame--text-memo .media-slot{
    padding:0;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__close{
    top:15px;
    right:16px;
    width:28px;
    height:28px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__index{
    width:300px;
    font-size:10px;
    line-height:11px;
    height:11px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__meta{
    top:auto;
    bottom:76px;
    width:300px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__meta .ctx{
    font-size:11px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__meta .member{
    margin-top:5px;
    font-size:9px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__meta .member--tag{
    margin-top:8px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__nav{
    --media-view-stage-top:56px;
    --media-view-stage-bottom:120px;
    width:28px;
    height:28px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__nav::before{
    width:8px;
    height:8px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__nav--prev{left:16px}
  :is(.mobile-preview-shell, .responsive-view--mobile) .media-view__nav--next{right:16px}
}

/* Component: member tags
   RIIZE MAP backend shell. Source-preserving component extraction. */

.member-tag{
  display:inline-flex;
  align-items:center;
  color:var(--member-chip-text, #fff);
  font-family:var(--font-base);
  font-size:9px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  line-height:1.4;
}

.member-tag--fill{
  padding:3px 10px;
  border:1.5px solid var(--member-chip-bg, var(--member-bright-clear-shotaro));
  border-radius:9999px;
  background:var(--member-chip-bg, var(--member-bright-clear-shotaro));
}

.member-tag--stroke{
  padding:3px 8px;
  border:1.5px solid var(--member-chip-bg, var(--member-bright-clear-shotaro));
  border-radius:9999px;
  background:var(--member-chip-bg, var(--member-bright-clear-shotaro));
}

.member-tag--riize{
  --member-chip-bg:var(--member-bright-clear-riize);
  --member-chip-text:#fff;
}
.member-tag--shotaro{--member-chip-bg:var(--member-bright-clear-shotaro)}
.member-tag--eunseok{--member-chip-bg:var(--member-bright-clear-eunseok)}
.member-tag--sungchan{--member-chip-bg:var(--member-bright-clear-sungchan)}
.member-tag--wonbin{--member-chip-bg:var(--member-bright-clear-wonbin)}
.member-tag--sohee{--member-chip-bg:var(--member-bright-clear-sohee)}
.member-tag--anton{--member-chip-bg:var(--member-bright-clear-anton)}

/* Component: media inner content
   RIIZE MAP backend shell. Source-preserving component extraction. */

.voice-token{
  width:320px;
  min-height:226px;
  border:1px solid #e6e6e6;
  background:#fff;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.voice-token--original{
  min-height:112px;
  padding:16px 20px;
  display:grid;
  grid-template-columns:52px 1fr;
  gap:20px;
  align-items:center;
}

.token-play{
  width:52px;
  height:52px;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eee;
  color:#000;
  cursor:pointer;
  flex-shrink:0;
  padding:0;
  line-height:0;
}

.token-play:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:3px;
}

.token-play__icon{
  display:block;
  width:20px;
  height:20px;
}

.token-play__icon--pause,
.voice-token.is-playing .token-play__icon--play{display:none}
.voice-token.is-playing .token-play__icon--pause{display:block}
.token-play svg path{fill:currentColor}

.token-copy{
  font-family:var(--font-base);
  letter-spacing:0;
  min-width:0;
  width:100%;
  justify-self:stretch;
  background:#fff;
  padding:0;
}

.token-copy b{
  display:block;
  font-family:var(--font-base);
  font-size:11px;
  margin-bottom:9px;
  letter-spacing:.04em;
}

.token-copy span{
  display:block;
  font-size:10px;
  color:#777;
  line-height:1.45;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.token-copy .token-kicker{color:#0a0a0a}

.mini-wave{
  width:124px;
  max-width:100%;
  min-width:0;
  height:30px;
  margin-top:10px;
  display:block;
  background-image:var(--wave-svg);
  background-repeat:repeat-x;
  background-position:left center;
  background-size:76px 100%;
}

.audio-wave{
  --audio-progress:0%;
  position:relative;
  overflow:hidden;
  background-image:none;
  background:none;
}

.audio-wave__track,
.audio-wave__progress{
  position:absolute;
  inset:0;
  display:block;
  background:#d8d8d8;
  -webkit-mask-image:var(--wave-svg);
  mask-image:var(--wave-svg);
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
  -webkit-mask-position:left center;
  mask-position:left center;
  -webkit-mask-size:76px 100%;
  mask-size:76px 100%;
}

.audio-wave__progress{
  width:var(--audio-progress);
  background:var(--ink);
  transition:width 120ms linear;
}

.audio-wave__head{
  position:absolute;
  top:4px;
  bottom:4px;
  left:var(--audio-progress);
  display:block;
  width:1px;
  background:var(--ink);
  opacity:0;
  transform:translateX(-0.5px);
  transition:left 120ms linear, opacity 160ms var(--ease-soft);
}

.voice-token.is-playing .audio-wave__head,
.voice-token.has-progress .audio-wave__head{opacity:1}

.text-terminal{
  width:360px;
  min-height:248px;
  background:transparent;
  border:0;
  padding:0;
  font-family:var(--font-base);
  letter-spacing:0;
}

.terminal-copy{margin-top:28px;font-size:24px;line-height:1.35;color:#0a0a0a;text-transform:uppercase;letter-spacing:-0.01em}
.terminal-copy span{background:transparent}

.text-terminal.quote-window{
  --memo-scroll-width:8px;
  --memo-scroll-track-height:100%;
  --memo-scroll-thumb-height:60px;
  --memo-scroll-thumb-top:3px;
  width:100%;
  padding:0;
  position:relative;
}

.memo-scrollbar{
  position:absolute;
  top:0;
  right:0;
  width:var(--memo-scroll-width);
  height:var(--memo-scroll-track-height);
  box-sizing:border-box;
  background:rgba(0,0,0,0.025);
  border:0.1px solid rgba(0,0,0,0.08);
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  z-index:3;
}

.text-terminal.quote-window:has(.terminal-copy.quote-kr.rm-scroll-y.is-scrollbar-active) .memo-scrollbar{
  opacity:1;
}

.memo-scrollbar__thumb{
  position:absolute;
  top:var(--memo-scroll-thumb-top);
  left:1px;
  right:1px;
  height:var(--memo-scroll-thumb-height);
  background:var(--rm-scroll-thumb, #DADADA);
  border-radius:999px;
}

.rm-scroll-y{
  --rm-scroll-width:var(--quote-scroll-width, 8px);
  --rm-scroll-gap:var(--quote-scroll-gap, 10px);
  --rm-scroll-thumb:#7a7a7a;
  --rm-scroll-track:#e6e6e6;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scrollbar-gutter:stable;
  scrollbar-color:var(--rm-scroll-thumb) transparent;
  scrollbar-width:thin;
}

.rm-scroll-y--inset{
  box-sizing:border-box;
  padding-right:calc(var(--rm-scroll-width) + var(--rm-scroll-gap));
}

.rm-scroll-y::-webkit-scrollbar{
  width:var(--rm-scroll-width);
}

.rm-scroll-y::-webkit-scrollbar-track{
  background:transparent;
  border:0.1px solid var(--rm-scroll-track);
  border-radius:999px;
}

.rm-scroll-y::-webkit-scrollbar-thumb{
  background:var(--rm-scroll-thumb);
  border:1px solid transparent;
  border-radius:999px;
  background-clip:content-box;
}

.rm-scroll-y::-webkit-scrollbar-corner{
  background:transparent;
}

@media (hover:hover) and (pointer:fine){
  .rm-scroll-y--hover{
    scrollbar-color:transparent transparent;
  }

  .rm-scroll-y--hover::-webkit-scrollbar-track{
    border-color:transparent;
  }

  .rm-scroll-y--hover::-webkit-scrollbar-thumb{
    background:transparent;
  }

  .rm-scroll-y--hover:hover,
  .rm-scroll-y--hover:focus,
  .rm-scroll-y--hover:focus-within{
    scrollbar-color:var(--rm-scroll-thumb) transparent;
  }

  .rm-scroll-y--hover:hover::-webkit-scrollbar-track,
  .rm-scroll-y--hover:focus::-webkit-scrollbar-track,
  .rm-scroll-y--hover:focus-within::-webkit-scrollbar-track{
    border-color:var(--rm-scroll-track);
  }

  .rm-scroll-y--hover:hover::-webkit-scrollbar-thumb,
  .rm-scroll-y--hover:focus::-webkit-scrollbar-thumb,
  .rm-scroll-y--hover:focus-within::-webkit-scrollbar-thumb{
    background:var(--rm-scroll-thumb);
  }
}

.terminal-copy.quote-kr{
  --rm-scroll-width:8px;
  --rm-scroll-gap:12px;
  flex:1;
  min-height:0;
  margin-top:0;
  color:#0a0a0a;
  font-family:var(--font-cjk);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:0.3px;
  text-transform:none;
  word-break:keep-all;
  position:relative;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.terminal-copy.quote-kr span{background:transparent}

.terminal-copy.quote-kr.rm-scroll-y{
  --rm-scroll-thumb:#DADADA;
  --rm-scroll-track-bg:rgba(0,0,0,0.025);
  --rm-scroll-track-border:rgba(0,0,0,0.08);
  --rm-scroll-track-inset:3px;
  scrollbar-color:transparent transparent;
}

.terminal-copy.quote-kr.rm-scroll-y::-webkit-scrollbar-track{
  background:transparent;
  border-color:transparent;
  border-radius:999px;
}

.terminal-copy.quote-kr.rm-scroll-y::-webkit-scrollbar-thumb{
  background:transparent;
  border-radius:999px;
}

.terminal-copy.quote-kr.rm-scroll-y.is-scrollbar-active{
  scrollbar-color:transparent transparent;
}

.terminal-copy.quote-kr.rm-scroll-y.is-scrollbar-active::-webkit-scrollbar-track{
  background:transparent;
  border-color:transparent;
  border-radius:999px;
}

.terminal-copy.quote-kr.rm-scroll-y.is-scrollbar-active::-webkit-scrollbar-thumb{
  background:transparent;
}

.terminal-copy.quote-kr .quote-lines{
  display:block;
  width:100%;
  max-width:100%;
}

.terminal-copy.quote-kr .quote-lines p{
  width:100%;
  max-width:100%;
  margin:0;
  white-space:normal;
  overflow-wrap:normal;
  word-break:keep-all;
}

.terminal-copy.quote-kr .quote-lines p + p{
  margin-top:12px;
}

.terminal-copy.quote-kr .quote-lines span{
  display:block;
  width:100%;
  max-width:100%;
  white-space:normal;
  overflow-wrap:normal;
  word-break:keep-all;
  background:transparent;
  border:0;
  padding:0;
}

.quote-lines .quote-gap{height:12px}

.terminal-foot{
  margin-top:12px;
  padding-top:8px;
  border-top:1px solid var(--soft-rule);
  font-family:var(--font-point);
  color:var(--meta);
  font-feature-settings:'tnum' 1;
}

.foot-label,
.foot-value{
  display:block;
  color:var(--meta);
  font-family:var(--font-point);
  font-size:10px;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}

.foot-date{
  display:block;
  padding-bottom:20px;
  border-bottom:1px solid var(--soft-rule);
  color:var(--meta);
  font-family:var(--font-point);
  font-size:12px;
  line-height:1.08;
  letter-spacing:-0.02em;
  white-space:nowrap;
}

.foot-pair-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding-top:12px;
}

.foot-label{
  margin-bottom:2px;
}

@media (max-width:767px){
  :is(.mobile-preview-shell, .responsive-view--mobile) .voice-token{
    width:248px;
    min-height:96px;
    padding:14px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .voice-token--original{
    min-height:96px;
    padding:14px 18px;
    grid-template-columns:44px 1fr;
    gap:18px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .token-play{
    width:44px;
    height:44px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .token-copy b{
    font-size:10px;
    margin-bottom:7px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .token-copy span{font-size:9px}

  :is(.mobile-preview-shell, .responsive-view--mobile) .mini-wave{
    width:112px;
    height:24px;
    margin-top:8px;
    background-size:70px 100%;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .audio-wave__track,
  :is(.mobile-preview-shell, .responsive-view--mobile) .audio-wave__progress{
    -webkit-mask-size:70px 100%;
    mask-size:70px 100%;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .text-terminal.quote-window{
    width:100%;
    padding:0;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .rm-scroll-y{
    --rm-scroll-width:7px;
    --rm-scroll-gap:7px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .terminal-copy.quote-kr{
    --rm-scroll-width:7px;
    --rm-scroll-gap:12px;
    font-size:14px;
    line-height:1.6;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .terminal-copy.quote-kr .quote-lines p + p{
    margin-top:10px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .terminal-foot{
    margin-top:10px;
    padding-top:7px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .foot-label,
  :is(.mobile-preview-shell, .responsive-view--mobile) .foot-value{
    font-size:8px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .foot-date{
    font-size:12px;
  }

  :is(.mobile-preview-shell, .responsive-view--mobile) .foot-pair-row{
    gap:12px;
  }
}

/* Component: fullscreen route and index
   RIIZE MAP backend shell. Source-preserving component extraction. */

:root{
  --fullscreen-list-bg:#ececec;
  --fullscreen-list-ink:#0a0a0a;
  --fullscreen-list-rule:rgba(10,10,10,0.18);
}

html:has(.route-shell:not(.route-shell--scroll)),
.route-shell:not(.route-shell--scroll){
  width:100%;
  height:var(--screen-viewport-height);
  min-height:var(--screen-viewport-height);
  overflow:hidden;
}

.route-shell{
  padding:0;
  margin:0;
  background:var(--paper, #fff);
}

.route-shell:not(.route-shell--scroll){
  position:fixed;
  inset:0 0 auto;
  width:100%;
  height:var(--screen-viewport-height);
  min-height:var(--screen-viewport-height);
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--paper, #fff);
}

.route-shell:not(.route-shell--scroll) > .responsive-view{
  width:auto;
  margin:0;
  position:static;
  left:auto;
  transform:none;
}

.route-shell:not(.route-shell--scroll) > .scr{
  flex:none;
  position:relative;
  width:100vw;
  height:var(--screen-viewport-height);
  overflow:hidden;
  box-shadow:none;
  transform:none;
  transform-origin:center center;
}

.route-shell--home{
  --screen-header-detail-height:72px;
  --screen-header-pad-x:24px;
  --home-header-logo-width:128px;
}

.route-shell--home .screen-header--brand{
  height:var(--screen-header-detail-height);
  padding:0 var(--screen-header-pad-x);
  border-bottom:1px solid transparent;
  align-items:center;
  justify-content:center;
}

.route-shell--map{
  --screen-header-detail-height:72px;
  --screen-footer-height:48px;
  --screen-footer-pad-x:32px;
  --screen-footer-font-size:11px;
  --screen-header-pad-x:24px;
  --screen-header-gap:32px;
  --screen-header-left-gap:16px;
  --screen-back-size:32px;
  --screen-header-center-font-size:11px;
  --map-member-footer-height:48px;
  display:block;
  place-items:initial;
  background:var(--paper, #fff);
}

.route-shell--map .map-page__viewport{
  position:absolute;
  top:var(--screen-header-detail-height);
  right:0;
  bottom:calc(var(--map-member-footer-height) + var(--screen-footer-height) + var(--screen-safe-bottom));
  left:0;
  overflow:hidden;
  background:var(--map-ground, #e5e1da);
}

.route-shell--map .map-page__viewport > iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:var(--map-ground, #e5e1da);
}

.route-shell--map .map-member-footer{
  bottom:calc(var(--screen-footer-height) + var(--screen-safe-bottom));
  height:var(--map-member-footer-height);
  padding-bottom:0;
}

.fullscreen-map-frame--mobile{display:none}

.route-shell--map[data-map-platform="desktop"]{
  --screen-header-detail-height:72px;
  --screen-footer-height:48px;
  --screen-footer-pad-x:32px;
  --screen-footer-font-size:11px;
  --screen-header-pad-x:24px;
  --screen-header-gap:32px;
  --screen-header-left-gap:16px;
  --screen-back-size:32px;
  --screen-header-center-font-size:11px;
  --map-member-footer-height:48px;
}

.route-shell--map[data-map-platform="mobile"]{
  --screen-footer-height:44px;
  --screen-footer-pad-x:16px;
  --screen-footer-font-size:9px;
  --screen-header-detail-height:56px;
  --screen-header-pad-x:16px;
  --screen-header-gap:16px;
  --screen-header-left-gap:12px;
  --screen-back-size:28px;
  --screen-header-center-font-size:10px;
  --map-member-footer-height:80px;
}

.route-shell--map[data-map-platform="mobile"] .map-member-footer{
  --member-bar-height:80px;
  --member-bar-pad-x:16px;
  --member-bar-overflow-x:hidden;
  --member-bar-overflow-y:hidden;
  --member-pill-width:100%;
  --member-pill-min-width:0;
  --member-pill-padding:0 6px;
  --member-riize-width:64px;
  display:grid;
  grid-template-columns:var(--member-riize-width) repeat(3, minmax(0, 1fr));
  grid-template-rows:repeat(2, 24px);
  align-content:center;
  align-items:center;
  justify-content:stretch;
  gap:6px;
  padding-left:max(var(--member-bar-pad-x), calc(env(safe-area-inset-left) + var(--member-bar-pad-x)));
  padding-right:max(var(--member-bar-pad-x), calc(env(safe-area-inset-right) + var(--member-bar-pad-x)));
}

.route-shell--map[data-map-platform="mobile"] .member-pill[data-map-member="all"]{
  grid-column:1;
  grid-row:1 / span 2;
}

.route-shell--map[data-map-platform="mobile"] .member-pill[data-map-member="shotaro"]{grid-column:2;grid-row:1}
.route-shell--map[data-map-platform="mobile"] .member-pill[data-map-member="eunseok"]{grid-column:3;grid-row:1}
.route-shell--map[data-map-platform="mobile"] .member-pill[data-map-member="sungchan"]{grid-column:4;grid-row:1}
.route-shell--map[data-map-platform="mobile"] .member-pill[data-map-member="wonbin"]{grid-column:2;grid-row:2}
.route-shell--map[data-map-platform="mobile"] .member-pill[data-map-member="sohee"]{grid-column:3;grid-row:2}
.route-shell--map[data-map-platform="mobile"] .member-pill[data-map-member="anton"]{grid-column:4;grid-row:2}

.route-shell--map[data-map-platform="mobile"] .member-pill{
  min-width:0;
}

.route-shell--map[data-map-platform="desktop"] .fullscreen-map-frame--desktop{display:block}
.route-shell--map[data-map-platform="desktop"] .fullscreen-map-frame--mobile{display:none}
.route-shell--map[data-map-platform="mobile"] .fullscreen-map-frame--desktop{display:none}
.route-shell--map[data-map-platform="mobile"] .fullscreen-map-frame--mobile{display:block}

.fullscreen-index{
  min-height:100svh;
  padding:20px;
  display:grid;
  place-items:center;
  background:var(--fullscreen-list-bg);
  color:var(--fullscreen-list-ink);
  font-family:var(--font-base, Arial, sans-serif);
}

.fullscreen-index__list{
  width:min(420px, 100%);
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--fullscreen-list-ink);
}

.fullscreen-index__list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
  padding:0 2px;
  border-bottom:1px solid var(--fullscreen-list-rule);
  color:inherit;
  font-family:var(--font-point, ui-monospace, monospace);
  font-size:11px;
  letter-spacing:0.04em;
  text-decoration:none;
  text-transform:uppercase;
}

.fullscreen-index__list a span:last-child{
  color:#7a7a7a;
  font-size:10px;
}

.fullscreen-index__list a.fullscreen-index__subitem{
  min-height:34px;
  padding-left:22px;
  color:#5d5d5d;
  font-size:10px;
  border-bottom-color:rgba(0,0,0,0.08);
}

.fullscreen-index__list a.fullscreen-index__subitem--end{
  border-bottom-color:var(--fullscreen-list-rule);
}

.fullscreen-index__list a:last-child{
  border-bottom-color:var(--fullscreen-list-ink);
}

.fullscreen-index__list a.fullscreen-index__subitem span:first-child{
  position:relative;
  color:#7a7a7a;
}

.fullscreen-index__list a.fullscreen-index__subitem span:first-child::before{
  content:'';
  position:absolute;
  top:50%;
  left:-14px;
  width:8px;
  border-top:1px solid rgba(0,0,0,0.28);
}

.fullscreen-index__list a.fullscreen-index__subitem span:last-child{
  font-size:9px;
  color:#8a8a8a;
}

@media (max-width:767px){
  .route-shell--home{
    --screen-header-detail-height:56px;
    --screen-header-pad-x:16px;
    --home-header-logo-width:108px;
  }

  .route-shell--map{
    --screen-footer-height:44px;
    --screen-footer-pad-x:16px;
    --screen-footer-font-size:9px;
    --screen-header-detail-height:56px;
    --screen-header-pad-x:16px;
    --screen-header-gap:16px;
    --screen-header-left-gap:12px;
    --screen-back-size:28px;
    --screen-header-center-font-size:10px;
    --map-member-footer-height:80px;
  }
  .route-shell--map .map-member-footer{
    --member-bar-height:80px;
    --member-bar-pad-x:16px;
    --member-bar-overflow-x:hidden;
    --member-bar-overflow-y:hidden;
    --member-pill-width:100%;
    --member-pill-min-width:0;
    --member-pill-padding:0 6px;
    --member-riize-width:64px;
    display:grid;
    grid-template-columns:var(--member-riize-width) repeat(3, minmax(0, 1fr));
    grid-template-rows:repeat(2, 24px);
    align-content:center;
    align-items:center;
    justify-content:stretch;
    gap:6px;
    padding-left:max(var(--member-bar-pad-x), calc(env(safe-area-inset-left) + var(--member-bar-pad-x)));
    padding-right:max(var(--member-bar-pad-x), calc(env(safe-area-inset-right) + var(--member-bar-pad-x)));
  }
  .route-shell--map .member-pill[data-map-member="all"]{
    grid-column:1;
    grid-row:1 / span 2;
  }
  .route-shell--map .member-pill[data-map-member="shotaro"]{grid-column:2;grid-row:1}
  .route-shell--map .member-pill[data-map-member="eunseok"]{grid-column:3;grid-row:1}
  .route-shell--map .member-pill[data-map-member="sungchan"]{grid-column:4;grid-row:1}
  .route-shell--map .member-pill[data-map-member="wonbin"]{grid-column:2;grid-row:2}
  .route-shell--map .member-pill[data-map-member="sohee"]{grid-column:3;grid-row:2}
  .route-shell--map .member-pill[data-map-member="anton"]{grid-column:4;grid-row:2}
  .route-shell--map .member-pill{min-width:0}
  .map-member-footer::-webkit-scrollbar{display:none}
  .route-shell:not(.route-shell--scroll) > .responsive-view--desktop{display:none}
  .route-shell:not(.route-shell--scroll) > .responsive-view--mobile{display:block}
  .fullscreen-map-frame--desktop{display:none}
  .fullscreen-map-frame--mobile{display:block}
}

@media (min-width:768px){
  .route-shell:not(.route-shell--scroll) > .responsive-view--desktop{display:block}
  .route-shell:not(.route-shell--scroll) > .responsive-view--mobile{display:none}
  .fullscreen-map-frame--desktop{display:block}
  .fullscreen-map-frame--mobile{display:none}
}

/* Page: index list
   RIIZE MAP backend shell. Source-preserving component extraction. */


body.fullscreen-index{padding:20px;margin:0}

/* Preview switcher */
.preview-switcher{
  position:fixed;
  top:12px;
  left:50%;
  z-index:50;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:28px;
  padding:0 10px;
  transform:translateX(-50%);
  border:1px solid rgba(10,10,10,0.16);
  background:rgba(255,255,255,0.82);
  color:#0a0a0a;
  font-family:var(--font-point, ui-monospace, monospace);
  font-size:10px;
  letter-spacing:0.08em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  backdrop-filter:blur(8px);
}

.preview-switcher span{
  color:#7a7a7a;
}

.preview-switcher a{
  color:inherit;
  text-decoration:none;
}

.preview-switcher a[aria-current="page"]{
  font-weight:700;
}

.preview-switcher--page{
  position:static;
  transform:none;
  justify-content:center;
  width:max-content;
  margin:0 auto;
}

.button-palette-page{
  min-height:100svh;
  margin:0;
  padding:28px 20px 44px;
  background:#ececec;
  color:#0a0a0a;
  font-family:var(--font-base, Arial, sans-serif);
}

html:has(body.button-palette-page){
  height:auto;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}

html:has(body.button-palette-page) body.button-palette-page{
  height:auto;
  overflow-x:hidden;
  overflow-y:auto;
}

.button-palette-shell{
  width:min(1040px, 100%);
  margin:28px auto 0;
  display:grid;
  gap:18px;
}

.button-palette-header{
  display:grid;
  gap:8px;
  padding-bottom:18px;
  border-bottom:1px solid #0a0a0a;
}

.button-palette-kicker,
.button-palette-section__head span,
.button-palette-row > span{
  font-family:var(--font-point, ui-monospace, monospace);
  font-size:10px;
  letter-spacing:0.14em;
  line-height:1.4;
  color:#7a7a7a;
  text-transform:uppercase;
}

.button-palette-header h1{
  margin:0;
  font-size:44px;
  font-weight:400;
  letter-spacing:0;
  line-height:0.95;
}

.button-palette-section{
  padding:18px 0;
  border-bottom:1px solid rgba(10,10,10,0.18);
}

.button-palette-section__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
}

.button-palette-section__head h2{
  margin:0;
  font-size:20px;
  font-weight:600;
  letter-spacing:0;
  line-height:1;
}

.button-palette-row{
  display:grid;
  grid-template-columns:116px minmax(0, 1fr);
  gap:14px;
  align-items:center;
  min-height:34px;
}

.button-palette-row + .button-palette-row{
  margin-top:8px;
}

.button-palette-buttons{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

.button-palette-buttons .member-pill{
  --member-pill-width:96px;
  --member-pill-min-width:0;
  --member-pill-padding:0 10px;
  cursor:default;
}

.button-palette-buttons .member-pill.button-palette-dark-text.on{
  color:var(--member-text, var(--member-light-pastel-text));
}

@media (max-width:767px){
  .preview-switcher{
    top:10px;
    gap:8px;
    min-height:26px;
    padding:0 8px;
    font-size:9px;
  }

  .preview-switcher--page{
    top:auto;
  }

  .button-palette-page{
    padding:20px 16px 32px;
  }

  .button-palette-shell{
    margin-top:20px;
    gap:14px;
  }

  .button-palette-header h1{
    font-size:34px;
  }

  .button-palette-section__head{
    display:grid;
    gap:5px;
    margin-bottom:12px;
  }

  .button-palette-row{
    grid-template-columns:1fr;
    gap:8px;
    align-items:start;
  }

  .button-palette-buttons .member-pill{
    --member-pill-width:calc((100vw - 44px) / 3);
    --member-pill-padding:0 6px;
  }
}