/* 임시 프론트엔드 + 독립 검토 도구. B 기획안 본문의 기존 스타일은 유지한다. */
[hidden] { display: none !important; }
body[data-view="frontend"] { color: #1c2b33; background: #ffffff; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif; }
.frontend-main { display: block; padding: 0; }
.frontend-main a { color: inherit; text-decoration: none; }
.frontend-nav { min-height: 88px; padding: 20px max(32px,calc((100% - 1200px)/2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4e6eb; background: #ffffff; }
.frontend-brand { font-size: 20px; font-weight: 800; white-space: nowrap; }
.frontend-nav > div { display:flex; align-items:center; gap:24px; font-size:13px; }
.frontend-section { min-height: auto; padding: 88px 32px; border: 0; border-bottom: 1px solid #e4e6eb; background: #ffffff; scroll-margin-top: 20px; }
.frontend-section:nth-of-type(even) { background: #f7f8fa; }
.frontend-inner { max-width: 1200px; margin: 0 auto; }
.frontend-section .frontend-title { display:block; margin:0 0 40px; padding:0; border:0; background:transparent; color:#1c2b33; font-size:36px; font-weight:700; line-height:1.4; letter-spacing:-.035em; word-break:keep-all; }
.frontend-section-1 .frontend-inner { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:40px; min-height:480px; }
.frontend-section-1 .frontend-title { font-size:48px; margin-top:20px; }
.temp-eyebrow { color:#65676b; font-size:13px; font-weight:600; }
.temp-actions { display:flex; flex-wrap:wrap; gap:12px; }
.frontend-main .temp-button { display:inline-flex; gap:24px; align-items:center; justify-content:center; padding:12px 20px; background:#1c2b33; border:1px solid #1c2b33; color:#ffffff; border-radius:8px; font-family:inherit;font-size:14px;font-weight:600;line-height:1.5; cursor:pointer; }
.temp-button:disabled { background:#e4e6eb; border-color:#e4e6eb; color:#65676b; cursor:default; }
.temp-actions .temp-button + .temp-button { background:#ffffff; color:#1c2b33; border-color:#ced0d4; }
.temp-hero-media { display:flex; gap:12px; justify-content:center; padding:24px; border-radius:16px; background:#f0f2f5; overflow:hidden; }
.temp-phone { aspect-ratio:9/16; width:31%; border:1px solid #ced0d4; border-radius:16px; background:repeating-linear-gradient(135deg,#ffffff 0,#ffffff 24px,#f7f8fa 24px,#f7f8fa 25px); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; }
.temp-phone:nth-child(2) { transform:translateY(24px); }
.temp-phone span { font-size:24px; color:#8a8d91; }
.temp-phone small { font-size:11px; text-align:center; padding:4px; color:#65676b; }
.temp-grid { display:grid; gap:16px; }
.temp-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.temp-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.temp-card { padding:24px; border:1px solid #e4e6eb; border-radius:12px; background:#ffffff; }
.temp-number { color:#8a8d91; font-size:12px; font-variant-numeric:tabular-nums; }
.temp-card h3 { font-size:20px; margin:24px 0; }
.temp-card p { font-size:20px; font-weight:600; line-height:1.6; word-break:keep-all; margin:16px 0 0; }
.temp-placeholder { min-height:120px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; border:1px dashed #ced0d4; border-radius:8px; color:#8a8d91; background:repeating-linear-gradient(135deg,#f7f8fa 0,#f7f8fa 24px,#f0f2f5 24px,#f0f2f5 25px); font-size:14px; }
.temp-placeholder small { font-size:12px; }
.temp-chat { padding:24px; background:#f0f2f5; border:1px solid #e4e6eb; border-radius:12px; font-size:13px; }
.temp-chat-avatar { width:32px; height:32px; border-radius:12px; background:#ced0d4; margin-bottom:12px; }
.temp-chat-bubble { margin-top:24px; padding:12px; border-radius:0 12px 12px; background:white; }
.temp-ticket { display:grid; grid-template-columns:1fr auto; gap:32px; padding:40px; border:1px solid #ced0d4; border-radius:16px; background:#f0f2f5; }
.temp-ticket .frontend-title { margin:16px 0 24px; }
.temp-sub { font-size:17px; line-height:1.7; color:#65676b; }
.temp-ticket-end { display:flex; align-items:center; padding-left:32px; border-left:1px dashed #bcc0c4; }
.temp-stack { display:grid; gap:24px; }
.temp-benefit { position:sticky; top:calc(24px + var(--card-index)*20px); display:grid; grid-template-columns:32px 1fr 240px; align-items:center; gap:24px; padding:32px; border:1px solid #ced0d4; border-radius:16px; background:#f7f8fa; box-shadow:0 4px 16px #1c2b330a; }
.temp-benefit h3 { font-size:24px; line-height:1.6; font-weight:600; word-break:keep-all; }
.temp-steps { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; padding:0; margin:0; gap:32px; }
.temp-steps li { border-top:1px solid #ced0d4; padding-top:24px; }
.temp-step-number { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#e4e6eb; font-size:13px; }
.temp-steps h3 { font-size:20px; margin-top:24px; }.temp-steps p { font-size:14px;color:#8a8d91; }
.temp-package { display:flex; flex-direction:column; gap:24px; }
.temp-package h3 { margin:0; }.temp-package .temp-price { margin:0; font-size:28px; }
.temp-package-detail { color:#8a8d91; font-size:14px; line-height:2; border-top:1px solid #e4e6eb; padding-top:24px; }
.temp-faq { border-top:1px solid #ced0d4; }
.temp-faq details { border-bottom:1px solid #ced0d4; padding:24px 0; }
.temp-faq summary { list-style:none; display:flex; justify-content:space-between; cursor:pointer; font-size:17px; font-weight:600; }
.temp-faq summary::-webkit-details-marker { display:none; }.temp-faq p { color:#65676b;font-size:14px;line-height:1.8; }.temp-faq details[open] .temp-plus { transform:rotate(45deg); }
.temp-cta { text-align:center; padding:24px 0; }.temp-cta .frontend-title { font-size:40px; }
.frontend-footer { padding:32px 32px 180px; color:#65676b;font-size:13px; border-top:1px solid #e4e6eb; }
.review-section { position:relative; scroll-margin-top:24px; }
.planning-original-label { visibility:hidden; }
.review-label { position:absolute; top:16px; left:24px; z-index:5; font-family:"Malgun Gothic",sans-serif; }
.review-label summary { display:block; width:fit-content; max-width:calc(100vw - 96px); padding:6px 10px; border:1px solid #ceccc2; border-left:3px solid #7c7767; border-radius:4px; color:#35362e; background:#fffef9; font-size:11px; line-height:1.6; cursor:pointer; }
.review-label-notes { width:272px; max-width:calc(100vw - 80px); margin-top:4px; padding:18px 20px; background:#fffef9; border:1px solid #ceccc2; color:#35362e; box-shadow:0 8px 24px #1c2b331a; font-size:12px;line-height:1.7; }
.review-label-notes p { margin:12px 0 0;overflow-wrap:anywhere; }
.labels-hidden .review-label { visibility:hidden; }
.review-tools { position:fixed; bottom:16px; left:16px; z-index:20; max-width:calc(100vw - 32px); padding:8px; border:1px solid #ced0d4; border-radius:12px; background:#ffffffed; box-shadow:0 4px 24px #1c2b331a; backdrop-filter:blur(12px); }
.review-tools-row { display:flex; gap:4px; align-items:center; }.review-tools-row + .review-tools-row { margin-top:4px; }
.review-tools :is(button,select) { padding:8px 10px; border:0; border-radius:6px; background:#f0f2f5; color:#1c2b33; font:12px/1.5 "Malgun Gothic",sans-serif; cursor:pointer; }
.review-tools select { flex:1; min-width:0; }.review-tools #section-count { padding:0 8px;font-size:11px;color:#65676b; }
.review-tools #plan-open { background:#0064e0;color:white; }
#page-map { width:min(1100px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid #ced0d4;border-radius:16px;background:#f0f2f5;color:#1c2b33; }
#page-map::backdrop { background:#1c2b3370;backdrop-filter:blur(4px); }.map-header { display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px; }
.map-header h2 { border:0;background:none;padding:0;font-size:20px; }.map-header button { padding:8px 16px;border:0;border-radius:8px;cursor:pointer; }
#map-pages { display:grid;grid-template-columns:1fr 1fr;gap:24px; }.map-page { padding:20px;border:1px solid #e4e6eb;border-radius:12px;background:white; }
.map-page-title { display:block;margin-bottom:16px;color:#1c2b33;text-decoration:none;font-size:17px;font-weight:700; }.map-page-title[aria-current] { color:#0064e0; }
.map-section { display:flex;flex-direction:column;gap:6px;padding:12px;margin-left:8px;border-left:1px solid #e4e6eb;color:#1c2b33;text-decoration:none; }.map-section:hover { background:#f7f8fa; }.map-section strong {font-size:13px;}.map-section span {font-size:11px;color:#65676b;line-height:1.6;}
:where(.review-tools,.frontend-main,#page-map) :is(a,button,select,summary):focus-visible { outline:2px solid #0064e0;outline-offset:3px; }
@media(max-width:900px) {
  .frontend-section-1 .frontend-inner { grid-template-columns:1fr; }.temp-hero-media { max-width:560px; }.temp-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .temp-benefit { grid-template-columns:24px 1fr; }.temp-benefit-art { grid-column:2; }.temp-ticket { grid-template-columns:1fr; }.temp-ticket-end { border-left:0;border-top:1px dashed #bcc0c4;padding:24px 0 0; }
}
@media(max-width:600px) {
  .frontend-nav { min-height:72px;padding:16px; }.frontend-nav > div { gap:12px; }.frontend-nav > div > .temp-button { display:none; }
  .frontend-section { padding:72px 20px 48px; }.frontend-section .frontend-title,.frontend-section-1 .frontend-title,.temp-cta .frontend-title { font-size:28px; }.frontend-section-1 .frontend-inner { min-height:auto;gap:32px; }
  .temp-three,.temp-steps { grid-template-columns:1fr; }.temp-card,.temp-chat,.temp-ticket { padding:20px; }.temp-metrics {gap:8px;}.temp-metrics .temp-card {padding:16px;}.temp-metrics p {font-size:16px;}
  .temp-benefit { position:relative;top:auto;padding:20px;gap:12px; }.temp-benefit h3 {font-size:20px;}.temp-benefit-art {grid-column:1/-1;}.temp-hero-media {padding:12px;gap:8px;}.temp-phone {border-radius:12px;}
  .review-label {left:16px;top:12px;}.review-label summary {font-size:10px;}.review-label-notes {width:220px;}.review-tools {left:12px;bottom:12px;max-width:calc(100vw - 24px);}
  #map-pages {grid-template-columns:1fr;}#page-map {padding:16px;}.map-page {padding:16px;}
}
@media(prefers-reduced-motion:reduce) { .temp-benefit {position:relative;top:auto;} }

/* 기존 섹션 위치와 앵커 여백은 검토 라벨 없이 유지한다. */
.frontend-section{position:relative;scroll-margin-top:24px;}