/* 공개 기능 화면 (plan/feat/F63 · 2026-09-25 다시 씀) · PC 6칸 격자: Order 한 줄 · Pay/Kiosk 둘 · Wait 한 줄 · Kitchen/Print 둘 · AI 한 줄 · 칸 안은 위에서 아래로 흐름(빈 줄 맞춤 안 함) */
.ftpage{padding:20px 0 40px}
.ft-hero{background:radial-gradient(circle at 15% 0,#1e293b,#0f172a 70%);color:#e2e8f0;border-radius:18px;padding:24px 28px 22px;margin:0 0 10px}
.ft-hero h1{color:#fff;margin:0 0 6px;font-size:clamp(26px,3.6vw,36px)}
.ftpage .ft-hero .lead{color:#e2e8f0;font-size:17px;margin:0 0 6px}
.ft-note{margin:0 0 14px;color:#cbd5e1;font-size:15px;line-height:1.6;max-width:760px}
.ft-cta{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.ft-hero .ft-cta .btn:not(.pri){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
.ft-hero .ft-cta .btn:not(.pri):hover{background:rgba(255,255,255,.16)}

.ftpage .ft-nav{display:flex;gap:6px;position:sticky;top:var(--fthead,64px);z-index:9;padding:6px 0;margin:0 0 4px;background:var(--bg,#f8fafc)}
.ftpage .ft-nav a{flex:1 1 auto;display:flex;align-items:center;gap:8px;min-height:48px;padding:4px 12px 4px 6px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;min-width:0;transition:border-color .15s,box-shadow .15s,background .15s}
.ftpage .ft-nav a:hover{border-color:var(--c);text-decoration:none}
.ft-nico{width:32px;height:32px;border-radius:9px;background:var(--cb);color:var(--c);display:inline-grid;place-items:center;flex:0 0 auto}
.ft-nico svg{width:18px;height:18px}
.ft-ntx{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ft-ntx small{font-size:12px;font-weight:700;color:#475569;letter-spacing:.02em}
.ft-ntx b{font-size:14px;font-weight:800;white-space:nowrap}
.ftpage .ft-nav a[aria-current="true"]{border-color:var(--c);background:var(--cb);box-shadow:0 0 0 1px var(--c) inset}
.ftpage .ft-nav a[aria-current="true"] .ft-nico{background:var(--c);color:#fff}

.ft-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:stretch}
.ft-card{grid-column:span 2;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 16px 14px;scroll-margin-top:calc(var(--fthead,64px) + 70px);--c:#6366f1;--cb:#eef2ff}
.ft-card::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.ft-card:target{border-color:var(--c);box-shadow:0 0 0 3px var(--cb)}
.ft-head{display:flex;align-items:center;gap:10px;margin:0}
.ft-ico{width:40px;height:40px;border-radius:11px;background:var(--cb);color:var(--c);display:grid;place-items:center;flex:0 0 auto}
.ft-ico svg{width:22px;height:22px}
.ft-head h2{margin:0;font-size:19px;line-height:1.3}
.ft-head h2 small{display:block;font-size:13px;color:#475569;font-weight:700}
.ft-sum{margin:0;padding:8px 10px;border-radius:10px;background:var(--cb);color:#0f172a;font-weight:700;font-size:15px;line-height:1.55}
.ft-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ft-list li{position:relative;padding-left:16px;color:#334155;line-height:1.6;font-size:15px}
.ft-list li::before{content:'';position:absolute;left:3px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--c)}
.ft-more{margin:auto 0 0;padding:7px 10px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;border-left:4px solid var(--c);color:#475569;font-size:14px;line-height:1.55}
.ft-more-none{display:none}

.ft-c-order{grid-column:1 / -1;--c:#2563eb;--cb:#dbeafe}
.ft-c-order .ft-sum{align-self:flex-start}
.ft-c-order .ft-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.ft-c-pay{grid-column:span 3;--c:#059669;--cb:#d1fae5}
.ft-c-kiosk{grid-column:span 3;--c:#7c3aed;--cb:#ede9fe}
.ft-c-wait{grid-column:1 / -1;--c:#d97706;--cb:#fef3c7}
.ft-c-wait .ft-sum{align-self:flex-start}
.ft-c-wait .ft-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.ft-c-kitchen{grid-column:span 3;--c:#dc2626;--cb:#fee2e2}
.ft-c-print{grid-column:span 3;--c:#0f766e;--cb:#ccfbf1}
.ft-c-ai{grid-column:1 / -1;display:grid;grid-template-columns:minmax(200px,auto) minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:16px;--c:#db2777;--cb:#fce7f3}
.ft-c-ai .ft-sum{align-self:stretch;display:flex;align-items:center}

.ft-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:10px 0}
.ft-split h2{margin:0 0 6px;font-size:21px}
.ft-split p{margin:0;color:#334155;line-height:1.7}
.ft-art{width:100%;max-width:420px;height:auto;display:block;justify-self:center}
.ft-start{background:linear-gradient(135deg,#eef2ff,#e0f2fe);border:1px solid #c7d2fe;border-radius:16px;padding:16px 20px;margin:0}
.ft-start h2{margin:0 0 10px;font-size:21px}
.ft-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;counter-reset:fs}
.ft-steps li{background:#fff;border-radius:12px;padding:10px 12px 10px 46px;display:flex;flex-direction:column;justify-content:center;gap:2px;position:relative;min-height:60px}
.ft-steps li::before{counter-increment:fs;content:counter(fs);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center}
.ft-steps b{font-size:15px}
.ft-steps span{font-size:13px;color:#475569;line-height:1.5}

.ftpage .ft-nav a{--c:#6366f1;--cb:#eef2ff}
.ftpage .ft-nav a.ft-c-order{--c:#2563eb;--cb:#dbeafe}.ftpage .ft-nav a.ft-c-pay{--c:#059669;--cb:#d1fae5}.ftpage .ft-nav a.ft-c-kiosk{--c:#7c3aed;--cb:#ede9fe}.ftpage .ft-nav a.ft-c-wait{--c:#d97706;--cb:#fef3c7}.ftpage .ft-nav a.ft-c-kitchen{--c:#dc2626;--cb:#fee2e2}.ftpage .ft-nav a.ft-c-print{--c:#0f766e;--cb:#ccfbf1}.ftpage .ft-nav a.ft-c-ai{--c:#db2777;--cb:#fce7f3}

@media (max-width:1100px){.ftpage .ft-nav a{padding-right:8px}.ft-nico{width:28px;height:28px}.ft-ntx b{font-size:13px}}
@media (max-width:900px){
  .ftpage .ft-nav{overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .ftpage .ft-nav::-webkit-scrollbar{display:none}
  .ftpage .ft-nav a{flex:0 0 auto}
  .ft-card{grid-column:span 3}
  .ft-c-order,.ft-c-wait,.ft-c-ai{grid-column:1 / -1}
  .ft-c-ai{grid-template-columns:1fr;row-gap:8px}
  .ft-c-ai .ft-sum{display:block}
  .ft-split{grid-template-columns:1fr;gap:12px}
  .ft-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .ftpage{padding:12px 0 28px}
  .ft-hero{padding:18px 16px;border-radius:14px}
  .ftpage .ft-hero .lead{font-size:16px}
  .ft-note{font-size:14px;margin-bottom:12px}
  .ft-hero .ft-cta .btn.big{flex:1 1 40%;min-height:46px;padding:0 10px;font-size:15px}
  .ft-hero .ft-cta .btn.pri{flex-basis:100%}
  .ft-grid{grid-template-columns:1fr;gap:8px}
  .ft-card,.ft-c-kitchen,.ft-c-order,.ft-c-wait,.ft-c-ai{grid-column:1 / -1}
  .ft-card{padding:14px 14px 12px;gap:8px;border-radius:14px}
  .ft-c-order .ft-list,.ft-c-wait .ft-list,.ft-c-kitchen .ft-list{grid-template-columns:1fr}
  .ft-head h2{font-size:18px}
  .ft-sum{font-size:14px}
  .ft-list li{font-size:14.5px}
  .ft-split,.ft-start{padding:14px;border-radius:14px}
  .ft-split h2,.ft-start h2{font-size:19px}
  .ft-steps{grid-template-columns:1fr;gap:6px}
  .ft-steps li{min-height:52px;padding:8px 12px 8px 44px}
  .ft-start .ft-cta .btn{flex:1 1 auto}
}