/* ================================================================
   코레일플러스 재현 — 공통 스타일 (반응형)
   기준 측정: 1080x2340 / density 450 / 배율 2.8125 / 논리 384dp
   고정값(여백·높이·글꼴)은 dp 그대로, 가변값(카드폭·그리드칸)은 비율
   ================================================================ */
@font-face{font-family:'PGov';src:url('fonts/pgov-regular.woff2')format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'PGov';src:url('fonts/pgov-medium.woff2')format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'PGov';src:url('fonts/pgov-semi_bold.woff2')format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'PGov';src:url('fonts/pgov-bold.woff2')format('woff2');font-weight:700;font-display:swap;}

:root{
  /* 고정 — 화면 크기와 무관 */
  --gutter:19.91px;   --tap:48px;
  --appbar-h:56.18px; --tabbar-h:66.13px;
  --r-card:16px;      --r-field:12px;

  /* 색상 */
  --bg:#11131C; --card:#1D1F29; --card-alt:#202635; --field:#282E3C;
  --tabbar:#12141D; --divider:#262831; --primary:#0156D0;
  --txt:#FFF; --dim:#91939A; --dim2:#898D97; --tabdim:#707276;

  /* 타이포 */
  --fs-sm:13.51px; --lh-sm:16.36px;
  --fs-md:13.87px;
  --fs-lg:15.64px; --lh-lg:19.20px;
  --fs-xl:16px;
  --fs-2xl:17.78px; --lh-2xl:21.33px;
  --fs-3xl:19.91px;
  --fs-4xl:23.47px; --lh-4xl:32px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;}
body{position:fixed;inset:0;}
body{background:#0A0C13;color:var(--txt);font-family:'PGov',sans-serif;
     -webkit-font-smoothing:antialiased;word-break:keep-all;}
img{display:block;}
a{text-decoration:none;color:inherit;}

/* ── 앱 프레임: 폭에 따라 늘어나되 데스크톱에선 폰 크기 유지 ── */
/* 기준 384dp 레이아웃을 통째로 배율 조정 → 모든 기기에서 동일 비율 */
.app{position:absolute;left:50%;top:0;
     width:var(--vw,384px);height:var(--vh,100dvh);
     transform:translateX(-50%) scale(var(--s,1));
     transform-origin:top center;
     display:flex;flex-direction:column;overflow:hidden;
     background:var(--bg);}
.app.home{background:var(--bg) url('img/bg_home.png') no-repeat top center;
          background-size:100% auto;}

/* ── 헤더 ── */
.appbar{flex:none;height:var(--appbar-h);display:flex;align-items:center;
        gap:6.75px;padding:0 var(--gutter);z-index:20;
        background:#0D1220;}
.app.menu .appbar{background:var(--bg);}
.appbar .logo{width:102.76px;}
.appbar .spacer{flex:1;}
.appbar .pill{width:61.16px;margin-right:6.7px;}
.appbar .hic{width:39.11px;}

/* ── 스크롤 영역 ── */
.scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;position:relative;
        padding:0 var(--gutter);}
.scroll::-webkit-scrollbar{display:none;}
.tail{height:44px;}

/* ── 제목 ── */
.title{margin-top:8.17px;font-size:var(--fs-4xl);line-height:var(--lh-4xl);font-weight:700;}

/* ── 카드 공통 ── */
.card{background:var(--card);border-radius:var(--r-card);}

/* ── 검색 카드 ── */
.search{margin-top:12.09px;background:var(--card-alt);overflow:hidden;padding-top:28.09px;}
.stations{display:flex;align-items:center;padding:0 16px;}
.st{flex:1;min-width:0;height:var(--tap);display:flex;flex-direction:column;
    align-items:center;justify-content:space-between;}
.st .lb{font-size:var(--fs-md);line-height:var(--lh-sm);font-weight:500;color:var(--dim);}
.st .nm{position:relative;font-size:var(--fs-3xl);line-height:23.82px;font-weight:700;}
.st .arw{position:absolute;right:-13.2px;bottom:5.5px;width:4.98px;}
.swap{width:40.53px;flex:none;margin:0 3.9px;}

.fld{height:var(--tap);background:var(--field);border-radius:var(--r-field);
     display:flex;align-items:center;padding:0 12.09px;}
.fld .lb{flex:none;font-size:var(--fs-md);line-height:var(--lh-sm);font-weight:500;color:var(--dim);}
.fld .vl{flex:1;text-align:center;font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:700;}
.search > .fld{margin:18.58px 16px 0;}
.fld-row{display:flex;gap:8.18px;margin:4.35px 16px 0;}
.fld-row .fld{flex:1;min-width:0;}

.btns{display:flex;height:var(--tap);background:var(--primary);margin-top:13.78px;}
.btns button{flex:1;background:none;border:0;color:var(--txt);font-family:inherit;
             font-size:var(--fs-xl);line-height:var(--lh-lg);font-weight:700;cursor:pointer;}
.btns button+button{border-left:1px solid rgba(255,255,255,.22);}

/* ── 배너 ── */
.banner{width:100%;border-radius:8px;margin-top:19.91px;}

/* ── 아이콘 셀 (정기권 행 · 서비스 그리드 공용) ── */
.cell{display:flex;flex-direction:column;align-items:center;cursor:pointer;}
.cell .ic{height:26px;display:flex;align-items:flex-end;justify-content:center;}
.cell .lb{margin-top:5.7px;font-size:var(--fs-md);line-height:var(--lh-sm);font-weight:600;
          white-space:nowrap;}

.quick{margin-top:19.92px;padding:16px 8.18px;
       display:grid;grid-template-columns:repeat(3,1fr);}
.quick .cell .lb{font-size:var(--fs-xl);line-height:var(--lh-lg);}

.grid{margin-top:12.09px;padding:18.13px 12.09px 16.4px;
      display:grid;grid-template-columns:repeat(4,1fr);row-gap:32.14px;}

/* ── 하단 2카드 ── */
.duo{display:flex;gap:8.18px;margin-top:19.91px;}
.duo .tile{flex:1;min-width:0;padding:19.55px 16px 20px;display:flex;flex-direction:column;}
.tile .tic{width:48px;height:48px;border-radius:14px;}
.tile .tt{margin-top:22.22px;font-size:var(--fs-2xl);line-height:var(--lh-2xl);font-weight:700;}
.tile .td{margin-top:2px;font-size:var(--fs-sm);line-height:18.3px;font-weight:400;color:var(--dim2);}

/* ── 탭바 ── */
.tabbar{flex:none;height:var(--tabbar-h);background:var(--tabbar);
        display:flex;padding:0 3.91px;z-index:20;}
.tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
     padding-top:10.31px;color:var(--tabdim);}
.tab img{width:28.44px;}
.tab .on-i{display:none;}
.tab.on .on-i{display:block;}
.tab.on .off-i{display:none;}
.tab.on::before{content:'';position:absolute;top:0;width:72.18px;height:2.5px;
                background:var(--primary);border-radius:0 0 2px 2px;}
.tab{position:relative;}
.tab span{margin-top:3.16px;font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:500;
          white-space:nowrap;}
.tab.on{color:var(--txt);}

/* ── 시연용 신규 항목 강조 ── */
.cell.new,.carbon{position:relative;}
body[data-demo="on"] .cell.new::before{
  content:'';position:absolute;left:50%;translate:-50% 0;top:-9px;
  width:calc(100% + 16px);height:calc(100% + 18px);border-radius:12px;
  box-shadow:0 0 0 1.5px var(--primary),0 0 18px rgba(1,86,208,.55);
  background:rgba(1,86,208,.10);animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ═══ 마이페이지 ═══ */
.appbar-sub{flex:none;height:var(--tap);display:flex;align-items:center;
            padding:0 var(--gutter);gap:12px;background:var(--card);}
.appbar-sub .back{width:24.18px;height:24.18px;display:flex;align-items:center;
                  justify-content:center;font-size:26px;line-height:1;font-weight:400;}
.appbar-sub h1{font-size:var(--fs-2xl);line-height:var(--lh-2xl);font-weight:700;}

.mypage{background:var(--card);background-image:none;}
.app.menu{background:var(--bg);background-image:none;}
.mypage .scroll{padding:0;}
.sec{padding:0 var(--gutter);margin-top:11.38px;
     font-size:var(--fs-xl);line-height:var(--lh-lg);font-weight:600;color:var(--dim2);}
.sec:first-child{margin-top:11.38px;}
.item{display:flex;align-items:center;justify-content:space-between;
      height:44.09px;padding:0 var(--gutter);
      font-size:17.42px;font-weight:600;color:var(--txt);}
.item img{width:6.4px;}
.hr{height:4.26px;background:var(--divider);margin-top:11.38px;}
.hr + .sec{margin-top:20.8px;}

body[data-demo="on"] .carbon::before{
  content:'';position:absolute;left:8px;right:8px;top:-6px;bottom:-6px;
  border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 1.5px #00D066,0 0 18px rgba(0,208,102,.45);
  background:rgba(0,208,102,.08);animation:pulse 1.8s ease-in-out infinite;}


/* ════════ 전체메뉴 ════════ */
.appbar.am h1{font-size:19.91px;line-height:24.18px;font-weight:700;}
.am-scroll{padding:0;}

.profile{display:flex;align-items:flex-start;justify-content:space-between;
         padding:20.63px var(--gutter) 0;}
.pname{font-size:18.84px;line-height:20.62px;font-weight:700;}
.pid{margin-top:6px;font-size:14.22px;line-height:17.07px;font-weight:500;color:#C7C9D0;
     display:flex;align-items:center;gap:6px;}
.pid .copy{width:11px;height:12px;border:1.2px solid #7D828D;border-radius:2px;
           box-shadow:2.5px -2.5px 0 -1.2px var(--bg),2.5px -2.5px 0 0 #7D828D;}
.pmy{display:flex;align-items:center;gap:8px;
     padding:8px 12px;margin:-6px -12px -8px -12px;
     font-size:15.29px;line-height:19.2px;font-weight:500;color:#C7C9D0;}
.pmy img{width:6.4px;}

.stat{display:flex;margin:22px var(--gutter) 0;}
.stat .s{flex:1;min-width:0;padding-left:0;}
.stat .s+.s{border-left:1px solid #2A2C35;padding-left:16px;}
.stat .k{display:flex;align-items:center;gap:7px;font-size:14.22px;line-height:17.07px;
         font-weight:500;color:#C7C9D0;}
.stat .k img{width:6.4px;}
.stat .v{display:block;margin-top:6px;font-size:17.78px;line-height:21.33px;font-weight:700;}

.svc{margin:30.9px var(--gutter) 0;padding:16.4px 16.36px 20px;}
.svchead{display:flex;align-items:center;justify-content:space-between;}
.svchead > span{font-size:var(--fs-xl);line-height:var(--lh-lg);font-weight:600;}
.svchead .more{display:flex;align-items:center;gap:8px;
               font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:500;color:var(--dim2);}
.svchead .more img{width:6.4px;}
.svcgrid{margin-top:20.5px;display:grid;grid-template-columns:1fr 1fr;row-gap:28.35px;}
.si{display:flex;align-items:center;gap:11.4px;
    font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:600;}
.si img{width:auto;flex:none;}

.band{height:8.06px;background:#090B14;margin-top:19.91px;}
.grp{margin:28.3px var(--gutter) 0;font-size:19.91px;line-height:24.18px;font-weight:700;}
.grp + .row{margin-top:17.96px;}

.row{display:flex;align-items:center;height:48px;padding:0 var(--gutter);
     font-size:17.42px;line-height:21.33px;font-weight:600;color:var(--txt);}
.row > img{width:6.4px;margin-left:auto;flex:none;}
.row > img.ext{width:16.71px;}
.row .sub{margin-left:auto;margin-right:12px;font-size:var(--fs-sm);line-height:var(--lh-sm);
          font-weight:500;color:var(--dim2);white-space:nowrap;}
.row .sub.ver{margin-right:0;}
.row .sw{margin-left:auto;width:44px;height:26px;border-radius:13px;background:#393D46;
         position:relative;flex:none;}
.row .sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;
                border-radius:50%;background:#fff;transition:.2s;}
.row .sw.on{background:var(--primary);}
.row .sw.on::after{left:21px;}

.duo2{display:flex;gap:8.18px;margin:17.96px var(--gutter) 8px;}
.cs{flex:1;min-width:0;height:48px;background:var(--card);border-radius:12px;
    display:flex;align-items:center;justify-content:center;gap:8.5px;
    font-size:var(--fs-md);line-height:var(--lh-sm);font-weight:600;}


/* ── 페이지 전환 애니메이션 (transition.js 가 body 에 토글) ── */
.fade-leave { opacity: 0; transition: opacity .15s ease; }
.fade-enter { opacity: 0; }
.fade-enter-active { opacity: 1; transition: opacity .15s ease; }

@media (prefers-reduced-motion: reduce) {
  .fade-leave, .fade-enter, .fade-enter-active {
    transition: none;
  }
}

/* ── 시연용 클릭 유도 (탭 / 리스트 행) ── */
body[data-demo="on"] .tab.cue::after,
body[data-demo="on"] .cue-row::after{
  content:'';position:absolute;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 1.5px var(--primary),0 0 16px rgba(1,86,208,.5);
  background:rgba(1,86,208,.10);
  animation:pulse 1.8s ease-in-out infinite;}
body[data-demo="on"] .tab.cue::after{left:2px;right:2px;top:4px;bottom:4px;}
body[data-demo="on"] .cue-row{position:relative;}
body[data-demo="on"] .cue-row::after{left:0;right:0;top:0;bottom:0;}