/* 사용법 — 텔레그램 채팅 화면 모형 (실제 봇 문구 그대로) */
.g-hero { padding: 28px 0 8px; }
.g-hero h1 { margin: 0; font-size: 28px; letter-spacing: -0.035em; font-weight: 750; }
.g-hero p { margin: 10px 0 0; color: var(--mute); }
.g-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.g-steps span { font-size: 13px; padding: 4px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

/* 모든 화면을 같은 휴대폰 모양·크기로 — 세로 9:19.5, 얇은 베젤, 상태 표시줄. 내용이 길면 화면 안에서 스크롤되고 틀 크기는 그대로.
   단계 제목은 휴대폰 아래에 (위에 두면 텔레그램 머리줄과 겹쳐 제목이 두 번 나오는 느낌) */
.phones { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px 20px; justify-items: center; margin: 24px 0 8px; }
.phone { --pw: 264px; margin: 0; width: var(--pw); max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.phone .tg { order: 0; }
.phone figcaption { order: 1; font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-top: 4px; letter-spacing: -0.01em; }
.phone figcaption b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 12px; }
.phone .cap { order: 2; margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

.tg { --tg-bg: #dfe7ec; --tg-bot: #ffffff; --tg-me: #e1f7c9; --tg-ink: #111b21; --tg-mute: #8696a0; --tg-kb: #f1f4f6; --tg-accent: #3390ec;
  --tg-sb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='11' fill='%23111b21'%3E%3Crect y='7' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='5' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3' width='3' height='8' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='10' rx='.8'/%3E%3Crect x='23.5' y='.5' width='17' height='10' rx='2.8' fill='none' stroke='%23111b21' stroke-opacity='.45'/%3E%3Crect x='25.5' y='2.5' width='11' height='6' rx='1.4'/%3E%3Crect x='41.5' y='3.5' width='1.6' height='4' rx='.8' fill-opacity='.45'/%3E%3C/svg%3E");
  --tg-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='4'%3E%3Crect width='90' height='4' rx='2' fill='%23111b21' fill-opacity='.35'/%3E%3C/svg%3E");
  position: relative; flex: none; width: var(--pw); max-width: 100%; aspect-ratio: 9 / 19.5; margin: 0 auto;
  border-radius: 38px; overflow: hidden; border: 4px solid #1b1f23; padding-bottom: 18px;
  background: var(--tg-home) center bottom 7px / 34% 4px no-repeat, var(--tg-bg);
  display: flex; flex-direction: column; box-shadow: 0 14px 34px -14px rgb(0 0 0 / 0.38); color: var(--tg-ink); }
:root[data-theme="dark"] .tg { --tg-bg: #0e1621; --tg-bot: #182533; --tg-me: #2b5278; --tg-ink: #e9edef; --tg-mute: #7f91a4; --tg-kb: #20303f; border-color: #050607;
  --tg-sb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='11' fill='%23e9edef'%3E%3Crect y='7' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='5' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3' width='3' height='8' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='10' rx='.8'/%3E%3Crect x='23.5' y='.5' width='17' height='10' rx='2.8' fill='none' stroke='%23e9edef' stroke-opacity='.5'/%3E%3Crect x='25.5' y='2.5' width='11' height='6' rx='1.4'/%3E%3Crect x='41.5' y='3.5' width='1.6' height='4' rx='.8' fill-opacity='.5'/%3E%3C/svg%3E");
  --tg-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='4'%3E%3Crect width='90' height='4' rx='2' fill='%23e9edef' fill-opacity='.4'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 14px 34px -14px rgb(0 0 0 / 0.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tg { --tg-bg: #0e1621; --tg-bot: #182533; --tg-me: #2b5278; --tg-ink: #e9edef; --tg-mute: #7f91a4; --tg-kb: #20303f; border-color: #050607;
  --tg-sb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='11' fill='%23e9edef'%3E%3Crect y='7' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='5' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3' width='3' height='8' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='10' rx='.8'/%3E%3Crect x='23.5' y='.5' width='17' height='10' rx='2.8' fill='none' stroke='%23e9edef' stroke-opacity='.5'/%3E%3Crect x='25.5' y='2.5' width='11' height='6' rx='1.4'/%3E%3Crect x='41.5' y='3.5' width='1.6' height='4' rx='.8' fill-opacity='.5'/%3E%3C/svg%3E");
  --tg-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='4'%3E%3Crect width='90' height='4' rx='2' fill='%23e9edef' fill-opacity='.4'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 14px 34px -14px rgb(0 0 0 / 0.6); } }
/* 상태 표시줄(시각 · 신호 · 배터리) + 가운데 카메라 섬 */
.tg::before { content: "9:41"; flex: none; height: 30px; padding: 4px 22px 0 26px; display: flex; align-items: center; font-size: 12.5px; font-weight: 650;
  font-variant-numeric: tabular-nums; background: var(--tg-sb) right 18px top 14px / 40px 10px no-repeat, var(--tg-bot); }
.tg::after { content: ""; position: absolute; top: 7px; left: 35%; width: 30%; height: 18px; border-radius: 99px; background: #050607; }
/* 텔레그램 머리줄 — 얇게 */
.tg-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 12px 7px; background: var(--tg-bot); border-bottom: 1px solid rgb(0 0 0 / 0.06); }
.tg-top i { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #0f766e; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; }
.tg-top b { display: block; font-size: 13px; line-height: 1.25; }
.tg-top span { display: block; font-size: 11px; line-height: 1.25; color: var(--tg-mute); }
/* 대화 — 짧으면 아래에 붙고, 길면 위에서부터 보이며 화면 안에서 스크롤 (틀 크기는 그대로) */
.tg-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--tg-mute) 55%, transparent) transparent;
  padding: 10px 9px 8px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.48; }
.tg-body > :first-child { margin-top: auto; }
.tg .bot, .tg .me { flex: none; max-width: 88%; border-radius: 14px; padding: 7px 10px 5px; position: relative; box-shadow: 0 1px 1px rgb(0 0 0 / 0.08); }
.tg .bot { align-self: flex-start; background: var(--tg-bot); border-bottom-left-radius: 4px; }
.tg .me { align-self: flex-end; background: var(--tg-me); border-bottom-right-radius: 4px; color: var(--tg-accent); font-weight: 600; }
.tg .bot p { margin: 0; }
.tg .bot p + p { margin-top: 6px; }
.tg time { display: block; text-align: right; font-size: 10.5px; color: var(--tg-mute); margin-top: 1px; }
.tg .kb { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.tg .bot:has(.kb) { align-self: stretch; max-width: none; }   /* 버튼 줄은 말풍선 너비만큼 (텔레그램처럼) — 좁은 화면에서 글자가 꺾이지 않게 */
.tg .kb span { flex: 1 1 30%; text-align: center; white-space: nowrap; letter-spacing: -0.02em; font-size: 12px; padding: 6px 2px; border-radius: 8px; background: var(--tg-kb); color: var(--tg-accent); font-weight: 600; }
.tg .kb span.on { background: color-mix(in srgb, var(--tg-accent) 16%, var(--tg-kb)); }
.tg .brief .b-item { line-height: 1.6; }
.tg blockquote { margin: 6px 0 0; padding: 4px 8px; border-left: 3px solid var(--tg-accent); background: color-mix(in srgb, var(--tg-accent) 8%, transparent); border-radius: 4px; font-size: 12px; color: var(--tg-mute); }
.tg .disc { font-size: 11.5px; color: var(--tg-mute); font-style: italic; }
.tg .cmds { flex: none; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tg .cmds span { font-size: 11.5px; padding: 4px 8px; border-radius: 99px; background: var(--tg-bot); color: var(--tg-accent); }

.g-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 26px 0 8px; padding: 18px 20px; border-radius: var(--r-xl); background: var(--accent-soft); }
.g-cta .btn.primary { height: 42px; padding: 0 20px; font-size: 15px; }
@media (max-width: 520px) { .phones { grid-template-columns: 1fr; } .g-hero h1 { font-size: 24px; } }