/* 활용 사례 페이지 공용 — 새 사례는 이 폴더에 html 한 장 + index.html 목록에 카드 한 장 */
:root { --ink:#1B1A17; --ink-2:#57524A; --ink-3:#9A948A; --line:#E8E3DA; --soft:#F7F4EF; --accent:#FF6A2B; --hl:#FFE3A3; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
html, body { background:#E7E3DC; }
body { font-family:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; color:var(--ink); word-break:keep-all; overflow-wrap:break-word; -webkit-font-smoothing:antialiased; line-height:1.6; }
.page { max-width:860px; margin:0 auto; background:#fff; overflow:hidden; overflow:clip; }
a { color:inherit; }

/* 메뉴바 — 첫 화면(index.html)과 같은 모양 */
.nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:20px; height:60px; padding:0 24px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.nav .brand { display:flex; align-items:center; gap:8px; flex:none; font-size:16px; font-weight:800; text-decoration:none; letter-spacing:-.01em; }
.av { width:28px; height:28px; border-radius:50%; background:#fff url(../art/ari_avatar.png) center/cover no-repeat; flex:none; }
.nav .menu { display:flex; gap:4px; list-style:none; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
.nav .menu::-webkit-scrollbar { display:none; }
.nav .menu a { display:block; padding:8px 12px; border-radius:999px; font-size:15px; font-weight:600; color:var(--ink-2); text-decoration:none; white-space:nowrap; }
.nav .menu a:hover, .nav .menu a.on { color:var(--ink); background:var(--soft); }
.nav .cta { flex:none; padding:9px 16px; border-radius:999px; background:var(--accent); color:#fff; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; }
@media (max-width:640px) {
  .nav { flex-wrap:wrap; height:auto; gap:0 12px; padding:10px 16px 0; }
  .nav .brand { flex:1; }
  .nav .menu { order:3; flex-basis:100%; margin:6px -16px 0; padding:0 12px 8px; }
  .nav .menu a { padding:6px 10px; font-size:14px; }
}

/* 본문 */
section { padding:64px 40px; text-align:center; }
section.soft { background:var(--soft); }
.kicker { font-size:15px; font-weight:700; color:var(--accent); letter-spacing:.02em; }
h1 { margin-top:10px; font-size:40px; line-height:1.3; font-weight:800; letter-spacing:-.045em; }
h2 { font-size:30px; line-height:1.3; font-weight:800; letter-spacing:-.04em; }
.hl { background:linear-gradient(transparent 58%, var(--hl) 58%); }
.lead { margin:16px auto 0; max-width:560px; font-size:18px; color:var(--ink-2); letter-spacing:-.02em; }

/* 폰 대화 */
.chat { max-width:400px; margin:32px auto 0; background:#fff; border:1px solid var(--line); border-radius:28px; padding:18px 16px 20px; text-align:left; box-shadow:0 18px 40px -26px rgba(27,26,23,.45); }
.chat .top { display:flex; align-items:center; gap:8px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:14px; font-weight:700; }
.chat .top small { display:block; font-size:12px; font-weight:500; color:var(--ink-3); }
.msg { max-width:82%; margin-top:10px; padding:10px 14px; border-radius:18px; font-size:15px; line-height:1.5; }
.me { margin-left:auto; background:var(--ink); color:#fff; border-bottom-right-radius:6px; }
.ari { background:var(--soft); border-bottom-left-radius:6px; }
.ari b { color:var(--accent); }

/* 세 단계 */
.steps { max-width:640px; margin:28px auto 0; display:grid; gap:12px; text-align:left; }
.step { display:flex; gap:16px; align-items:flex-start; background:#fff; border-radius:18px; padding:18px 20px; }
.step .n { flex:none; width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; }
.step h3 { font-size:17px; }
.step p { font-size:15px; color:var(--ink-2); }

/* 받는 것 */
.gets { max-width:640px; margin:28px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:left; }
.gets div { background:var(--soft); border-radius:16px; padding:16px 18px; }
.gets b { display:block; font-size:16px; }
.gets span { font-size:14px; color:var(--ink-2); }
@media (max-width:640px) { section { padding:52px 20px; } h1 { font-size:32px; } h2 { font-size:25px; } .gets { grid-template-columns:1fr; } }

/* 끝 */
.final { background:var(--ink); color:#fff; }
.final h2 { color:#fff; }
.final .lead { color:#CFC7B8; }
.btns { margin-top:24px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-block; padding:14px 24px; border-radius:999px; font-weight:700; text-decoration:none; }
.btn.main { background:var(--accent); color:#fff; }
.btn.sub { background:rgba(255,255,255,.12); color:#fff; }
footer { padding:28px; text-align:center; font-size:13px; color:var(--ink-3); }

/* 목록(use/index.html) */
.cards { max-width:640px; margin:28px auto 0; display:grid; gap:12px; text-align:left; }
.card { display:block; background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 22px; text-decoration:none; }
.card:hover { border-color:var(--accent); }
.card .say { font-size:14px; font-weight:700; color:var(--accent); }
.card h3 { margin-top:4px; font-size:19px; }
.card p { font-size:15px; color:var(--ink-2); }
.card.soon { opacity:.55; pointer-events:none; border-style:dashed; }