/* ─────────────────────────────────────────────────────────────
   여백 필라테스 — WebMade 견본
   실제로 있는 곳이 아닙니다.

   앞의 다섯 견본과 목적이 다릅니다. 저것들은 "정식 홈페이지"가
   어떻게 생겼는지 보여주는 것이고, 이건 그 위 단계 - 회원가입,
   회원권 결제, 수업 예약, 마이페이지가 붙으면 무엇이 달라지는지를
   보여주려고 만들었습니다.

   그래서 화면마다 "이건 로그인해야 보이는 것", "이건 결제가
   일어나는 자리"를 일부러 눈에 띄게 뒀습니다. 금액이 왜 올라가는지
   말로 설명하는 것보다 이게 빠릅니다.

   색은 앞의 다섯과 겹치지 않게 브랜드를 거의 검정으로 잡았습니다.
   다섯은 전부 색이 있는 브랜드라 썸네일에서 바로 구분됩니다.
   ───────────────────────────────────────────────────────────── */

:root {
  --paper:  #F7F5F2;
  --card:   #FFFFFF;
  --sand:   #EFEBE6;
  --ink:    #221F22;
  --muted:  #6B6469;
  --rule:   #E2DCD5;
  --brand:  #2B2B33;
  --accent: #C7856A;
  --deep:   #1C1A1E;
  --ok:     #3C7A5C;
  --wait:   #A4682C;

  --ui: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
        'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  --edge: clamp(20px, 5vw, 32px);
  --wrap: 1200px;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--ui); font-size: 16px; line-height: 1.75;
  word-break: keep-all; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; letter-spacing: -.035em; line-height: 1.28; font-weight: 800; }
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--edge); }
.num { font-variant-numeric: tabular-nums; }

/* ── 견본 알림 ────────────────────────────────────────────── */
.demo { background: var(--deep); color: #E7E1DC; font-size: 13px;
        line-height: 1.6; padding: 9px 0; }
.demo .wrap { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.demo b { color: #fff; }
.demo a { color: #E2A88F; font-weight: 700; white-space: nowrap; }

/* ── 머리 ─────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 30;
       background: color-mix(in srgb, var(--paper) 93%, transparent);
       backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; justify-content: space-between;
             gap: 14px; padding-block: 12px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo svg { width: 34px; height: 34px; flex: none; }
.logo b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.logo i { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.navwrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.menu { display: flex; gap: 3px; flex-wrap: wrap; }
.menu a { padding: 7px 11px; border-radius: 8px; text-decoration: none;
          font-size: 14.5px; font-weight: 600; color: var(--muted); }
.menu a:hover { background: var(--sand); color: var(--ink); }
.menu a[aria-current] { background: var(--brand); color: #fff; }

/* 로그인 상태 표시 — C등급에서만 생기는 것이라 눈에 띄게 둡니다 */
.me { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px;
      border: 1px solid var(--rule); border-radius: 999px; background: var(--card);
      text-decoration: none; }
.me i { width: 27px; height: 27px; border-radius: 50%; background: var(--brand);
        color: #fff; display: grid; place-items: center; font-style: normal;
        font-size: 12px; font-weight: 800; }
.me span { font-size: 13.5px; font-weight: 700; }
.me em { font-style: normal; font-size: 12px; color: var(--muted); display: block;
         line-height: 1.3; font-weight: 500; }

/* ── 공통 ─────────────────────────────────────────────────── */
main section { padding-block: clamp(40px, 7vw, 66px); }
main section + section { border-top: 1px solid var(--rule); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em;
           color: var(--accent); text-transform: uppercase; margin-bottom: 8px; }
h2 { font-size: clamp(23px, 3.4vw, 30px); }
h3 { font-size: 17px; }
.lede { margin-top: 12px; color: var(--muted); font-size: 16.5px; max-width: 62ch; }
.lede b { color: var(--ink); font-weight: 700; }
.note { margin-top: 10px; font-size: 14px; color: var(--muted); }

.btn { display: inline-flex; align-items: center; justify-content: center;
       padding: 13px 22px; border-radius: 10px; text-decoration: none;
       font-size: 15px; font-weight: 700; border: 1.5px solid var(--rule);
       background: var(--card); white-space: nowrap; font-family: var(--ui);
       cursor: pointer; }
.btn.fill { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.small { padding: 8px 14px; font-size: 13.5px; border-radius: 8px; }
.btn:disabled { color: #A8A0A4; background: var(--sand); border-color: var(--rule);
                cursor: not-allowed; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

.pill-tag { display: inline-block; padding: 5px 13px; border-radius: 999px;
            background: var(--sand); color: var(--ink); font-size: 13px; font-weight: 700; }

/* 이 표시가 붙은 것은 결제나 로그인이 필요한 자리입니다 */
.needs { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
         font-weight: 700; padding: 2px 9px; border-radius: 999px;
         background: color-mix(in srgb, var(--accent) 15%, transparent);
         color: #97553D; white-space: nowrap; }

/* ── 첫 화면 ──────────────────────────────────────────────── */
.hero { padding-block: clamp(34px, 6vw, 58px) clamp(40px, 7vw, 66px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
             gap: clamp(28px, 4vw, 52px); align-items: center; }
.hero h1 { font-size: clamp(30px, 4.6vw, 46px); margin-top: 16px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { margin-top: 16px; font-size: 17px; }
.stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px; }
.stats .v { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.stats .k { display: block; font-size: 13px; color: var(--muted); }

/* ── 예약 판 ──────────────────────────────────────────────── */
.board { background: var(--card); border: 1px solid var(--rule); border-radius: 18px;
         padding: 20px; box-shadow: 0 14px 34px rgba(35,25,30,.07); }
.board-top { display: flex; align-items: center; justify-content: space-between;
             gap: 10px; margin-bottom: 6px; }
.board-top b { font-size: 16px; }
.board-top span { font-size: 12.5px; color: var(--muted); }
.slots { display: grid; gap: 8px; margin-top: 12px; }
.slot { display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
        align-items: center; padding: 12px 14px; border-radius: 12px;
        background: var(--paper); }
.slot .t { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.slot .nm { font-size: 14.5px; font-weight: 700; }
.slot .sub { display: block; font-size: 12.5px; color: var(--muted); }
.slot .left { font-size: 12.5px; font-weight: 700; color: var(--ok); white-space: nowrap; }
.slot .left.few { color: var(--wait); }
.slot .left.none { color: #A8A0A4; }
.slot.mine { background: color-mix(in srgb, var(--brand) 7%, transparent);
             border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.slot.mine .left { color: var(--brand); }
.board-foot { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--rule);
              display: flex; align-items: center; justify-content: space-between;
              gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.board-foot b { color: var(--ink); }

/* ── 흐름 ─────────────────────────────────────────────────── */
.flow { display: grid; gap: 14px; margin-top: 26px;
        grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.fstep { background: var(--card); border: 1px solid var(--rule);
         border-radius: 16px; padding: 18px; }
.fstep .n { display: inline-grid; place-items: center; width: 27px; height: 27px;
            border-radius: 8px; background: var(--brand); color: #fff;
            font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.fstep b { display: block; font-size: 15.5px; }
.fstep span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.fstep .needs { margin-top: 9px; }

/* ── 회원권 ───────────────────────────────────────────────── */
.plans { display: grid; gap: 16px; margin-top: 26px;
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.plan { background: var(--card); border: 1px solid var(--rule); border-radius: 18px;
        padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.plan.pick { border-color: var(--brand); border-width: 2px; }
.plan .tag { align-self: flex-start; font-size: 11.5px; font-weight: 800;
             padding: 3px 10px; border-radius: 999px; background: var(--brand); color: #fff; }
.plan .nm { font-size: 17px; font-weight: 800; }
.plan .pr { font-size: 27px; font-weight: 800; letter-spacing: -.035em; margin-top: 4px; }
.plan .per { font-size: 13px; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.plan li { font-size: 14px; padding-left: 17px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: 10px;
                   width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.plan .btn { margin-top: 16px; width: 100%; }

/* ── 마이페이지 ───────────────────────────────────────────── */
.mine-grid { display: grid; gap: 16px; margin-top: 24px;
             grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mcard { background: var(--card); border: 1px solid var(--rule);
         border-radius: 18px; padding: 22px; }
.mcard .k { font-size: 13px; color: var(--muted); }
.mcard .v { font-size: 30px; font-weight: 800; letter-spacing: -.035em;
            display: block; margin-top: 2px; }
.mcard .sub { font-size: 13.5px; color: var(--muted); }
.mcard .bar { height: 7px; border-radius: 999px; background: var(--sand);
              margin-top: 13px; overflow: hidden; }
.mcard .bar i { display: block; height: 100%; background: var(--brand); }

.blist { display: grid; gap: 10px; margin-top: 18px; }
.brow { display: grid; grid-template-columns: auto 1fr auto; gap: 13px;
        align-items: center; background: var(--card); border: 1px solid var(--rule);
        border-radius: 14px; padding: 15px 17px; }
.brow .d { text-align: center; min-width: 46px; }
.brow .d b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.brow .d span { display: block; font-size: 11.5px; color: var(--muted); }
.brow .nm { font-size: 15.5px; font-weight: 700; }
.brow .sub { display: block; font-size: 13px; color: var(--muted); }

/* ── 표 · 목록 ────────────────────────────────────────────── */
.tw { overflow-x: auto; margin-top: 22px; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
caption { text-align: left; font-size: 13.5px; color: var(--muted); padding-bottom: 9px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--rule);
         vertical-align: top; }
thead th { background: var(--sand); font-size: 13.5px; white-space: nowrap; }
tbody th { font-weight: 700; }
td.r, th.r { text-align: right; white-space: nowrap; }

.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ticks li { display: flex; gap: 11px; background: var(--card);
            border: 1px solid var(--rule); border-radius: 14px; padding: 15px 17px; }
.ticks li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 9px;
                    border-radius: 50%; background: var(--accent); }
.ticks span { font-size: 15px; }

.qa { display: grid; gap: 12px; margin-top: 22px; }
.qa div { background: var(--card); border: 1px solid var(--rule);
          border-radius: 14px; padding: 17px 19px; }
.qa .q { font-size: 16px; font-weight: 800; }
.qa .a { font-size: 15px; color: var(--muted); margin-top: 5px; }
.qa .a b { color: var(--ink); }

/* ── 오시는 길 ────────────────────────────────────────────── */
.mapbox { background: var(--sand); border: 1px solid var(--rule);
          border-radius: 18px; padding: 22px; }
.route { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.route li { display: flex; gap: 12px; align-items: flex-start; }
.route .n { flex: none; width: 24px; height: 24px; border-radius: 7px;
            background: var(--brand); color: #fff; display: grid; place-items: center;
            font-size: 12px; font-weight: 800; }
.route span { font-size: 15px; }

/* ── 다음 페이지 · 바닥 ───────────────────────────────────── */
.next-links { display: grid; gap: 12px; margin-top: 22px;
              grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.next-links a { background: var(--card); border: 1px solid var(--rule);
                border-radius: 15px; padding: 17px 19px; text-decoration: none; }
.next-links b { display: block; font-size: 16px; }
.next-links span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; }

.bot { border-top: 1px solid var(--rule); padding-block: 34px 90px;
       font-size: 14px; color: var(--muted); }
.bot .cols { display: grid; gap: 22px;
             grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bot b { color: var(--ink); }
.bot dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 12px 0 0; }
.bot dt { color: var(--muted); }
.bot dd { margin: 0; color: var(--ink); }
.bot .made a { color: var(--accent); font-weight: 700; }

.callbar { position: fixed; inset: auto 0 0 0; z-index: 40; display: none; gap: 9px;
           padding: 10px var(--edge) calc(10px + env(safe-area-inset-bottom));
           background: color-mix(in srgb, var(--paper) 94%, transparent);
           backdrop-filter: blur(10px); border-top: 1px solid var(--rule); }
.callbar .btn { flex: 1; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .callbar { display: flex; }
  .me em { display: none; }
  .menu a { padding: 6px 9px; font-size: 13.5px; }
}