/* 컨셉집 소개 페이지 (index.html) 전용. 설정집 테마(style.css)와 따로 둔다.
   구성: 섹션 하나 = 메시지 하나, 배경 면으로 구역을 나눈다. */
:root{
  --white:#ffffff; --mist:#f3f4fa; --lilac:#f3edff; --blush:#fff1f6; --ink:#15172b; --body:#3f4357; --muted:#5b6074;
  /* 브랜드색(로고): 핑크·보라. 강해서 아껴 쓴다. 보라 = 버튼·강조 글자·포커스, 핑크 = 로고와 어두운 구역의 작은 표시만. 넓은 면은 연한 틴트(lilac·blush)로. */
  --accent:#7b2cff; --accent-dark:#6420e0; --pink:#ff8fb8; --line:#e2e4ee;
  --night:#16131b; --brand-pink:#ff3d8b; --night-text:#d8d2d8;
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --radius-lg:28px; --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--body);font:17px/1.65 var(--font);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
h1,h2,h3{margin:0;color:var(--ink);font-weight:800;letter-spacing:-.03em}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* 상단: 스크롤해도 따라오는 얇은 바 */
.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.04em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo-mark{width:30px;height:30px;flex:none}
.logo-hl{color:var(--brand-pink)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{background:var(--mist);color:var(--ink)}
.btn-ghost:hover{background:var(--line)}
.btn-sm{min-height:40px;padding:0 18px;font-size:15px}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--lilac)}

/* 공통 섹션 */
.sec{padding-block:120px}
.sec.mist{background:var(--mist)}
.sec.lilac{background:var(--lilac)}
.sec.dark{background:var(--ink);color:#c9cbe0}
.sec.dark h2{color:#fff}
.sec.night{background:var(--night);color:var(--night-text)}
.sec.night h2,.sec.night h3{color:#fff}
.tag{display:inline-block;font-size:14px;font-weight:700;color:var(--accent);margin-bottom:14px}
.dark .tag,.night .tag{color:var(--pink)}
.title{font-size:clamp(30px,4.2vw,46px);line-height:1.3}
.desc{margin-top:16px;font-size:18px;max-width:28em}
.center{text-align:center}
.center .desc{margin-inline:auto}

/* 첫 화면 */
.hero{padding-block:72px 96px;text-align:center}
.hero h1{font-size:clamp(38px,6.4vw,72px);line-height:1.18}
.hero .desc{margin:22px auto 34px;font-size:19px}
.hero .actions{justify-content:center}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.show{display:flex;justify-content:center;align-items:flex-end;gap:28px;margin-top:64px}

/* 기기 틀 (안에 실제 페이지가 돈다) */
.frame{position:relative;overflow:hidden;background:var(--ink);flex:none}
.frame iframe{border:0;position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.phone{width:240px;height:490px;border-radius:36px;border:8px solid var(--ink);box-shadow:0 30px 60px -30px rgba(21,23,43,.5)}
.phone iframe{width:390px;height:826px;transform:scale(.57436)}   /* 틀 안쪽 224×474 에 꽉 차게: 390px 화면을 224/390 로 줄이고, 높이는 474÷그 비율 */
.screen-col{flex:0 1 620px;min-width:0}
.row-visual .screen{width:100%}
.screen{width:100%;aspect-ratio:16/9;border-radius:14px;border:8px solid var(--ink);border-bottom-width:16px;box-shadow:0 30px 60px -30px rgba(21,23,43,.5);flex:1 1 auto}
.screen iframe{width:1280px;height:720px}
.frame-label{margin-top:12px;font-size:14px;color:var(--muted);text-align:center}

/* 지그재그 한 줄: 글 + 그림 */
.row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.row.flip .row-text{order:2}
.row-visual{display:flex;justify-content:center}
.row .actions{margin-top:28px}

/* 어디서든 고치기: 편집 화면 그림 (HTML로 그린 목업) */
.editor{width:270px;border-radius:36px;border:8px solid #2a2d48;background:#fff;padding:22px 18px 18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);color:var(--ink);text-align:left}
.editor-bar{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);margin-bottom:16px}
.editor-save{background:var(--accent);color:#fff;border-radius:999px;padding:4px 12px;font-weight:700}
.editor-field{font-size:12px;color:var(--muted);margin-top:12px}
.editor-input{margin-top:4px;border:2px solid var(--line);border-radius:10px;padding:9px 11px;font-size:15px;font-weight:600}
.editor-input.on{border-color:var(--accent);box-shadow:0 0 0 4px rgba(123,44,255,.15)}
.caret{display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.point{background:rgba(255,255,255,.06);border-radius:var(--radius);padding:22px}
.point b{display:block;color:#fff;font-size:17px;margin-bottom:4px}
.point span{font-size:15px}

/* 칸 고르기 */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:760px;margin:44px auto 0;padding:0;list-style:none}
.chips li{background:#fff;border-radius:999px;padding:11px 20px;font-weight:600;color:var(--ink);font-size:16px;box-shadow:0 1px 0 var(--line)}
.chips li.soon{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line)}
.chips li.soon::after{content:" · 준비 중";font-weight:500;font-size:14px}

/* 예시 */
.example-head{display:flex;align-items:center;gap:20px}
.example-head img{width:84px;height:84px}

/* 이용 방법 */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.plan{background:#fff;border-radius:var(--radius-lg);padding:32px 28px;border:1px solid var(--line)}
.plan h3{font-size:22px}
.plan p{margin-top:10px}
.plan.pick{background:var(--ink);border-color:var(--ink);color:#c9cbe0}
.plan.pick h3{color:#fff}
.plan-note{margin-top:24px;font-size:15px;color:var(--muted);text-align:center}

/* 자주 묻는 질문 */
.faq{max-width:760px;margin:44px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;font-weight:700;font-size:18px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding:0 4px 22px}

/* 마무리 */
.final{background:linear-gradient(135deg,var(--blush),var(--lilac));color:var(--body);text-align:center;border-radius:var(--radius-lg);padding:72px 24px}
.final h2{color:var(--ink)}
.final .desc{margin:14px auto 30px}
.foot{padding:40px 0 56px;font-size:14px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:900px){
  .sec{padding-block:88px}
  .row{grid-template-columns:1fr;gap:44px}
  .row.flip .row-text{order:0}
  .row-text{text-align:center}
  .row-text .desc{margin-inline:auto}
  .row .actions{justify-content:center}
  .plans,.points{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .hero{padding-block:48px 72px}
  .show{flex-direction:column;align-items:center;gap:36px;margin-top:48px}
  .show .screen-col{width:100%;flex:none}
  .sec{padding-block:72px}
  .final{padding:56px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .caret{animation:none}
  .btn,.faq summary svg{transition:none}
}