/*
 * 친구야 놀자 부모용 신청서 (/friends/). 공통 토큰·버튼은 /common/riso.css.
 * 형태 규격: 글자 13(배지·짧은 라벨)·16·21·28·37 / 여백 4·8·12·20·32·52 / 라운드 버튼·입력 6, 카드 14, 큰 박스 20, 배지 999
 */
:root{
  /* 그림 전용 리소 잉크(표지 그림·대화 아바타). 글자색으로 쓰지 않는다. */
  --riso-pink:#FF8FC4;
  --riso-orange:#FF9B5E;
}
.wrap{max-width:560px;margin:0 auto;padding:32px 20px 52px}
.brand{display:inline-block;font-size:13px;font-weight:800;line-height:24px;color:var(--ink);background:var(--yellow);border:1px solid var(--ink);border-radius:999px;padding:0 12px;margin-bottom:12px}
.lead{margin:0;font-size:16px;color:var(--ink)}

/* ── 버튼 ── */
.btn-big{width:100%;min-height:56px;font-size:21px;font-weight:800;letter-spacing:-.03em;white-space:normal;line-height:1.3;padding:8px 20px}
.btn-sub{min-height:56px;flex:none}

/* ── 표지 1페이지: 문제제기 ── */
.p1{margin:-32px -20px -52px;padding:20px 20px 52px;min-height:100svh;background:var(--brand);color:var(--on-dark)}
.p1-kicker{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--yellow)}
.p1-t{font-size:37px;font-weight:800;line-height:1.25;letter-spacing:-.045em;margin:0 0 20px;color:var(--on-dark)}
/* 카톡형 대화: 엄마들 메시지가 입력 중 표시와 함께 하나씩 올라오고, 센터가 답한다 */
.chat{display:flex;flex-direction:column;gap:12px}
.msg{display:flex;align-items:flex-end;gap:8px;animation:pop .35s cubic-bezier(.2,.9,.3,1.2) both}
.msg.me{justify-content:flex-end}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.av{flex-shrink:0;width:36px;height:36px;border-radius:999px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center}
.av svg{width:22px;height:22px;fill:var(--ink)}
.av.c0{background:var(--yellow)} .av.c1{background:var(--green)} .av.c2{background:var(--riso-orange)}
.av.c3{background:var(--riso-pink)} .av.c4{background:var(--blue)} .av.c5{background:var(--tint-yellow)}
.bub{max-width:84%;padding:12px;border-radius:14px 14px 14px 4px;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);box-shadow:var(--shadow)}
.bub .l{display:block;font-size:16px;font-weight:500;line-height:1.5;color:var(--ink)}
.bub .m{display:block;font-size:21px;font-weight:800;line-height:1.3;letter-spacing:-.035em;color:var(--ink)}
.me-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:84%}
.me-name{font-size:16px;font-weight:700;color:var(--yellow)}
.me .bub{max-width:none;border-radius:14px 14px 4px 14px;background:var(--yellow)}
.typing{display:inline-flex;gap:4px;padding:12px 4px}
.typing i{width:8px;height:8px;border-radius:999px;background:var(--ink);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.p1-foot{margin-top:20px;animation:pop .4s ease both}
.skip{display:block;margin:20px auto 0;min-height:44px;padding:0 12px;border:none;background:none;font:inherit;font-size:16px;font-weight:700;color:var(--on-dark);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.p1 :focus-visible{outline-color:var(--yellow)}
@media (prefers-reduced-motion:reduce){.msg,.p1-foot{animation:none}.typing i{animation:none;opacity:1}}

/* ── 표지 2페이지: 가치증명 ── */
.back{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:0 0 12px;padding:0;border:none;background:none;font:inherit;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer}
.block{padding:0 0 32px}
#page3 .block{padding-bottom:52px}
h2.big{font-size:28px;font-weight:800;line-height:1.3;letter-spacing:-.045em;margin:0 0 12px}
h2.big mark{background:none;color:inherit;padding:0;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.38em;text-underline-offset:-.22em;text-decoration-skip-ink:none}
.body{margin:0 0 20px;font-size:16px;line-height:1.75;color:var(--ink)}
.body b{color:var(--brand)}
.body.center{text-align:center;margin:12px 0 0;font-size:21px;line-height:1.5;letter-spacing:-.03em;font-weight:500}
.venn{margin:0 0 12px}
.venn svg{display:block;width:100%;max-width:380px;margin:0 auto}
.venn .c-play{fill:var(--green)}
.venn .c-talk{fill:var(--blue)}
.venn .vc circle{mix-blend-mode:multiply;stroke:var(--ink);stroke-width:1.5}
.venn .t-play{fill:var(--ink)}
.venn .t-talk{fill:var(--on-dark)}
.venn .vc{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.venn .vl{transform:translateX(-34px)}
.venn .vr{transform:translateX(34px)}
.venn .vt{transition:opacity .5s .5s}
.venn .vmid{opacity:0}
.venn.in .vl,.venn.in .vr{transform:none}
.venn.in .vmid{opacity:1}
@media (prefers-reduced-motion:reduce){.venn .vl,.venn .vr{transform:none}.venn .vmid{opacity:1}}
.venn-cap{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vcap{border-radius:14px;padding:12px 12px 20px;background:var(--card);border:1.5px solid var(--ink);border-top-width:8px;box-shadow:var(--shadow)}
.vcap.play{border-top-color:var(--green)}
.vcap.talk{border-top-color:var(--blue)}
.vcap b{display:block;font-size:16px;font-weight:800;margin-bottom:4px;color:var(--ink);text-align:center}
.vcap span{display:block;font-size:16px;line-height:1.6;color:var(--ink)}

/* ── 표지 3페이지: 그룹 구성 ── */
.info{margin:0;background:var(--card);border:1.5px solid var(--ink);border-radius:20px;padding:20px 12px;box-shadow:var(--shadow)}
.wheel{display:block;width:100%;max-width:350px;margin:4px auto 0}
.wheel .w0{fill:var(--yellow)} .wheel .w1{fill:var(--blue)} .wheel .w2{fill:var(--green)}
.wheel .w3{fill:var(--riso-pink)} .wheel .w4{fill:var(--riso-orange)}
.wheel .wedge{stroke:var(--ink);stroke-width:1.5}
.wheel .tx{fill:var(--ink)}
.wheel .hub{fill:var(--card);stroke:var(--ink);stroke-width:1.5}
.wheel .ring{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:4 6;opacity:.55}
.wheel .spin{transform-origin:160px 160px;animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wheel .spin{animation:none}}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;gap:4px;margin:20px 0 0}
.flow .st{text-align:center}
.flow .st i{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0 auto 8px;border-radius:999px;background:var(--paper);border:1.5px solid var(--ink);color:var(--ink);font-style:normal;font-weight:800;font-size:16px}
.flow .st.last i{background:var(--yellow);box-shadow:var(--shadow-btn)}
.flow .st b{display:block;font-size:16px;font-weight:800;line-height:1.4}
.flow .st span{display:block;font-size:16px;color:var(--ink);line-height:1.4;margin-top:4px}
.flow .ar{color:var(--ink);font-weight:800;margin-top:4px;font-size:21px}

.cta{margin:0 -20px -52px;padding:52px 20px;background:var(--brand);color:var(--on-dark);text-align:center}
.cta-t{margin:0 0 12px;font-size:28px;font-weight:800;line-height:1.35;letter-spacing:-.045em}
.cta-s{margin:0 0 20px;font-size:16px;color:var(--on-dark)}
.cta :focus-visible{outline-color:var(--yellow)}

/* ── 진행바 ── */
.progress{position:sticky;top:0;z-index:5;background:var(--paper);margin:-32px -20px 20px;padding:12px 20px;border-bottom:1.5px solid var(--ink)}
.progress-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:16px}
.progress-name{font-weight:800;color:var(--ink)}
.progress-count{font-weight:700;color:var(--ink);font-family:var(--mono);letter-spacing:0}
.bars{display:grid;grid-template-columns:4fr 3fr 2fr 2fr;gap:4px}
.bar{height:12px;border-radius:999px;background:var(--card);border:1px solid var(--ink);overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--brand);transition:width .25s}

/* ── 화면·문항 ── */
.screen-t{font-size:28px;font-weight:800;line-height:1.3;letter-spacing:-.04em;margin:0 0 8px}
.screen-note{font-size:16px;color:var(--ink);margin:0 0 20px}
.screen-note:empty{display:none}
.q{margin-bottom:32px;scroll-margin-top:84px}
.q:last-child{margin-bottom:0}
.q-title{font-size:21px;font-weight:800;line-height:1.4;letter-spacing:-.03em;margin:0 0 4px}
.q.solo .q-title{display:none}
.req{color:var(--danger);margin-left:4px}
.opt-tag{font-size:13px;font-weight:700;line-height:22px;color:var(--ink);background:var(--card);border:1px solid var(--ink);border-radius:999px;padding:0 8px;margin-left:8px;vertical-align:3px}
.q-help{font-size:16px;color:var(--ink);margin:0 0 8px}
.q-help:empty{display:none}
.q-body{margin-top:12px}
.q-error{color:var(--danger);font-size:16px;font-weight:700;margin:8px 0 0}
.q-error:empty{display:none}
.q.err input[type=text],.q.err input[type=tel],.q.err textarea,.q.err select{border-color:var(--danger);background:var(--tint-red)}
.q.err .ch{border-color:var(--danger)}

.q input[type=text],.q input[type=tel],.q select{height:52px;padding:8px 12px}
.q textarea{min-height:120px;padding:12px;line-height:1.6}
.tel3{display:grid;grid-template-columns:1fr auto 1.25fr auto 1.25fr;align-items:center;gap:8px}
.q .tel3 input{text-align:center;font-size:21px;font-weight:700;letter-spacing:.04em;padding:8px 4px}
.tel3 span{color:var(--ink);font-weight:700}
.birth{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.sel{position:relative;display:block}
.sel::after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.q select{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer}

.choices{display:flex;flex-direction:column;gap:8px}
.choices.row{flex-direction:row}
.choices.row .ch{flex:1;justify-content:center}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ch{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:12px;
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;cursor:pointer;user-select:none;font-size:16px;color:var(--ink);
  transition:border-color .12s,background .12s,box-shadow .12s;line-height:1.4}
.ch:hover{border-color:var(--ink)}
.ch.on{background:var(--tint-yellow);border-color:var(--ink);font-weight:700;box-shadow:var(--shadow-btn)}
.ch input{position:absolute;opacity:0;pointer-events:none}
.ch .box{flex-shrink:0;width:20px;height:20px;border:2px solid var(--ink);border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--on-dark)}
.ch .box.round{border-radius:999px}
.ch .box svg{width:14px;height:14px;opacity:0}
.ch.on .box{background:var(--ink)}
.ch.on .box svg{opacity:1}
.ch.on .box.round{background:var(--paper);border-width:6px}
.ch.on .box.round svg{display:none}
.ch:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
/* 타일(2칸): 체크 표시는 선택했을 때 오른쪽 끝에만 */
.chips .ch .box{display:none;order:2;margin-left:auto;border-radius:999px}
.chips .ch.on .box{display:flex}
.chips .ch.wide{grid-column:1/-1}
.grp-t{font-size:16px;font-weight:800;color:var(--ink);margin:20px 0 8px}
.grp-t:first-child{margin-top:4px}
.chips-extra{margin-top:20px;padding-top:20px;border-top:1.5px dashed var(--ink)}
.ch.none{border-style:dashed;border-color:var(--ink);background:var(--paper);justify-content:center}
.ch.none.on{border-style:solid;background:var(--tint-yellow)}
.slot{align-items:flex-start}
.slot .box{margin-top:4px}
.slot-tx b{display:block;font-size:16px;font-weight:800}
.slot-tx span{font-size:16px;color:var(--ink);font-weight:400}
.etc-box{margin-top:8px}
.count-hint{font-size:16px;color:var(--brand);font-weight:700;margin:12px 0 0}
.count-hint:empty{display:none}

/* 자동 입력 차단용 칸: 사람에게는 보이지 않는다 */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.form-msg{margin:20px 0 0;padding:12px 20px;border:1.5px solid var(--danger);border-radius:14px;background:var(--tint-red);color:var(--danger);font-weight:700}
.form-msg:empty{display:none}

.actions{display:flex;gap:8px;margin-top:32px}
.actions .btn-big{flex:1;width:auto}

/* ── 완료 ── */
.done{padding-top:20px}
.mark{width:52px;height:52px;border-radius:999px;background:var(--yellow);border:1.5px solid var(--ink);box-shadow:var(--shadow-btn);color:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.mark svg{width:28px;height:28px}
.done-t{font-size:28px;line-height:1.3;letter-spacing:-.03em;margin:0 0 8px}
.done .box-card{padding:20px;margin:20px 0}
.done .box-card ol{margin:0;padding-left:20px}
.done .box-card li{margin-bottom:8px}
.done .box-card li:last-child{margin:0}
.link-home{display:block;text-align:center;margin-top:12px;font-size:16px;font-weight:700;color:var(--blue-text);text-decoration:underline;text-underline-offset:3px}

@media (max-width:360px){
  .p1-t{font-size:28px}
}