/* ═══════════════════════════════════════════════════════════════ 패스핏 v8 디자인 시스템 (ui.css) — 톱다운, 사상에서 새로 작성 근거: docs/v8_plan(예정) · docs/v7_toss_redesign_spec.md 원칙(토스): 마찰 제거 · 한 화면 한 액션 · 실증 데이터 · 절제된 색 부품은 "역할"로 명명한다(생김새 이름 금지). v7 포팅 아님. ═══════════════════════════════════════════════════════════════ */ /* ── 형광펜 밴드 토큰 ── 형광펜은 글자 '하단만' 덮는 밴드(58~94%)다. 그래서 다크에서 밴드를 solid 노랑으로 두고 글자를 검정으로 맞추면, 밴드 밖 글자 상단이 어두운 카드에 묻혀 오히려 안 읽힌다. → 다크에선 밴드를 반투명으로 낮추고 글자는 밝게 유지한다. 형광 느낌은 남고 글자는 살아있다. */ :root{ --hl-band:#FFE84D; --hl-band-ink:#1F1F1C; /* --hl(#FFE84D 형광펜 면)은 테마와 무관하게 노랑이다 → 그 위 글자는 어느 테마에서도 잉크로 고정. --hl 자체도 여기 둔다 — .hometpl 안에만 있으면 .paper(에이전트 화면)에서 값이 비어 var(--hl)이 무효가 되고, 형광펜 면이 검정으로 찍힌다. .hometpl 은 같은 값으로 덮는다. */ --hl:#FFE84D; --hl-ink:#1F1F1C; } :root[data-theme="dark"]{ --hl-band:rgba(255,232,77,.30); --hl-band-ink:#F3F2EC; } /* ── 다크 진입점 ── 다크는 OS 설정이 아니라 사용자가 메뉴에서 켜는 옵션이다(기본은 종이 흰색 — 우리 아이덴티티). 그래서 prefers-color-scheme 을 보지 않고 하나만 본다. 켜고 끄는 곳: components/ThemeToggle.js · 첫 페인트 전 적용: app/layout.js 의 인라인 스크립트. 새 다크 규칙은 반드시 :root[data-theme="dark"] 로 건다(@media 로 걸면 토글이 못 끈다). */ /* ── 1. 토큰 (단일 소스) ── */ :root{ --page:#FFFFFF; --card:#FFFFFF; --raise:#F7F7FD; --fill:#F4F4FC; --fill-strong:#EAEAF7; --fill-line:#E1E1F1; --ink:#17193A; --ink2:#41465F; --ink3:#6E7391; --ink4:#9DA1B8; --line:#ECEDF5; --brand:#5B5CF0; --brand-deep:#4041CE; --brand-soft:#EAEBFD; --brand-line:#DBDCFA; --good:#129A57; --good-soft:#E4F6EC; --warn:#DF8B0A; --warn-soft:#FBF1DC; --bad:#E5484D; --good-ink:#0E7A44; --warn-ink:#8A6A2A; /* radius */ --r-ctl:14px; --r-card:20px; --r-pill:999px; /* space */ --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:44px; /* shadow */ --sh-card:0 6px 22px rgba(28,32,86,.06); --sh-cta:0 12px 26px rgba(91,92,240,.32); --sh-phone:0 40px 90px rgba(24,28,74,.20),0 8px 24px rgba(24,28,74,.10); --font:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Segoe UI',Roboto,sans-serif; } :root[data-theme="light"]{ --page:#FFFFFF; --card:#FFFFFF; --raise:#F7F7FD; --fill:#F4F4FC; --fill-strong:#EAEAF7; --fill-line:#E1E1F1; --ink:#17193A; --ink2:#41465F; --ink3:#6E7391; --ink4:#9DA1B8; --line:#ECEDF5; --brand:#5B5CF0; --brand-deep:#4041CE; --brand-soft:#EAEBFD; --brand-line:#DBDCFA; --good:#129A57; --good-soft:#E4F6EC; --warn:#DF8B0A; --warn-soft:#FBF1DC; --bad:#E5484D; --good-ink:#0E7A44; --warn-ink:#8A6A2A; --sh-card:0 4px 18px rgba(28,32,86,.07),0 1px 3px rgba(28,32,86,.05); --sh-cta:0 12px 26px rgba(91,92,240,.32); --sh-phone:0 40px 90px rgba(24,28,74,.20),0 8px 24px rgba(24,28,74,.10); } :root[data-theme="dark"]{ --page:#0C0D17; --card:#171A2B; --raise:#1E2137; --fill:#20233B; --fill-strong:#2A2F4D; --fill-line:#343A5C; --ink:#F3F4FB; --ink2:#C6C9DA; --ink3:#9095AD; --ink4:#666B85; --line:#282C46; --brand:#8384FF; --brand-deep:#A6A7FF; --brand-soft:#1F2140; --brand-line:#2E3157; --good:#37C77E; --good-soft:#12301F; --warn:#F0B44A; --warn-soft:#332612; --bad:#F1676B; --good-ink:#37C77E; --warn-ink:#F0B44A; --sh-card:0 8px 24px rgba(0,0,0,.4); --sh-cta:0 12px 26px rgba(0,0,0,.5); --sh-phone:0 40px 100px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4); } /* ── 2. 리셋·베이스 ── */ *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font);background:var(--page);color:var(--ink);line-height:1.6; letter-spacing:-.014em;-webkit-font-smoothing:antialiased; word-break:keep-all;overflow-wrap:break-word} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} .tnum{font-variant-numeric:tabular-nums} :focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:6px} /* ── 3. 화면 셸 (Screen) — 폰 프레임 + 앱바 + 스크롤 + 하단 고정 ── FlowShell / HubShell / ExamShell / ResultShell 은 모두 이 셸 위에 블록을 얹는다. */ .screen{position:relative;display:flex;flex-direction:column;width:100%;max-width:420px;min-height:760px; background:var(--page);border-radius:34px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-phone)} .appbar{display:flex;align-items:center;gap:10px;padding:18px 22px 10px;position:sticky;top:0;z-index:5; background:color-mix(in srgb,var(--page) 88%,transparent);backdrop-filter:blur(14px)} .appbar .back{position:relative;width:32px;height:32px;border-radius:10px;background:var(--fill);border:none; display:grid;place-items:center;color:var(--ink3);font-size:15px} /* 아이콘 버튼 히트영역 확장자 — 보이는 크기는 그대로 두고 탭 면적만 44px로 넓힌다. */ .hit44{position:relative} .appbar .back::before,.hit44::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:max(100%,44px);height:max(100%,44px)} .appbar .title{font-size:13.5px;font-weight:800} .appbar .step{margin-left:auto;font-size:11px;font-weight:850;color:var(--brand-deep);background:var(--brand-soft);border-radius:var(--r-pill);padding:4px 11px} .appbar .step.done{color:var(--good);background:var(--good-soft)} .screen-body{flex:1;overflow-y:auto;padding:12px 22px 124px} .stickyfoot{position:absolute;left:0;right:0;bottom:0;padding:18px 20px 22px; background:linear-gradient(180deg,transparent,var(--page) 30%)} /* ── 4. PrimaryCTA — 하단 고정 다음 걸음 1개(유일한 브랜드 버튼) ── */ .cta{display:block;width:100%;text-align:center;border:none;border-radius:16px; font-size:16px;font-weight:800;padding:17px;color:#fff; background:linear-gradient(180deg,#6465F5,#4E4FE8);box-shadow:var(--sh-cta);transition:transform .12s} .cta:hover{transform:translateY(-1px)} .cta:disabled,.cta.isoff{opacity:.4;box-shadow:none;transform:none;pointer-events:none} .cta small{display:block;font-size:11px;font-weight:650;opacity:.85;margin-top:2px} /* 보조 버튼 = 옅은 라일락 필 + 브랜드 글자(토스식 secondary) */ .cta.ghost{background:var(--fill);color:var(--brand-deep);border:none;box-shadow:none} .cta.ghost:hover{background:var(--fill-strong)} /* ── 5. Question — 아이브로우 + 큰 질문 + 보조 ── */ .qeye{font-size:12.5px;font-weight:800;color:var(--brand);letter-spacing:.01em} .qtitle{font-size:26px;font-weight:850;letter-spacing:-.03em;line-height:1.28;margin-top:10px;text-wrap:balance} .qsub{font-size:13px;font-weight:600;color:var(--ink3);margin-top:9px;line-height:1.5} /* ── 6. StepProgress — 위치(몇 번째) ── */ .stepdots{display:flex;gap:5px;padding:4px 0 0} .stepdots i{flex:1;height:5px;border-radius:var(--r-pill);background:var(--line)} .stepdots i.on{background:linear-gradient(90deg,#6D7BFF,#8B8CF5)} /* ── 7. ChoiceGrid — 선택(단일/다중·재탭 ×n) ── */ .choices{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px} .choice{font-size:14px;font-weight:750;color:var(--ink2);background:var(--fill);border:1.5px solid var(--fill-line); border-radius:var(--r-ctl);padding:13px 15px;flex:1 1 44%;text-align:center;transition:border-color .15s,background .15s} .choice:hover{background:var(--fill-strong);border-color:var(--brand-line)} .choice.on{color:var(--brand-deep);background:var(--brand-soft);border-color:var(--brand);font-weight:800} .choice .x{font-size:11px;color:var(--brand);font-weight:900;margin-left:3px} /* ── 8. FactInput — 숫자·짧은 값 인라인 + 확인 ── */ .factinput{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap} .factinput input{flex:1;min-width:0;font-family:inherit;font-size:16px;font-weight:750;color:var(--ink);text-align:center; background:var(--fill);border:1.5px solid transparent;border-radius:var(--r-ctl);padding:13px 14px;outline:none} .factinput input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)} /* 만점 기준 등 목록형 입력 — 옆 input과 같은 결로 맞춘다 */ .factinput select{flex:0 0 auto;min-width:0;font-family:inherit;font-size:16px;font-weight:750;color:var(--ink);text-align:center; background:var(--fill);border:1.5px solid transparent;border-radius:var(--r-ctl);padding:13px 10px;outline:none;cursor:pointer} .factinput select:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)} /* 범위를 벗어난 값 — 테두리로도 알린다(색만으로 전달하지 않도록 문구는 InputError가 담당) */ .factinput input[aria-invalid="true"]{border-color:var(--bad)} .factinput input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px var(--bad-soft,rgba(229,72,77,.16))} .factinput .ok{flex:0 0 auto;border:none;border-radius:var(--r-ctl);background:linear-gradient(180deg,#6465F5,#4E4FE8); color:#fff;font-weight:800;font-size:14px;padding:0 20px} /* ── 9. AIPick — AI 추천 N안 + 직접 (막막함 제거) ── */ .aipick{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--fill); border:1.5px solid var(--fill-line);border-radius:16px;padding:13px 14px;margin-top:9px;transition:all .15s} .aipick:hover{background:var(--fill-strong);transform:translateY(-1px)} .aipick .n{flex:0 0 22px;height:22px;border-radius:7px;background:var(--brand-soft);color:var(--brand-deep); display:grid;place-items:center;font-size:11px;font-weight:900} .aipick .b{flex:1;min-width:0} .aipick .t{display:block;font-size:13px;font-weight:750;color:var(--ink2);line-height:1.45} .aipick .s{display:block;font-size:11px;font-weight:700;color:var(--ink4);margin-top:2px} .aipick .go{color:var(--brand);font-weight:900;flex-shrink:0} /* ── 10. AckBeat — 확정 후 한 박자 인정 ── */ .beat{text-align:center;padding:56px 16px 40px} .beat .av{width:48px;height:48px;border-radius:50%;margin:0 auto;background:linear-gradient(135deg,#6D6EFF,#4041CE); display:grid;place-items:center;color:#fff;font-size:20px;animation:pop .42s cubic-bezier(.3,1.4,.5,1)} .beat.warn .av{background:linear-gradient(135deg,#F0B44A,#DF8B0A)} .beat .tx{font-size:16.5px;font-weight:800;margin-top:17px;line-height:1.6;max-width:300px;margin-left:auto;margin-right:auto} .beat .tx b{color:var(--brand-deep)} .beat .load{width:88px;height:4px;border-radius:var(--r-pill);background:var(--line);margin:22px auto 0;overflow:hidden} .beat .load i{display:block;height:100%;width:0;background:var(--brand);animation:load 1.5s linear forwards} /* ── 11. StatTile — 큰 숫자 + 라벨 (실증 데이터) ── */ .stattile{text-align:center;padding:var(--s2) 0} .stattile .num{font-size:44px;font-weight:850;letter-spacing:-.03em;line-height:1.05} .stattile .num i{font-style:normal;color:var(--brand-deep)} .stattile .cap{font-size:13px;font-weight:750;color:var(--ink3);margin-top:6px} /* ── 12. RowCard — 목록 1행(2줄 클램프) ── */ .rowcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card); border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--sh-card);transition:all .15s} .rowcard:hover{transform:translateY(-1px);border-color:var(--brand-line)} .rowcard .em{flex:0 0 40px;height:40px;border-radius:12px;background:var(--brand-soft);display:grid;place-items:center; font-size:15px;font-weight:900;color:var(--brand-deep);letter-spacing:-.02em;position:relative} .rowcard .em .chk{position:absolute;right:-4px;bottom:-4px;width:16px;height:16px;border-radius:50%;background:var(--good); color:var(--page);font-size:9px;display:grid;place-items:center;border:2px solid var(--card)} .rowcard .b{flex:1;min-width:0} .rowcard .k{font-size:10px;font-weight:900;color:var(--brand);letter-spacing:.04em} .rowcard .t{font-size:13.5px;font-weight:800;margin-top:1px;line-height:1.35; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .rowcard .m{font-size:11px;font-weight:700;color:var(--ink4);margin-top:3px} .rowcard .act{flex-shrink:0;font-size:11.5px;font-weight:850;color:var(--brand-deep);background:var(--fill); border:none;border-radius:var(--r-pill);padding:6px 12px} .rowcard.add{border-style:dashed;border-color:var(--brand-line);background:transparent;box-shadow:none;position:relative} .rowcard.add .em{background:var(--raise);color:var(--ink4);font-weight:800} .rowcard.add .act{color:#fff;background:linear-gradient(180deg,#6465F5,#4E4FE8);border-color:transparent} .rowcard .nb{position:absolute;top:-8px;left:14px;font-size:9.5px;font-weight:900;color:var(--page);background:var(--brand);border-radius:var(--r-pill);padding:2px 9px} /* ── 13. DetailSheet — 상세 = 바텀시트(모바일)/다이얼로그(PC) ── */ /* 키보드가 올라오면 --exh(보이는 영역 높이)만큼 줄어 시트 입력창이 키보드 위에 남는다. --exh는 KeyboardInsets가 앱 전역에서 세팅한다. 예전 --vvh는 세팅하는 코드가 없어 무용지물이었다. */ /* ── 팝업(.sheetwrap/.sheet) ────────────────────────────────────────────── 화면 위에 겹쳐 뜨는 것은 전부 이 문법을 쓴다. 컴포넌트: components/ui/Sheet.js 뒷면 흐리기 · 넉넉한 여백 · 늘 같은 자리의 ✕ 를 여기서 한 번에 정한다. */ .sheetwrap{position:fixed;top:0;left:0;right:0;height:100dvh;height:var(--exh,100dvh);z-index:80;display:none} .sheetwrap.on{display:block} /* 뒷면은 어둡게만 덮는다. 흐리기(backdrop-filter)는 넣었다가 걷었다 — 전면을 덮는 흐림은 기기마다 값이 다르게 나오고 저사양에서 무겁다. 흐림이 없으므로 어둡기가 혼자 뒤 글을 눌러야 한다(30%로는 그대로 읽힌다). */ .sheetwrap .dim{position:absolute;inset:0;background:rgba(20,20,18,.48);animation:fade .25s ease} /* overscroll-behavior:contain — 시트를 끝까지 굴린 뒤 더 당기면 뒤 화면이 따라 굴러간다. body 잠금은 iOS 에서 자주 안 먹으므로 시트 쪽에서도 연쇄를 끊는다. */ .sheet{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:420px;max-height:86vh;max-height:min(86dvh,100%); overflow-y:auto;overscroll-behavior:contain;background:var(--card);border-radius:24px 24px 0 0;padding:12px 24px 32px; animation:up .3s cubic-bezier(.3,1.1,.4,1)} .sheet .grab{width:40px;height:4px;border-radius:var(--r-pill);background:var(--line);margin:0 auto 10px} /* 머리 — 제목 + 닫기. 제목이 없으면(.bare) ✕ 만 오른쪽에 뜬다. */ .sheethd{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;min-height:34px} .sheethd.bare{margin-bottom:2px;min-height:0} .sheethd b{flex:1;min-width:0;font-size:15.5px;font-weight:900;color:var(--ink);line-height:1.45;padding-top:5px} /* 닫기 ✕ — 어느 팝업에서나 같은 자리·같은 크기다. 손가락이 닿는 넓이를 지킨다(34px). */ .sheetx{flex:none;margin-left:auto;width:34px;height:34px;border-radius:50%;border:none;background:none; display:grid;place-items:center;font-size:15px;line-height:1;color:var(--ink3);cursor:pointer; font-family:inherit;transition:background .15s,color .15s} @media (hover:hover){ .sheetx:hover{background:var(--fill);color:var(--ink)} } .sheetx:active{background:var(--fill-strong)} /* 넓은 화면 — 바닥에 붙은 시트는 화면 절반이 비어 어색하다. 가운데로 띄우고 네 귀를 굴린다. 큰 편집 팝업(.full)과 채팅방(.chatroom)은 아래에서 따로 자리를 잡으므로 건드리지 않는다. */ @media (min-width:768px){ .sheet:not(.full):not(.chatroom){bottom:auto;top:50%;transform:translate(-50%,-50%); max-width:460px;max-height:84dvh;border-radius:22px;padding:14px 30px 30px; animation:sheetpop .26s cubic-bezier(.2,.9,.3,1)} .sheet:not(.full):not(.chatroom) .grab{display:none} .sheet:not(.full):not(.chatroom) .sheethd.bare{margin-bottom:0} } @keyframes sheetpop{ from{opacity:0;transform:translate(-50%,-46%) scale(.975)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} } @media (prefers-reduced-motion:reduce){ .sheetwrap .dim,.sheet{animation:none} } /* 팝업 안의 버튼은 팝업이 책임진다 — 팝업은 화면 몸통 밖(.mypage 형제)에 그려져서, 몸통에만 걸어 둔 잉크 규칙이 닿지 않는다. 그대로 두면 마이의 팝업 버튼만 v8 보라로 나간다. --cta 는 .hometpl 스코프에만 있으므로, 없을 때는 .paper 의 --brand 로 떨어진다. */ .sheet .cta{background:var(--cta,var(--brand));color:var(--page);border-radius:999px; box-shadow:0 14px 26px -16px rgba(31,31,28,.5)} .sheet .cta.ghost{background:var(--card);color:var(--ink2);border:1px solid var(--line);box-shadow:none} /* full 변형 — 화면 전체를 쓰는 시트(긴 글 편집용: AI지수 '글 고치기' 등). 편집 영역을 최대한 넓게. */ .sheet.full{max-width:640px;height:96dvh;max-height:96dvh;border-radius:20px 20px 0 0;padding:12px 20px 24px;display:flex;flex-direction:column} .sheet.full .grab{margin-bottom:8px} .sheet.full .sheetfill{flex:1;display:flex;flex-direction:column;min-height:0} .sheet.full .sheetfill textarea{flex:1;min-height:0} @media (min-width:768px){.sheet.full{bottom:2dvh;height:92dvh;max-height:92dvh;border-radius:20px}} /* ── 14. GaugeMeter — 품질 %(완성도·AI 지수) ── */ .gauge{display:flex;align-items:center;gap:11px} .gauge .tk{flex:1;height:10px;border-radius:var(--r-pill);background:var(--line);overflow:hidden} .gauge .fl{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,#6D7BFF,#5B5CF0);transition:width .6s cubic-bezier(.4,.1,.2,1)} .gauge .pct{font-size:15px;font-weight:850;color:var(--brand-deep);min-width:40px;text-align:right} /* ── 15. CollectTrack — 수집 진행 n/4 (품질 게이지와 구분) ── */ .track{display:flex;gap:6px} .track i{flex:1;height:7px;border-radius:var(--r-pill);background:var(--line)} .track i.on{background:linear-gradient(90deg,#31B571,#17A05C)} /* ── 16. StatusChip — 상태(색 의미 고정: 브랜드=기본/good=완료·안전/warn=보강) ── */ .chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;border-radius:var(--r-pill); padding:7px 13px;border:1.5px solid var(--fill-line);color:var(--ink2);background:var(--fill)} .chip.on{color:var(--brand-deep);background:var(--brand-soft);border-color:var(--brand)} .chip.good{color:var(--good);background:var(--good-soft);border-color:transparent} .chip.warn{color:var(--warn);background:var(--warn-soft);border-color:transparent} /* ── 17. 피드백 — InlineError(그 자리) / Toast(백그라운드 완료) ── */ .inlineerr{font-size:12.5px;font-weight:800;color:var(--bad);margin-top:9px;line-height:1.5} .toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%);z-index:90;font-size:12.5px;font-weight:850; color:var(--page);background:var(--ink);border-radius:var(--r-pill);padding:10px 18px;box-shadow:var(--sh-cta);animation:toast 2.6s ease both} /* ── 18. 신뢰 3부품 (우리 시그니처 = 토스의 '실 데이터' 자리) ── */ /* EvidenceLabel — 주장 옆 근거 한 줄 */ .evidence{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:750;color:var(--ink3); background:var(--raise);border-radius:8px;padding:6px 11px} .evidence i{color:var(--brand);font-style:normal;font-weight:900} /* SafetyMark — 안심 지표 */ .safety{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--good); background:var(--good-soft);border-radius:var(--r-ctl);padding:9px 12px;line-height:1.5} /* UnlockGate — 잠긴 미리보기 + 해금 조건 */ .lockgate{position:relative;border-radius:var(--r-card);overflow:hidden} .lockgate .body{filter:blur(3px) saturate(.8);opacity:.5;pointer-events:none;user-select:none;transition:filter .45s ease,opacity .45s ease} .lockgate .panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:7px;text-align:center;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.2),color-mix(in srgb,var(--card) 88%,transparent))} .lockgate .panel .t{font-size:14px;font-weight:850} .lockgate .panel .s{font-size:11.5px;font-weight:700;color:var(--ink3)} /* ═══ ResultShell — 리포트 공통 4블록 (승인된 톤 정본) ═══ ① 요약 Verdict → ② 시각 Signal → ③ 해설 Explain → ④ 액션 Action 규율: 한 정보는 한 블록에서만. 숫자는 ②, 뜻은 ③. 색은 CTA·상태어만. */ /* ① 요약 Verdict — 맥락 한 줄 + 판정 + 대표 지표 하나. 그 외 텍스트 금지 */ .verdict .eye{font-size:12.5px;font-weight:800;color:var(--brand)} .verdict h1{font-size:29px;font-weight:850;letter-spacing:-.035em;line-height:1.28;margin-top:12px;text-wrap:balance} .verdict .big{font-size:62px;font-weight:850;letter-spacing:-.045em;line-height:1;color:var(--brand-deep);margin-top:22px} .verdict .big small{font-size:26px;font-weight:800} /* 데이터 카드(② 시각의 컨테이너) */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 18px;box-shadow:var(--sh-card)} .card > h2{font-size:16.5px;font-weight:850;letter-spacing:-.02em} .mt24{margin-top:24px} .mt26{margin-top:26px} .mt30{margin-top:30px} /* ② 시각 Signal — 위치 막대(내 값 + 중앙값 표식). 세부 수치 나열 금지 */ .posbar{margin-top:18px} .posbar:first-of-type{margin-top:16px} .posbar .top{display:flex;align-items:baseline;font-size:13.5px;font-weight:750;color:var(--ink2)} .posbar .top .mine{margin-left:auto;font-weight:850;color:var(--ink)} .posbar .rail{position:relative;height:10px;border-radius:var(--r-pill);background:var(--line);margin-top:10px} .posbar .fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,#6D7BFF,#5B5CF0)} .posbar .fill.warn{background:linear-gradient(90deg,#F0B44A,#DF8B0A)} .posbar .med{position:absolute;top:-4px;width:2.5px;height:18px;background:var(--ink);border-radius:2px} .posbar .st{margin-top:8px;font-size:11.5px;font-weight:800;text-align:right;color:var(--ink4)} .posbar .st.down{color:var(--warn)} .legend{font-size:11px;font-weight:700;color:var(--ink4);margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .legend b{color:var(--ink3);font-weight:800} /* 스펙 진단 랜딩 — 결과 막대(PosBar) 목업. 예전 페이지의 인라인 style을 여기로 옮겼다. */ .hometpl .hs-axis .posbar{margin-top:14px} .hometpl .hs-axis .posbar:first-child{margin-top:4px} .hometpl .hs-axis .posbar .top{font-size:12.5px} .hometpl .hs-axis .posbar .st{margin-top:6px;font-size:11px} .hometpl .hs-axis .st .ok{color:var(--good);font-weight:850} .hometpl .hs-axis .st .no{color:var(--warn);font-weight:850} /* 시간 리포트(인적성 결과) — 4칸 지표 + 유형별 소요 표 */ .timegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .timegrid .tcell{background:var(--fill);border:1px solid var(--fill-line);border-radius:12px;padding:11px 12px} .timegrid .tk{display:block;font-size:11.5px;font-weight:800;color:var(--ink4)} .timegrid .tv{display:block;font-size:19px;font-weight:900;color:var(--ink);margin-top:3px;letter-spacing:-.02em} .timegrid .tv.warn{color:var(--warn)} .timegrid .tsub{display:block;font-size:11px;font-weight:700;color:var(--ink4);margin-top:2px} .tsubhead{font-size:13px;font-weight:850;color:var(--ink2);margin:18px 0 0} .ttable{margin-top:8px} .ttable .trow{display:flex;align-items:baseline;gap:8px;padding:9px 2px;border-top:1px solid var(--line);font-size:12.5px;font-weight:750;color:var(--ink2)} .ttable .trow .tt{flex:1;min-width:0;word-break:keep-all} .ttable .trow .tt i{font-style:normal;font-size:11px;font-weight:700;color:var(--ink4);margin-left:6px} .ttable .trow .tavg{width:60px;text-align:right;white-space:nowrap;font-weight:850;color:var(--ink)} .ttable .trow .tpct{width:50px;text-align:right;white-space:nowrap;font-weight:850;color:var(--ink3)} .ttable .trow .tpct.warn{color:var(--warn)} /* 아주 좁은 화면(320~360px)에서는 지표 라벨·유형명이 두 줄로 접힌다 — 폭에 맞춰 한 단계 줄인다 */ @media (max-width:360px){ .timegrid{gap:8px} .timegrid .tcell{padding:10px} .timegrid .tk,.timegrid .tsub{font-size:10.5px} .timegrid .tv{font-size:17px} .ttable .trow{font-size:11.5px;gap:6px} .ttable .trow .tt i{display:none} /* n문항 배지 — 유형명이 두 줄로 접히는 걸 막는다 */ .ttable .trow .tavg{width:46px} .ttable .trow .tpct{width:40px} } .explain .ex .k em.took{margin-left:auto;font-weight:800;color:var(--ink4)} .explain .ex .k em.took.over{color:var(--warn)} /* ③ 해설 Explain — 카드/표 없이 소제목 + 본문(라이트) */ .explain{margin-top:30px} .explain > h2{font-size:16.5px;font-weight:850;letter-spacing:-.02em;padding:0 2px} .explain .ex{padding:16px 2px;border-top:1px solid var(--line)} .explain .ex:first-of-type{margin-top:6px} .explain .ex .k{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px} .explain .ex .k em{font-style:normal;font-size:11px;font-weight:800;color:var(--ink4)} .explain .ex .k em.up{color:var(--good)} .explain .ex .k em.down{color:var(--warn)} .explain .ex .v{font-size:13px;font-weight:600;color:var(--ink3);margin-top:6px;line-height:1.6} .explain .ex .v b{color:var(--ink2);font-weight:800} .explain .close{font-size:13.5px;font-weight:650;color:var(--ink2);line-height:1.7;margin-top:18px;padding:16px 2px 0;border-top:1px solid var(--line)} .explain .close b{font-weight:850;color:var(--ink)} /* ④ 액션 Action — 카드형 다음 걸음 */ .nextcard{margin-top:24px;background:linear-gradient(180deg,var(--brand-soft),var(--card)); border:1px solid var(--brand-line);border-radius:var(--r-card);padding:20px 18px} .nextcard .lead{font-size:12px;font-weight:850;color:var(--brand-deep)} .nextcard h2{font-size:19px;font-weight:850;letter-spacing:-.02em;margin-top:6px} .nextcard p{font-size:12.5px;font-weight:650;color:var(--ink3);margin-top:8px;line-height:1.6} .nextcard .evidence{margin-top:13px} /* ═══ ExamShell — 응시(SKCT·A!SK) 크롬: 타이머 + 문항 네비 + 파형 ═══ */ .exam-head{display:flex;align-items:center;gap:9px;padding:18px 22px 0} .exam-head .qn{font-size:11px;font-weight:850;color:var(--brand-deep);background:var(--brand-soft);border-radius:8px;padding:4px 10px} .exam-head .rec{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:900;color:var(--bad)} .exam-head .rec i{width:7px;height:7px;border-radius:50%;background:var(--bad);animation:blink 1.1s infinite} .exam-head .timer{font-size:16px;font-weight:850;margin-left:8px} .exam-head .timer.low{color:var(--bad)} .exam-nav{display:flex;gap:4px;padding:12px 22px 0} .exam-nav i{flex:1;height:4px;border-radius:var(--r-pill);background:var(--line)} .exam-nav i.dn{background:var(--brand)} .exam-nav i.cu{background:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)} .waveform{display:flex;align-items:flex-end;gap:4px;height:40px;margin:22px 22px 0} .waveform i{flex:1;border-radius:3px;background:linear-gradient(180deg,#8B8CF5,#5B5CF0);height:22%;--h:80%;animation:wave 1s ease-in-out infinite} .waveform i:nth-child(2n){--h:48%;animation-duration:1.2s;animation-delay:-.4s} .waveform i:nth-child(3n){--h:72%;animation-duration:.85s;animation-delay:-.2s} .waveform i:nth-child(5n){--h:95%;animation-duration:1.1s;animation-delay:-.6s} .examq{margin:18px 0 0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 15px;box-shadow:var(--sh-card)} .examq .ph{font-size:11px;font-weight:850;color:var(--ink4);letter-spacing:.03em} .examq p{font-size:14.5px;font-weight:750;color:var(--ink);line-height:1.5;margin-top:8px} .exam-mat{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:12px} .exam-mat .ml{font-size:11px;font-weight:800;color:var(--ink3)} .exam-hint{font-size:11.5px;color:var(--ink3);font-weight:650;margin-top:14px;line-height:1.5} /* ═══ 랜딩(LT) — 훅 → 데모 → 근거 → 안심 → CTA 5칸 공통 틀 ═══ */ .badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:850;color:var(--brand-deep); background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r-pill);padding:6px 13px} .display{font-size:32px;font-weight:850;letter-spacing:-.038em;line-height:1.2;margin-top:16px;text-wrap:balance} .display .g{color:var(--ink4)} .lsub{font-size:15px;font-weight:600;color:var(--ink3);margin-top:14px;line-height:1.65} .lsub b{color:var(--ink2);font-weight:750} .lblock{margin-top:32px} .lblock > .h{font-size:12px;font-weight:850;color:var(--brand);letter-spacing:.02em} .lblock > .t{font-size:20px;font-weight:850;letter-spacing:-.025em;line-height:1.35;margin-top:8px} .statrow{display:flex;gap:10px;margin-top:16px} .statrow .s{flex:1;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 12px;text-align:center;box-shadow:var(--sh-card)} .statrow .s b{display:block;font-size:20px;font-weight:850;letter-spacing:-.02em} .statrow .s span{display:block;font-size:11px;font-weight:700;color:var(--ink3);margin-top:4px;line-height:1.4} /* before→after 비교 조각 */ .ba{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px;box-shadow:var(--sh-card)} .ba .lab{font-size:11px;font-weight:850;color:var(--ink4);letter-spacing:.03em} .ba .tx{font-size:13.5px;font-weight:650;color:var(--ink2);margin-top:8px;line-height:1.6} .ba .tx mark{background:var(--brand-soft);color:var(--brand-deep);font-weight:800;border-radius:4px;padding:0 3px} .ba.after{border-color:var(--brand-line);background:linear-gradient(180deg,var(--brand-soft),var(--card))} .ba-arrow{text-align:center;font-size:12px;font-weight:800;color:var(--brand);margin:10px 0} /* 이어하기 카드 */ .contcard{background:linear-gradient(180deg,var(--brand-soft),var(--card));border:1px solid var(--brand-line); border-radius:var(--r-card);padding:16px;box-shadow:var(--sh-card)} .contcard .ck{font-size:10px;font-weight:900;color:var(--brand);letter-spacing:.05em} .contcard .ct{font-size:15px;font-weight:850;margin-top:5px;line-height:1.4} .contcard .cp{margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:12px;font-weight:600;color:var(--ink3);line-height:1.55} .contcard .cta{margin-top:12px} /* 세그먼트 탭 */ .tabs{display:flex;gap:7px;margin-top:18px} .tabs .tab{flex:1;text-align:center;font-size:12.5px;font-weight:800;color:var(--ink3);background:var(--fill); border:1.5px solid var(--fill-line);border-radius:var(--r-pill);padding:9px 8px} .tabs .tab.on{color:var(--page);background:var(--ink);border-color:var(--ink)} /* ═══ 자소서 에디터 — 스팟 하이라이트(형광펜) + 코치 ═══ 색 의미 고정: fix=골드(고칠 표현) · fill=보라(채울 자리) · done=그린(반영됨) */ .doc{font-size:15px;font-weight:500;color:var(--ink2);line-height:2;margin-top:16px} .hl{cursor:pointer;border-radius:5px;padding:0 3px;margin:0 2px;font-weight:700} .hl.fix{background:var(--warn-soft);box-shadow:inset 0 -2px 0 var(--warn);color:#8A6A2A} .hl.fill{background:var(--brand-soft);box-shadow:inset 0 -2px 0 var(--brand);color:var(--brand-deep)} .hl.done{background:var(--good-soft);box-shadow:none;color:#0E7A44;cursor:default} .coach{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;box-shadow:var(--sh-card)} .coach .ct{font-size:13px;font-weight:850;color:var(--brand-deep)} .coach .cw{font-size:12.5px;font-weight:600;color:var(--ink3);margin-top:6px;line-height:1.55} .coach .cnow{font-size:12.5px;color:var(--ink4);text-decoration:line-through;margin-top:10px} .coach .cfix{font-size:13px;font-weight:750;color:#0E7A44;background:var(--good-soft);border-radius:10px;padding:10px 12px;margin-top:8px;line-height:1.5} /* ═══ 면접 — 카테고리·채팅 스레드·결과 ═══ */ .catlab{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.02em;border-radius:var(--r-pill);padding:2px 9px;margin-bottom:2px} .catlab.A{color:var(--brand-deep);background:var(--brand-soft)} .catlab.B{color:var(--good);background:var(--good-soft)} .catlab.C{color:#B07508;background:var(--warn-soft)} .catlab.D{color:#0E7A8A;background:#DCF1F4} .catlab.E{color:#8A46C0;background:#EEE3FB} :root[data-theme="dark"] .catlab.D{background:#0E2B30} :root[data-theme="dark"] .catlab.E{background:#231338} .catcard{display:flex;gap:12px;align-items:flex-start;background:var(--fill);border:1px solid var(--fill-line);border-radius:var(--r-ctl);padding:13px 14px;margin-top:10px} .catcard .ce{flex:0 0 34px;height:34px;border-radius:10px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:18px} .catcard .cn{font-size:13.5px;font-weight:850;color:var(--ink)} .catcard .ct{font-size:11.5px;font-weight:650;color:var(--ink3);margin-top:3px;line-height:1.5} .catcard .cx{margin-left:auto;flex-shrink:0;font-size:10.5px;font-weight:850;color:var(--ink4);align-self:center} .rbadge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:900;border-radius:var(--r-pill);padding:5px 11px;background:var(--brand-soft);color:var(--brand-deep)} .rbadge.two{background:var(--good-soft);color:var(--good)} .posbar .top .ce{margin-right:7px} .posbar .delta{margin-left:8px;font-weight:900} .posbar .delta.up{color:var(--good)} .posbar .delta.down{color:var(--bad)} .posbar .delta.same{color:var(--ink4)} .wkpill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:850;color:#8A6A2A;background:var(--warn-soft);border-radius:var(--r-pill);padding:6px 12px;margin:3px 5px 0 0} .focusnote{background:var(--warn-soft);border:1px solid transparent;border-radius:var(--r-ctl);padding:13px 15px;font-size:12.5px;font-weight:700;color:#8A6A2A;line-height:1.6;margin-top:16px} .focusnote b{color:#B07508;font-weight:900} .legrow{display:flex;justify-content:space-between;font-size:11px;font-weight:800;color:var(--ink4);margin-top:14px;padding:0 2px} .chat{display:flex;flex-direction:column;gap:13px;padding:8px 0 6px} .cmsg{display:flex;gap:9px;align-items:flex-end;max-width:100%} .cmsg.ai{align-self:flex-start;animation:msgin .26s ease both} .cmsg.me{align-self:flex-end;flex-direction:row-reverse;animation:msgin .2s ease both} @keyframes msgin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} .cav{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;background:linear-gradient(135deg,#8A8BFF,#5B5CF0);color:#fff} .cmsg.flag .cav{background:linear-gradient(135deg,#F0B44A,#DF8B0A)} .cbub{max-width:82%;font-size:14px;font-weight:600;line-height:1.6;padding:11px 14px;border-radius:16px} .cmsg.ai .cbub{background:var(--fill);border:1px solid var(--fill-line);color:var(--ink);border-bottom-left-radius:5px} .cmsg.me .cbub{background:var(--brand);color:var(--page);border-bottom-right-radius:5px} .cmsg.flag .cbub{background:var(--warn-soft);border-color:transparent;color:#8A6A2A} .cmsg.flag .cbub b{color:#B07508}.cmsg.flag .cbub i{font-style:normal;color:var(--bad);font-weight:900} .cbub b{font-weight:850} .cmeta{margin-bottom:7px;display:flex;flex-wrap:wrap;gap:6px;align-items:center} .ccat{display:inline-block;font-size:11px;font-weight:900;border-radius:var(--r-pill);padding:2px 9px} .ctag{display:inline-block;font-size:10px;font-weight:900;color:var(--brand-deep);background:var(--brand-soft);border-radius:var(--r-pill);padding:2px 9px} .cmsg.flag .ctag{color:#B07508;background:transparent;padding:0} .cquote{display:block;font-size:11.5px;font-weight:800;color:var(--ink3);border-left:2px solid var(--brand-line);padding-left:8px;margin-bottom:6px;line-height:1.5} .cwhy{display:block;font-size:11px;font-weight:800;color:var(--brand-deep);margin-top:8px;padding-top:7px;border-top:1px solid var(--line)} .cdiv{display:flex;align-items:center;gap:10px;margin:2px 2px;color:var(--ink4);font-size:10.5px;font-weight:850;letter-spacing:.02em} .cdiv::before,.cdiv::after{content:"";flex:1;height:1px;background:var(--line)} .typ{display:inline-flex;gap:4px;align-items:center;padding:3px 2px} .typ i{width:7px;height:7px;border-radius:50%;background:var(--ink4);animation:typb 1s infinite} .typ i:nth-child(2){animation-delay:.15s}.typ i:nth-child(3){animation-delay:.3s} @keyframes typb{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .cmsg.old{animation:none} @media(prefers-reduced-motion:reduce){.cmsg{animation:none}} .studybox{margin-top:22px;border:1px solid var(--line);border-radius:14px;overflow:hidden} .sbh{font-size:14px;font-weight:850;padding:13px 15px;background:var(--fill);border-bottom:1px solid var(--line)} .sbi{padding:13px 15px;border-top:1px solid var(--line)}.sbi:first-of-type{border-top:none} .sbt{font-size:13px;font-weight:850;display:flex;align-items:center;gap:7px;color:var(--ink)} .sbd{font-size:12.5px;font-weight:600;color:var(--ink3);margin-top:7px;line-height:1.7}.sbd b{color:var(--ink2);font-weight:800} /* ═══ 자소서 — 강점/방향/초안 카드 · compose 연출 ═══ */ .fitnote{font-size:12px;font-weight:750;color:var(--warn);background:var(--warn-soft);border-radius:10px;padding:10px 12px;margin-top:12px;line-height:1.5} .fitnote button{background:none;border:none;color:var(--brand-deep);font-weight:850;font-family:inherit;font-size:12px;text-decoration:underline;padding:0;margin-top:4px} .emphref{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;background:var(--fill);border:1px solid var(--fill-line);border-radius:12px;padding:10px 13px;margin-top:14px} .emphref .et{font-size:11px;font-weight:850;color:var(--ink4);white-space:nowrap} .emphref .ev{font-size:12.5px;font-weight:850;color:var(--brand-deep)} .emphref .en{flex-basis:100%;font-size:11px;font-weight:650;color:var(--ink4);line-height:1.4} .draft{width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:15px;margin-top:11px;box-shadow:var(--sh-card);transition:all .15s} .draft:hover{border-color:var(--brand-line);transform:translateY(-1px)} .draft.rec{border-color:var(--brand-line)} .draft .dn{display:flex;align-items:center;gap:8px} .draft .dname{font-size:13px;font-weight:900;color:var(--brand-deep)} .draft .rectag{font-size:9.5px;font-weight:900;color:var(--page);background:var(--brand);border-radius:var(--r-pill);padding:2px 8px} .draft .dsub{font-size:14.5px;font-weight:800;margin-top:8px;line-height:1.4} .draft .dprev{font-size:12px;font-weight:600;color:var(--ink3);margin-top:6px;line-height:1.55} .regen{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px} .regen .rc{font-size:11.5px;font-weight:800;color:var(--ink3);background:var(--fill);border:1.5px solid var(--fill-line);border-radius:var(--r-pill);padding:7px 12px} .cmp{display:flex;flex-direction:column;gap:2px;margin-top:20px} .cstep{display:flex;gap:12px;padding:13px 2px;border-top:1px solid var(--line);opacity:.45;transition:opacity .3s} .cstep:first-child{border-top:none} .cstep.on,.cstep.dn{opacity:1} .cstat{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;margin-top:1px;background:var(--fill);border:1.5px solid var(--fill-line)} .cstep.on .cstat{border-color:var(--brand);background:var(--card)} /* ── 패스핏 AI 마크(.aimark) ───────────────────────────────────────────── "우리 AI"를 가리키는 하나뿐인 표시. 컴포넌트: components/ui/AiMark.js 태두리 없는 네 갈래 반짝임 하나. 갈래를 가늘고 길게 뻗어 마름모가 아니라 빛나는 것으로 읽히게 한다. 평소에는 잉크색으로 가만히 있다가, 일이 시작되면 도형은 그대로 두고 색만 바뀐다 — 주황에서 노랑으로 흐르는 색이 아래에서 위로 번지며 지나간다. .rest = 평소 · .det = 실제 단계만큼 켜진 채로 멈춘다 · .ind = 금색이 계속 지나간다. 선을 두르지 않는 이유: 16px 로 줄이면 선과 면이 서로를 갉아먹어 뭉개진다. 캐논: docs/ai_progress_motion.md */ .aimark{display:inline-block;flex-shrink:0;line-height:0; --am-rest:var(--ink); --am-dim:#E6E3D7; --am-1:#FF7A18; --am-2:#FFB020; --am-3:#FFD84A; --am-4:#FFF0A8} /* 램프는 테마를 안 탄다. 갈래가 가늘어진 뒤로는 짙은 끝(주황)도 어두운 면에서 살아난다 — 예전 도톰한 모양에서 브론즈로 시작할 때만 다크에서 반쪽으로 보였다. 안 켜진 면(--am-dim)만 테마를 따라간다. */ :root[data-theme="dark"] .aimark{--am-dim:#3A372E} /* 평소 — 잉크색으로 가만히. 일이 시작되면 도형은 그대로 두고 색만 바뀐다 */ .aimark.rest .amdim{fill:var(--am-rest)} .aimark.rest .amlit{display:none} /* 대기 화면 머리 — 마크 + 제목 묶음 */ .aihead{display:flex;gap:9px;align-items:flex-start} .aihead .aiheadtx{flex:1;min-width:0} .aihead .aiheadtx .qeye{margin-top:0} .aimark svg{width:100%;height:100%;display:block;overflow:visible} .aimark .amdim{fill:var(--am-dim)} .aimark .amc1{stop-color:var(--am-1)} .aimark .amc2{stop-color:var(--am-2)} .aimark .amc3{stop-color:var(--am-3)} .aimark .amc4{stop-color:var(--am-4)} /* 켜짐 경계를 옮기는 건 transform 하나뿐이다 — SVG geometry 속성보다 지원 범위가 넓다 */ .aimark .amwipe{transition:transform .5s cubic-bezier(.4,0,.3,1)} /* 값이 없을 때 — 금색 물결이 아래에서 위로 계속 지나간다 */ .aimark.ind .amwipe{animation:amwave 2.1s cubic-bezier(.45,0,.4,1) infinite;transition:none} @keyframes amwave{ 0% {transform:translateY(40px)} 55% {transform:translateY(-40px)} 70% {transform:translateY(-40px)} 100% {transform:translateY(40px)} } /* 끝났을 때 — 다 켜진 채로 한 번 튀고 멈춘다 */ .aimark.dn svg{animation:hlfill .5s cubic-bezier(.3,1.4,.5,1) both} @media (prefers-reduced-motion:reduce){ .aimark.dn svg{animation:none} .aimark .amwipe{transition:none} .aimark.ind .amwipe{animation:none;transform:translateY(0)} } /* AI가 지금 이 항목을 처리하는 중 — 회전 스피너 대신 우리 문법으로. ① 상태 원 안에서 잉크 점 세 개가 차례로 튄다(생각 중). ② 항목 제목 위를 형광펜이 왼쪽에서 오른쪽으로 지나간다(지금 읽는 줄). ③ 끝난 항목에는 형광펜 자국이 그대로 남는다(처리한 흔적). 캐논: docs/ai_progress_motion.md */ .cstep.on .cstat .rg{display:flex;align-items:center;gap:2.5px;width:auto;height:auto;border:none;background:none} .cstep.on .cstat .rg i{width:3.6px;height:3.6px;border-radius:50%;background:var(--brand);animation:inkbob 1.15s ease-in-out infinite} .cstep.on .cstat .rg i:nth-child(2){animation-delay:.14s} .cstep.on .cstat .rg i:nth-child(3){animation-delay:.28s} @keyframes inkbob{0%,70%,100%{opacity:.32;transform:translateY(0)}30%{opacity:1;transform:translateY(-2.5px)}} @keyframes spin{to{transform:rotate(360deg)}} /* 진행 항목 제목에 형광펜을 긋던 것은 걷었다 — 지금 어디를 처리하는지는 상태 원과 마크가 이미 말하고, 노란 밑줄까지 겹치면 화면이 시끄럽다. */ .cstep.dn .cstat{background:var(--good);border-color:var(--good);color:var(--page);font-size:12px;font-weight:900} .cstep .ct2{font-size:14px;font-weight:850} .cstep .cp2{font-size:12px;font-weight:650;color:var(--ink3);margin-top:3px;line-height:1.5} .cstep .cp2 b{color:var(--brand-deep);font-weight:800} .cstep .cm2{display:inline-block;font-size:10px;font-weight:800;color:var(--ink4);background:var(--fill);border:1px solid var(--fill-line);border-radius:6px;padding:2px 7px;margin-top:6px} @media (prefers-reduced-motion:reduce){ .cstep.on .cstat .rg i{animation:none;opacity:1} } /* ═══ 면접 — 챗 스레드(질문↔답변 + 내 문장 인용) ═══ */ .thread{display:flex;flex-direction:column;gap:12px;margin-top:18px} .th-tag{align-self:flex-start;font-size:10px;font-weight:900;color:#fff;background:linear-gradient(135deg,#6D6EFF,#4041CE);border-radius:var(--r-pill);padding:4px 12px} .th-q{align-self:flex-start;max-width:88%;font-size:13.5px;font-weight:700;line-height:1.6;border-radius:4px 14px 14px 14px; padding:12px 14px;background:var(--fill);border:1px solid var(--fill-line);color:var(--ink2)} .th-q b{color:var(--brand-deep)} .th-quote{display:block;font-size:11px;font-weight:750;color:var(--ink4);background:var(--card);border-left:2.5px solid var(--brand-line); border-radius:0 8px 8px 0;padding:6px 10px;margin-bottom:8px} .th-a{align-self:flex-end;max-width:88%;font-size:13.5px;font-weight:700;line-height:1.6;border-radius:14px 4px 14px 14px; padding:12px 14px;background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand-deep)} /* ═══ SKCT — 4지선다 보기 ═══ */ .exopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px} .exopt{font-size:13.5px;font-weight:750;color:var(--ink2);background:var(--fill);border:1.5px solid var(--fill-line); border-radius:var(--r-ctl);padding:12px 13px;text-align:left} .exopt.sel{color:var(--brand-deep);background:var(--brand-soft);border-color:var(--brand);font-weight:800} /* 고지 */ .notice{font-size:10.5px;color:var(--ink4);font-weight:600;line-height:1.6;text-align:center;margin-top:22px;padding:0 6px} /* ── 애니메이션 ── */ @keyframes pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}} /* 카드함에 방금 꽂힌 카드 — 스프링 pop 임팩트(원본 experience-cards.html .landing 이식) */ .rowcard.landing{animation:pop .6s cubic-bezier(.25,1.25,.4,1)} /* 결과 완성 임팩트 — 결과 화면 eyebrow 앞에 ✓ 스탬프가 톡 찍힌다(전 에이전트 결과 공용) */ @keyframes stamp{0%{opacity:0;transform:scale(.3) rotate(-14deg)}55%{opacity:1;transform:scale(1.15) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}} .verdict .eye::before,.rv .eye::before{content:"✓";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--good);color:var(--page);font-size:10.5px;font-weight:900;margin-right:7px;vertical-align:-2px;transform-origin:center;animation:stamp .5s cubic-bezier(.3,1.5,.5,1) both} /* 모의면접 정합성 캐치 — 최초 등장 시 주의 펄스 1회 */ @keyframes flagpulse{0%{box-shadow:0 0 0 0 rgba(224,169,74,.55)}70%{box-shadow:0 0 0 8px rgba(224,169,74,0)}100%{box-shadow:0 0 0 0 rgba(224,169,74,0)}} .cmsg.flag .cbub{animation:flagpulse 1.5s ease-out 1} /* 응시 타이머 마지막 구간 — 긴장 블링크 (A!SK .tm.warn · SKCT .timer.low) */ .exHead .tm.warn,.exam-head .timer.low{animation:blink .9s steps(1,end) infinite} /* 자소서 에디터 — [빈칸]을 내 값으로 채우면 형광펜이 톡 채워진다 */ @keyframes hlfill{0%{transform:scale(.88)}55%{transform:scale(1.12)}100%{transform:scale(1)}} .hl.done{display:inline-block;animation:hlfill .45s cubic-bezier(.3,1.4,.5,1)} /* SKCT — 문항 전환 시 슬라이드인 */ .examstage .examq{animation:stepIn .32s ease both} @keyframes load{to{width:100%}} @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes up{from{transform:translate(-50%,60px);opacity:0}to{transform:translate(-50%,0);opacity:1}} @keyframes toast{0%{opacity:0;transform:translate(-50%,8px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,6px)}} @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}} @keyframes wave{0%,100%{height:22%}50%{height:var(--h)}} @keyframes stepIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}} @keyframes bignum{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}} /* ── 스텝 진입 슬라이드 (플로우 한 장면씩) ── */ .step-in{animation:stepIn .34s cubic-bezier(.2,.7,.3,1) both} /* ── 선택 반응: 탭한 요소만 살짝(전체 화면 리렌더 없이) ── */ .pulse{animation:selpulse .3s cubic-bezier(.3,1.3,.5,1)} @keyframes selpulse{0%{transform:scale(.96)}55%{transform:scale(1.03)}100%{transform:scale(1)}} .aipick.on{border-color:var(--brand);background:var(--brand-soft)} /* ── 결과 등장: 위치 막대 채우기 + 큰 숫자 팝 ── */ .posbar .fill{transition:width .95s cubic-bezier(.35,.1,.2,1)} .verdict .big{animation:bignum .5s cubic-bezier(.3,1.4,.5,1) both} /* ── 스크롤 리빌 ── */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){*{animation:none!important} .posbar .fill,.gauge .fl,.hgf,.hgm,.lockgate .body{transition:none!important} .reveal{opacity:1!important;transform:none!important}} /* ═══ 실사용 화면 페이지(.app) — 모바일 앱 → 데스크톱 확장 ═══ .screen 은 쇼케이스용 폰 프레임, .app 은 실제 반응형 페이지다. 블록(verdict/card/explain/rowcard…)은 그대로 재사용한다. */ body.page{background:var(--page)} .app{position:relative;max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--page)} .app .appbar{position:sticky;top:0} .app .screen-body{padding-bottom:calc(130px + env(safe-area-inset-bottom,0px)); padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))} .app .stickyfoot{position:fixed;left:0;right:0;bottom:0;bottom:var(--kbh,0);display:flex;justify-content:center; padding:18px 20px calc(22px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,transparent,var(--page) 30%)} .app .stickyfoot .cta{width:100%;max-width:460px} /* 결과 화면: CTA를 하단 고정하지 않고 본문 끝에 흐르게(다 읽은 뒤 나타남) */ .app.result .stickyfoot,.app .stickyfoot.atend{position:static;background:none;padding:24px 20px 40px} .app.result .screen-body,.app .screen-body.noreserve{padding-bottom:32px} /* 채팅형(모의면접): 대화 입력바를 화면 하단에 고정, 본문은 그만큼 여백 확보(마지막 말풍선이 안 가림). .app .stickyfoot 의 position:fixed + bottom:var(--kbh) 를 그대로 써서 키보드가 올라와도 입력바가 위로 뜬다. */ .app.chat .screen-body{padding-bottom:248px} .app.chat .stickyfoot{background:var(--page);border-top:1px solid var(--line)} @media (min-width:900px){ /* 데스크톱: 넉넉한 중앙 컬럼 + 타이포 확대 + CTA 인라인 */ .app{max-width:680px;padding-top:14px} .app .appbar{padding:22px 8px 12px;background:none;backdrop-filter:none} .app .screen-body{padding:14px 8px 40px;overflow:visible} .app .stickyfoot{position:static;background:none;padding:26px 8px 56px} .app .stickyfoot .cta{max-width:380px} /* 채팅형은 데스크톱에서 입력바를 본문 끝에 자연스럽게(고정 해제·구분선 제거) */ .app.chat .screen-body{padding-bottom:24px} .app.chat .stickyfoot{background:none;border-top:none;box-shadow:none} /* 데스크톱: 입력바를 대화 폭에 맞춰 넓게(460px 캡 해제 — A!SK와 동일한 '컨테이너 채움' 방식) */ .app.chat .composerwrap{max-width:none} .app .qtitle{font-size:34px} .app .qsub{font-size:15px} .app .choice{flex-basis:31%;font-size:15px;padding:15px} .app .verdict h1{font-size:38px} .app .verdict .big{font-size:78px} .app .verdict .big small{font-size:32px} .app .card{padding:26px 24px} .app .card>h2,.app .explain>h2{font-size:19px} .app .posbar .top{font-size:15px} .app .posbar .rail{height:12px} /* 시간 리포트도 같은 비율로 키운다(안 키우면 PC에서 주변 텍스트보다 작아 보인다) */ .app .timegrid .tk{font-size:12.5px} .app .timegrid .tv{font-size:22px} .app .timegrid .tsub{font-size:12px} .app .tsubhead{font-size:15px} .app .ttable .trow{font-size:14px} .app .ttable .trow .tavg{width:66px} .app .ttable .trow .tpct{width:56px} .app .explain .ex .k{font-size:16px} .app .explain .ex .v{font-size:14.5px} .app .explain .close{font-size:15px} .app .nextcard{padding:26px 24px} .app .nextcard h2{font-size:22px} .app .nextcard p{font-size:14px} .app .examq p{font-size:16.5px} .app .exam-hint{font-size:13px} /* Hub: 목록 2열 */ .app .rowlist{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* Result: 위치카드·해설을 단일 컬럼 풀폭으로 스택 — 다른 결과 화면(A!SK·SKCT·면접)과 동일한 느낌. 이전엔 2열로 쪼개져 PC에서 좁아 보였다. */ .app.result .result-cols{display:block} } @media (min-width:1200px){ .app{max-width:760px} } /* ── iOS 입력 확대 방지 ── */ @media (max-width:899px){textarea,select,input{font-size:16px!important}} /* ── 사이트 상단 네비 (index·랜딩·홈 공통 · HS.nav 로 주입) ── 투명 유리(frosted glass): 반투명 배경 + backdrop-blur. 하단 라인 없음. 뷰포트 sticky. PC(≥1000px)엔 메뉴가 펼쳐지고, 좁으면 햄버거로 슬라이드 패널. */ .sitenav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px; padding:14px max(20px,calc((100% - 1120px)/2)); background:color-mix(in srgb,var(--page) 55%,transparent); -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)} .sitenav .brand{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;font-size:17px;font-weight:850;color:var(--ink)} /* 회사 스위처 — 패스핏 옆(전 화면 공용) */ .sitenav .conav{display:inline-flex;align-items:center;gap:2px;background:var(--fill);border:1px solid var(--fill-line);border-radius:999px;padding:5px 9px 5px 11px;line-height:1} .sitenav .conav select{font:inherit;font-size:12.5px;font-weight:850;color:var(--brand-deep);background:transparent;border:none;outline:none;cursor:pointer;padding:0;margin:0;appearance:none;-webkit-appearance:none;max-width:44vw;text-overflow:ellipsis} .sitenav .conav .cav{font-size:9px;color:var(--brand);pointer-events:none} /* 회사 스위처(React · components/CompanySwitch.js) — 네이티브 select 대신 팝오버. 위 .conav 규칙은 정적 프로토타입(public/*.html · HS.nav)이 아직 쓰는 select용이라 남겨 둔다. */ .cosw{position:relative;display:inline-flex} .cosw-btn{position:relative;display:inline-flex;align-items:center;gap:7px;background:var(--fill);border:1px solid var(--fill-line); border-radius:999px;padding:5px 11px 5px 6px;line-height:1;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s} .cosw-btn::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px} .cosw-btn:hover{background:var(--fill-strong)} .cosw.on .cosw-btn{background:var(--card);border-color:var(--brand-line);box-shadow:0 4px 14px rgba(91,92,240,.16)} .cosw-lg{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex-shrink:0; font-size:10px;font-weight:900;color:#fff;letter-spacing:-.02em} .cosw-nm{font-size:12.5px;font-weight:850;color:var(--brand-deep);max-width:40vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cosw-ch{font-size:10px;color:var(--brand);transition:transform .2s} .cosw.on .cosw-ch{transform:rotate(180deg)} .cosw-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:70;min-width:214px;padding:6px; background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(20,22,44,.20);animation:coswin .16s ease} @keyframes coswin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .cosw-op{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:none;border-radius:11px; background:none;font:inherit;font-size:13px;font-weight:750;color:var(--ink);text-align:left;cursor:pointer} .cosw-op.hot,.cosw-op:hover{background:var(--fill)} .cosw-op[aria-selected="true"]{background:var(--brand-soft);color:var(--brand-deep);font-weight:850} .cosw-op .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cosw-op .ck{font-size:11px;color:var(--brand)} @media (prefers-reduced-motion:reduce){.cosw-pop{animation:none}.cosw-ch{transition:none}} .sitenav .snav{display:none} .sitenav .mbtn{margin-left:auto;margin-right:-9px;min-width:44px;min-height:44px;display:inline-grid;place-items:center; font-size:19px;color:var(--ink3);background:none;border:none;-webkit-tap-highlight-color:transparent} @media (min-width:900px){.sitenav{padding:16px max(28px,calc((100% - 1120px)/2))}.sitenav .brand{font-size:19px}} @media (min-width:1000px){ .sitenav .mbtn{display:none} .sitenav .snav{display:flex;align-items:center;gap:2px;margin-left:auto} .sitenav .snav a{font-size:13.5px;font-weight:700;color:var(--ink2);padding:9px 12px;border-radius:11px;white-space:nowrap;line-height:1;transition:color .18s,background .18s,box-shadow .18s} .sitenav .snav a:hover{color:var(--brand-deep);background:color-mix(in srgb,var(--card) 72%,transparent)} .sitenav .snav a.cur{color:var(--brand-deep);font-weight:850;background:color-mix(in srgb,var(--card) 92%,transparent);box-shadow:0 3px 12px rgba(91,92,240,.18)} } @media (min-width:1280px){.sitenav .snav a{font-size:14px;padding:9px 13px}} .navmenu{position:fixed;inset:0;z-index:60;display:none} .navmenu.on{display:block} /* 팝업과 같은 문법 — 같은 어둡기(.sheetwrap .dim 과 같은 값) */ .navmenu .dim{position:absolute;inset:0;background:rgba(20,20,18,.48);animation:navfade .25s ease} @keyframes navfade{from{opacity:0}to{opacity:1}} .navpanel{position:absolute;top:0;right:0;width:290px;max-width:84%;height:100%;background:var(--card); box-shadow:-16px 0 44px rgba(20,22,44,.22);padding:18px 16px 30px;overflow-y:auto;animation:navslide .28s ease} @keyframes navslide{from{transform:translateX(28px);opacity:.6}to{transform:none;opacity:1}} .navpanel .ph{display:flex;align-items:center;padding:2px 2px 6px} .navpanel .ph b{font-size:15px;font-weight:900;padding-left:6px} .navpanel .grp{font-size:11px;font-weight:900;color:var(--ink4);letter-spacing:.05em;margin:16px 8px 4px} .navpanel a.mi{display:flex;align-items:center;gap:10px;padding:13px 10px;border-radius:12px;font-size:14px;font-weight:750;color:var(--ink)} .navpanel a.mi .nm{flex:1;min-width:0} .navpanel a.mi .chev{color:var(--ink4);font-size:16px;line-height:1} .navpanel a.mi:hover{background:var(--fill)} .navpanel a.mi.cur{background:var(--brand-soft);color:var(--brand-deep);font-weight:850} .navpanel a.mi .tag{margin-left:auto;font-size:9px;font-weight:850;color:var(--brand-deep);background:var(--brand-soft);border-radius:6px;padding:2px 7px} /* 다크 모드 스위치 — 메뉴 항목과 같은 줄 모양을 쓰되, 버튼이라 기본 스타일을 지운다 */ .navpanel button.mi{display:flex;align-items:center;gap:10px;width:100%;padding:13px 10px;border-radius:12px; font-family:inherit;font-size:14px;font-weight:750;color:var(--ink);background:none;border:none;text-align:left;cursor:pointer} .navpanel button.mi:hover{background:var(--fill)} .navpanel .sw{margin-left:auto;flex:none;position:relative;width:40px;height:24px;border-radius:999px; background:var(--fill-strong);border:1px solid var(--line);transition:background .18s,border-color .18s} .navpanel .sw i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%; background:var(--card);box-shadow:0 1px 3px rgba(20,22,44,.28);transition:transform .18s,background .18s} .navpanel button.mi[aria-checked="true"] .sw{background:var(--ink);border-color:var(--ink)} .navpanel button.mi[aria-checked="true"] .sw i{transform:translateX(16px);background:var(--page)} @media(prefers-reduced-motion:reduce){.navpanel .sw,.navpanel .sw i{transition:none}} /* ── 연보라 그라데이션 배경 (랜딩 공통 컴포넌트) ── v7처럼 상단에만 라일락, 아래로 내려갈수록 흰색으로 사라진다(뷰포트 고정 아님). body 또는 최상위 래퍼에 .bg-lilac 를 건다. 토큰(--brand-soft/--page) 연동. */ :root{ --grad-lilac: radial-gradient(760px 460px at 84% -80px, var(--brand-soft) 0%, transparent 70%), radial-gradient(680px 420px at 4% -60px, color-mix(in srgb,var(--brand-soft) 82%,transparent) 0%, transparent 70%), linear-gradient(180deg, color-mix(in srgb,var(--brand-soft) 55%,var(--page)) 0, var(--page) 860px); } /* 그라데이션 배경은 홈(.hometpl)에서만 — 나머지 앱 화면은 평면 배경으로 둔다. (PC 넓은 뷰포트에서 상단 라디얼 블롭이 중앙 컬럼 밖으로 넓게 퍼져 어색해지는 문제 제거) */ .bg-lilac{background:var(--page)} .hometpl.bg-lilac{background:var(--grad-lilac);background-repeat:no-repeat;background-color:var(--page)} /* 정적 목업(body.page.bg-lilac)은 기존대로 유지 — React 앱 body에는 해당 클래스가 없다. */ body.page.bg-lilac{background:var(--grad-lilac);background-repeat:no-repeat;background-color:var(--page)} body.page.bg-lilac .app{background:transparent} /* ── 팁/안심 카드 텍스트 (랜딩 공통) — .card 안에서 반복되던 인라인 스타일을 대체 ── */ .tip-h{font-size:14px;font-weight:800;color:var(--ink)} .tip-b{font-size:13px;font-weight:600;color:var(--ink3);margin-top:8px;line-height:1.65} .tip-b b{color:var(--ink2)} /* ── 컴포저: 음성+텍스트 답변 입력 (모의면접·A!SK 공용 컴포넌트) ── 구조: .composerwrap > (.exchip?) + .cinput>textarea + .cbar>[.cmic ...액션버튼] textarea는 16px(iOS 포커스 확대 방지)·자동확장(max-height 캡)이라 레이아웃이 튀지 않는다. 다크(응시 풀스크린)는 .composerwrap.dark 변형. */ .composerwrap{width:100%;max-width:460px;display:flex;flex-direction:column;gap:10px} .exchip{align-self:flex-start;font-size:11.5px;font-weight:800;color:var(--brand-deep);background:var(--brand-soft);border:none;border-radius:var(--r-pill);padding:7px 13px;cursor:pointer;font-family:inherit} .cinput{background:var(--fill);border:1.5px solid var(--fill-line);border-radius:16px;padding:12px 15px} .cinput:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)} .cinput textarea{width:100%;border:none;background:none;outline:none;resize:none;font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);line-height:1.55;min-height:52px;max-height:150px;display:block} .cinput textarea::placeholder{color:var(--ink4)} .cbar{display:flex;align-items:center;justify-content:flex-end;gap:10px} /* 마이크 알약은 왼쪽, 전송/액션은 오른쪽. 녹음 중 마이크가 빠져도 전송은 오른쪽 고정 */ .cbar>.cmic{margin-right:auto} .cmic{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13.5px;font-weight:800;color:var(--brand-deep);background:var(--brand-soft);border:1.5px solid var(--brand-line);border-radius:var(--r-pill);padding:11px 16px;cursor:pointer;flex-shrink:0} .cmic .ic{font-size:15px;line-height:1} .cmic .mdot{width:9px;height:9px;border-radius:50%;background:currentColor} /* 녹음 중 '수신 시그널' 파형 — 면접·A!SK 공용(.cmic.rec 안에서 currentColor=흰색) */ .cmic .micwave{display:inline-flex;align-items:center;gap:2px;height:14px} .cmic .micwave i{width:3px;border-radius:2px;background:currentColor;height:5px;animation:micwv .8s ease-in-out infinite} .cmic .micwave i:nth-child(2){animation-delay:-.2s} .cmic .micwave i:nth-child(3){animation-delay:-.4s} .cmic .micwave i:nth-child(4){animation-delay:-.1s} @keyframes micwv{0%,100%{height:5px}50%{height:14px}} .cmic.rec{background:linear-gradient(135deg,#FF5A5F,#E5484D);color:#fff;border-color:transparent;animation:micpulse 1.3s infinite} .csend{flex:0 0 auto;padding:12px 24px;border-radius:var(--r-pill);border:none;background:var(--brand);color:var(--page);font-family:inherit;font-size:14.5px;font-weight:850;cursor:pointer;white-space:nowrap} .csend:disabled{opacity:.4;cursor:default} @keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}50%{box-shadow:0 0 0 7px rgba(229,72,77,0)}} /* 다크 변형(A!SK 응시 화면) */ .composerwrap.dark{max-width:none} .composerwrap.dark .cinput{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)} .composerwrap.dark .cinput:focus-within{border-color:#8FA2FF;box-shadow:0 0 0 4px rgba(109,110,255,.18)} .composerwrap.dark .cinput textarea{color:#fff} .composerwrap.dark .cinput textarea::placeholder{color:#8891B8} .composerwrap.dark .cmic{color:#C9D4FF;background:rgba(93,120,255,.16);border-color:rgba(140,160,255,.3)} .composerwrap.dark .cmic.rec{color:#fff;background:linear-gradient(135deg,#FF5A5F,#E5484D)} /* 녹음 중 — 입력창(.cinput) 안에서 검정 음파가 좌우로 뛰는 클로드식 표시줄(면접코칭·A!SK 공용). 마이크 아이콘 · 얇은 검정 막대 22개 · 경과 시간 · 정지 버튼. 말로 답변을 넣는 중임이 읽힌다. */ .cinput .voicebar{display:flex;align-items:center;gap:10px;margin-top:11px;padding-top:11px;border-top:1px solid var(--fill-line)} .cinput .voicebar .vmic{width:14px;height:15px;flex-shrink:0;position:relative} .cinput .voicebar .vmic::before{content:"";position:absolute;left:4px;top:0;width:6px;height:8px;border-radius:3px;background:var(--ink)} .cinput .voicebar .vmic::after{content:"";position:absolute;left:1px;top:6px;width:12px;height:6px;border:1.5px solid var(--ink);border-top:0;border-radius:0 0 7px 7px} .cinput .voicebar .vwave{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:3px;height:22px;overflow:hidden} .cinput .voicebar .vwave i{flex:0 0 3px;border-radius:2px;background:var(--ink);height:22%;--h:80%; animation-name:hs_vw;animation-iteration-count:infinite;animation-timing-function:ease-in-out} @keyframes hs_vw{0%,100%{height:16%}50%{height:var(--h)}} .cinput .voicebar .vwave i:nth-child(1){--h:96%;animation-duration:1.31s;animation-delay:-0.39s} .cinput .voicebar .vwave i:nth-child(2){--h:34%;animation-duration:0.73s;animation-delay:-0.51s} .cinput .voicebar .vwave i:nth-child(3){--h:96%;animation-duration:1.06s;animation-delay:-0.82s} .cinput .voicebar .vwave i:nth-child(4){--h:76%;animation-duration:0.7s;animation-delay:-0.42s} .cinput .voicebar .vwave i:nth-child(5){--h:48%;animation-duration:0.84s;animation-delay:-0.52s} .cinput .voicebar .vwave i:nth-child(6){--h:34%;animation-duration:1.23s;animation-delay:-0.16s} .cinput .voicebar .vwave i:nth-child(7){--h:76%;animation-duration:1.1s;animation-delay:-0.55s} .cinput .voicebar .vwave i:nth-child(8){--h:34%;animation-duration:1.06s;animation-delay:-0.39s} .cinput .voicebar .vwave i:nth-child(9){--h:76%;animation-duration:0.71s;animation-delay:-0.78s} .cinput .voicebar .vwave i:nth-child(10){--h:88%;animation-duration:0.96s;animation-delay:-0.51s} .cinput .voicebar .vwave i:nth-child(11){--h:84%;animation-duration:0.88s;animation-delay:-0.74s} .cinput .voicebar .vwave i:nth-child(12){--h:62%;animation-duration:0.75s;animation-delay:-0.54s} .cinput .voicebar .vwave i:nth-child(13){--h:76%;animation-duration:0.93s;animation-delay:-0.52s} .cinput .voicebar .vwave i:nth-child(14){--h:48%;animation-duration:1.05s;animation-delay:-0.58s} .cinput .voicebar .vwave i:nth-child(15){--h:42%;animation-duration:1.13s;animation-delay:-0.41s} .cinput .voicebar .vwave i:nth-child(16){--h:96%;animation-duration:0.99s;animation-delay:-0.83s} .cinput .voicebar .vwave i:nth-child(17){--h:96%;animation-duration:0.88s;animation-delay:-0.73s} .cinput .voicebar .vwave i:nth-child(18){--h:66%;animation-duration:1.19s;animation-delay:-0.12s} .cinput .voicebar .vwave i:nth-child(19){--h:88%;animation-duration:1.03s;animation-delay:-0.79s} .cinput .voicebar .vwave i:nth-child(20){--h:66%;animation-duration:0.98s;animation-delay:-0.57s} .cinput .voicebar .vwave i:nth-child(21){--h:48%;animation-duration:0.76s;animation-delay:-0.41s} .cinput .voicebar .vwave i:nth-child(22){--h:92%;animation-duration:0.91s;animation-delay:-0.84s} .cinput .voicebar .vtm{font-size:11.5px;font-weight:800;color:var(--ink3);font-variant-numeric:tabular-nums;flex-shrink:0} .cinput .voicebar .vstop{width:26px;height:26px;border-radius:50%;background:var(--ink);border:none;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer} .cinput .voicebar .vstop i{width:9px;height:9px;border-radius:2px;background:var(--card)} /* 다크(A!SK 응시 풀스크린) — 검정 대신 밝은 음파 */ .composerwrap.dark .cinput .voicebar{border-top-color:rgba(255,255,255,.14)} .composerwrap.dark .cinput .voicebar .vmic::before{background:#E7ECFF} .composerwrap.dark .cinput .voicebar .vmic::after{border-color:#E7ECFF} .composerwrap.dark .cinput .voicebar .vwave i{background:#E7ECFF} .composerwrap.dark .cinput .voicebar .vtm{color:#C9D4FF} .composerwrap.dark .cinput .voicebar .vstop{background:#fff} .composerwrap.dark .cinput .voicebar .vstop i{background:#12142B} @media(prefers-reduced-motion:reduce){.cmic.rec{animation:none}.cmic .micwave i{animation:none;height:10px}.cinput .voicebar .vwave i{animation:none;height:45%}} /* ═══ A!SK 영상면접 — 검정 풀스크린 응시 + 리포트 ═══ */ @keyframes wv{0%,100%{height:4px}50%{height:14px}} @keyframes blk{0%,100%{opacity:1}50%{opacity:.25}} @keyframes exfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .exam-overlay{position:fixed;top:0;left:0;right:0;height:var(--exh,100dvh);z-index:90;background:#0A0C16;color:#fff;display:flex;flex-direction:column;animation:exfade .22s ease;font-family:var(--font)} .exHead{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0} .exHead .tag{font-size:11px;font-weight:850;color:#C9D4FF;background:rgba(93,120,255,.18);border-radius:8px;padding:5px 10px;flex-shrink:0;white-space:nowrap} .exHead .prog{flex:1;max-width:360px;display:flex;gap:4px} .exHead .prog i{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.14)} .exHead .prog i.done{background:#8384FF}.exHead .prog i.cur{background:#FFD37A} .exHead .tm{font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;color:#fff;flex-shrink:0} .exHead .tm.warn{color:#FF8A8E} .exBtn{position:relative;font-size:12px;font-weight:800;color:#9AA3C8;background:rgba(255,255,255,.08);border:none;border-radius:9px;padding:8px 11px;flex-shrink:0;cursor:pointer} .exBtn::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:44px} .exMain{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px} .exScroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch} .exQ{flex-shrink:0} .askRow{display:flex;align-items:center;gap:9px;margin-bottom:11px} .aiAv{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#6D6EFF,#4041CE);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0} .askRow .who{font-size:12px;font-weight:850;color:#AEB6D8} .speakInd{margin-left:auto;display:none;align-items:center;gap:7px;font-size:11px;font-weight:800;color:#9DB4FF} .speakInd.on{display:flex} .speakInd .sw{display:flex;align-items:center;gap:2px;height:14px} .speakInd .sw i{width:2.5px;border-radius:2px;background:#9DB4FF;height:4px;animation:wv .7s ease-in-out infinite} .speakInd .sw i:nth-child(2){animation-delay:-.2s}.speakInd .sw i:nth-child(3){animation-delay:-.4s}.speakInd .sw i:nth-child(4){animation-delay:-.1s} .exQ .q{font-size:20px;font-weight:800;line-height:1.5;letter-spacing:-0.01em} .exQ .prep{font-size:12px;font-weight:750;color:#FFD37A;margin-top:12px} .exMat{margin-top:12px;background:rgba(93,120,255,.14);border-radius:11px;padding:9px 11px;display:inline-block} .exMat b{font-size:9.5px;font-weight:900;color:#9DB4FF} .exMat .c{display:inline-block;font-size:10.5px;font-weight:850;color:#C9D4FF;background:rgba(93,120,255,.2);border-radius:7px;padding:4px 8px;margin:5px 5px 0 0} /* 셀프뷰 — 예전엔 flex:1로 남는 높이를 다 먹어서, 화면이 넓거나 질문이 짧으면 프레임이 가로로만 늘어난 띠가 됐다(영상은 cover라 안 찌그러지지만 얼굴이 잘린다). 비율을 4:3으로 고정하고 폭·높이에 상한을 둬 어느 화면에서도 사람 얼굴 크기로 보이게 한다. */ .exCam{flex:0 0 auto;height:min(34dvh,300px);aspect-ratio:4/3;max-width:100%;margin:16px auto 0;position:relative} @media(max-height:680px){.exCam{height:26dvh}} .camwrap{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#101322;border:1px solid rgba(255,255,255,.08)} .camwrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:none} .camwrap.on video{display:block} /* 카메라 꺼짐 안내 — grid에선 텍스트 노드와 이 별개 행으로 잡혀 두 줄이 위아래로 벌어졌다. */ .camoff{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:#8891B8;font-size:12.5px;font-weight:700;padding:18px;line-height:1.6} .camwrap.on .camoff{display:none} .camtag{position:absolute;left:12px;top:12px;font-size:11px;font-weight:800;color:#fff;background:rgba(0,0,0,.42);border-radius:7px;padding:4px 9px;backdrop-filter:blur(4px)} .camdot{position:absolute;right:12px;top:12px;display:none;align-items:center;gap:5px;font-size:9.5px;font-weight:850;color:#fff;background:rgba(0,0,0,.4);border-radius:7px;padding:4px 8px} .camwrap.on .camdot{display:flex} .camdot i{width:7px;height:7px;border-radius:50%;background:#FF5A5F;animation:blk 1.1s infinite} .exam-overlay .composerwrap{margin-top:12px;flex-shrink:0;max-width:none} .cacts{display:flex;gap:8px;flex:1;justify-content:flex-end;min-width:0} .cacts .exc{font-size:13px;font-weight:850;padding:12px 15px;border-radius:var(--r-pill,12px);white-space:nowrap;border:none;cursor:pointer;color:#fff;background:linear-gradient(180deg,#6465F5,#4E4FE8)} .cacts .exc.ghost{background:rgba(255,255,255,.1);color:#DDE2F5;border:1px solid rgba(255,255,255,.16)} .cacts .exc:disabled{opacity:.5} /* A!SK 응시 — 대화이력 드로어(기본 숨김, 🗂️ 토글로 우측 슬라이드). v8 aisk-exam.html 이식 */ .exam-overlay .exConvo{display:none;flex-direction:column;min-height:0;background:#0C0F1C;border-left:1px solid rgba(255,255,255,.07)} .exam-overlay.drawer .exConvo{display:flex;position:absolute;top:0;right:0;bottom:0;width:84%;max-width:340px;z-index:5;box-shadow:-18px 0 40px rgba(0,0,0,.5);animation:exfade .2s ease} .exam-overlay.drawer::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:4} .exConvo .convoHd{font-size:12.5px;font-weight:850;color:#C6CDE8;padding:16px 16px 12px;display:flex;align-items:center;gap:8px;flex-shrink:0} .exConvo .convoHd .cnt{margin-left:auto;font-size:11px;font-weight:800;color:#7C86AE;background:rgba(255,255,255,.06);border-radius:7px;padding:3px 9px} /* 응시 무대는 색이 따로지만 닫기 ✕ 의 자리·크기는 팝업(.sheetx)과 같게 둔다 */ .exConvo .convoHd .cx{width:34px;height:34px;margin:-6px -8px -6px 0;border-radius:50%;display:grid;place-items:center; font-size:15px;line-height:1;color:#7C86AE;background:none;border:none;cursor:pointer;font-family:inherit} .exConvo .convoList{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 12px;display:flex;flex-direction:column;gap:12px} .exConvo .convoFine{font-size:11px;color:#5C6688;font-weight:650;line-height:1.6;padding:10px 16px 16px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0} .cvItem{display:flex;flex-direction:column;gap:5px} .cvItem.me{align-items:flex-end} .cvWho{font-size:11px;font-weight:850;letter-spacing:.02em;display:flex;align-items:center;gap:6px} .cvItem.ai .cvWho{color:#9DB4FF}.cvItem.me .cvWho{color:#8FD6B0} .cvDot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0} .cvBubble{font-size:12px;font-weight:600;line-height:1.55;border-radius:12px;padding:10px 12px} .cvItem.ai .cvBubble{background:rgba(93,120,255,.14);color:#DCE3FF;border-radius:4px 12px 12px 12px} .cvItem.me .cvBubble{background:rgba(255,255,255,.06);color:#CDD4E6;border-radius:12px 4px 12px 12px;align-self:flex-end;max-width:92%} .cvItem.cur .cvBubble{outline:1.5px solid rgba(157,180,255,.4)} @media(prefers-reduced-motion:reduce){.exam-overlay *{animation:none!important}} /* 리포트 */ .qitem{border:1px solid var(--line);border-radius:16px;margin-top:10px;background:var(--card);overflow:hidden;box-shadow:var(--sh-card)} .qhead{display:flex;align-items:center;gap:11px;padding:14px 15px;width:100%;background:none;border:none;text-align:left;cursor:pointer} .qnbadge{width:22px;height:22px;border-radius:7px;background:var(--brand-soft);color:var(--brand-deep);font-size:11px;font-weight:850;display:flex;align-items:center;justify-content:center;flex-shrink:0} .qhmain{flex:1;min-width:0} .qht{display:block;font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .qho{display:block;font-size:11.5px;color:var(--ink3);font-weight:650;margin-top:2px;line-height:1.4} .qsc{font-size:16px;font-weight:900;flex-shrink:0;width:30px;text-align:center;font-variant-numeric:tabular-nums} .qsc.hi{color:var(--good)}.qsc.mid{color:var(--brand-deep)}.qsc.lo{color:var(--bad)} .qarw{font-size:11px;color:var(--ink4);transition:transform .2s;flex-shrink:0} .qitem.open .qarw{transform:rotate(180deg)} .qbody{display:none;padding:2px 15px 16px} .qitem.open .qbody{display:block} .chain{display:flex;gap:5px;margin-top:4px} .cbox{flex:1;border-radius:9px;padding:7px 3px;text-align:center;font-size:10.5px;font-weight:850} .cbox.hit{background:var(--brand-soft);color:var(--brand-deep)} .cbox.miss{background:var(--fill);color:var(--ink4)} .qmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .qmeta span{font-size:10.5px;font-weight:800;color:var(--ink3);background:var(--fill);border-radius:7px;padding:5px 9px} .qmeta .ok{color:var(--good)}.qmeta .no{color:var(--bad)} .axis{margin-top:12px} .axrow{display:flex;align-items:center;gap:9px;margin-top:8px} .axl{font-size:11px;font-weight:750;color:var(--ink3);width:72px;flex-shrink:0} .axbar{flex:1;height:6px;border-radius:99px;background:var(--fill-strong);overflow:hidden} .axfill{height:100%;border-radius:99px;background:linear-gradient(90deg,#8B8CF5,#5B5CF0)} .axv{font-size:10.5px;font-weight:850;color:var(--brand-deep);width:20px;text-align:right} .quote{font-size:11.5px;font-weight:600;color:var(--ink2);background:var(--raise);border-radius:9px;padding:9px 11px;margin-top:12px;line-height:1.6} .quote i{color:var(--brand-deep);font-style:normal;font-weight:800} .oneline{font-size:11.5px;font-weight:700;color:var(--ink3);margin-top:9px;line-height:1.5} .oneline.warn{color:var(--warn)}.oneline.good{color:var(--good)} .aitip{font-size:11.5px;font-weight:700;color:var(--ink2);margin-top:9px;line-height:1.55;background:var(--brand-soft);border-radius:9px;padding:9px 11px} .aitip b{color:var(--brand-deep)} .covg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px} .cv{font-size:10.5px;font-weight:800;border-radius:8px;padding:8px 9px;text-align:center} .cv.ok{color:var(--good);background:var(--good-soft)} .cv.no{color:var(--ink4);background:var(--fill)} .seclab{font-size:12px;font-weight:850;color:var(--ink3);margin:28px 2px 2px} .rstats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px} .rt2{background:var(--fill);border:1px solid var(--fill-line);border-radius:14px;padding:15px 8px;text-align:center} .rt2 b{display:block;font-size:21px;font-weight:900;color:var(--brand-deep);font-variant-numeric:tabular-nums} .rt2 span{display:block;font-size:11px;font-weight:750;color:var(--ink3);margin-top:3px} .ring{position:relative;width:110px;height:110px;border-radius:50%;background:conic-gradient(var(--brand) var(--deg,0deg),var(--fill-strong) 0);display:grid;place-items:center;flex-shrink:0} .ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--card)} .ring b{position:relative;font-size:32px;font-weight:900;color:var(--brand-deep);line-height:1} .ring span{position:relative;font-size:10px;font-weight:750;color:var(--ink3);margin-top:3px} .rhead{display:flex;align-items:center;gap:18px;margin-top:4px} .rhead .rv .eye{font-size:12px;font-weight:800;color:var(--brand)} .rhead .rv h1{font-size:22px;font-weight:850;margin-top:5px;line-height:1.3;letter-spacing:-.02em} .rhead .rv p{font-size:12.5px;color:var(--ink3);font-weight:650;margin-top:7px;line-height:1.55} .engnote{font-size:10px;color:var(--ink4);font-weight:700;text-align:center;margin-top:14px} /* ═══ SKCT 모의고사 — 표·실전 도구(계산기·메모장) ═══ */ .qtable{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:12.5px} .qtable table{width:100%;border-collapse:collapse} .qtable th,.qtable td{padding:8px 9px;text-align:center;border-bottom:1px solid var(--line);border-right:1px solid var(--line)} .qtable th{background:var(--brand-soft);font-weight:850;color:var(--brand-deep)} .qtable td{font-weight:700;color:var(--ink2)} .qtable tr:last-child td{border-bottom:none} .qtable th:last-child,.qtable td:last-child{border-right:none} .toolopen{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:16px;font-size:12.5px;font-weight:800;color:var(--ink3);background:var(--fill);border:1.5px solid var(--fill-line);border-radius:12px;padding:12px} .toolopen b{color:var(--brand-deep)} .sheettitle{font-size:14px;font-weight:850;margin-bottom:14px} .tooltabs{display:flex;gap:6px;margin-bottom:14px} .ttab{flex:1;font-size:12.5px;font-weight:800;color:var(--ink3);background:var(--fill);border:1.5px solid var(--fill-line);border-radius:10px;padding:9px} .ttab.on{color:var(--brand-deep);background:var(--brand-soft);border-color:var(--brand)} .memoEl{width:100%;height:184px;resize:none;border:1.5px solid var(--fill-line);border-radius:12px;padding:12px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.6;background:var(--fill);outline:none} .memoEl:focus{border-color:var(--brand)} .calcsub{min-height:16px;text-align:right;font-size:12px;font-weight:700;color:var(--ink4);font-variant-numeric:tabular-nums;padding:0 6px} .calcdisp{border:1.5px solid var(--fill-line);border-radius:12px;background:var(--fill);padding:12px 14px;text-align:right;font-size:26px;font-weight:850;font-variant-numeric:tabular-nums;color:var(--ink);overflow:hidden;white-space:nowrap;margin-top:2px} .calcgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px} .calcgrid .ck{border:1.5px solid var(--fill-line);background:var(--card);border-radius:12px;font-size:17px;font-weight:800;color:var(--ink);padding:14px 0} .calcgrid .ck:active{background:var(--fill)} .calcgrid .ck.op{color:var(--brand-deep);background:var(--brand-soft);border-color:var(--brand-line)} .calcgrid .ck.fn{color:var(--ink3);background:var(--fill);font-size:15px} .calcgrid .ck.eq{grid-row:span 2;background:linear-gradient(180deg,#6465F5,#4E4FE8);color:#fff;border:none} .calcgrid .ck.zero{grid-column:span 2} .toolnote{font-size:11px;color:var(--ink4);font-weight:650;margin-top:12px;line-height:1.55} /* 해설 속 `수식` 조각 — 백틱을 그대로 흘리지 않고 코드 칩으로 보여준다(components/ui/Sol.js) */ .solcode{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--fill); border:1px solid var(--fill-line);border-radius:6px;padding:1px 5px;color:var(--ink2);white-space:nowrap} /* ═══ 실전 도구 팔레트(계산기·메모장·그림판) — components/ExamTools.js ═══ 문제를 덮지 않게 '띄워 놓고' 쓰는 창. 데스크톱은 헤더를 잡아 끌어 옮기고, 모바일은 하단 패널로 눕는다. 평소엔 접힘(막대만) 상태. */ /* 막대는 왼쪽 아래 — 창 기본 자리(왼쪽 위·오른쪽)와 겹치지 않는 유일한 구석이다. */ .extbar{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:calc(84px + var(--kbh,0px) + env(safe-area-inset-bottom,0px));z-index:73;display:flex;flex-direction:column;gap:7px} .extbtn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-size:11.5px;font-weight:850;color:var(--ink3); background:var(--card);border:1.5px solid var(--fill-line);border-radius:var(--r-pill);padding:8px 13px; box-shadow:0 6px 18px rgba(48,52,120,.14);cursor:pointer;font-family:inherit} .extbtn.on{color:var(--brand-deep);background:var(--brand-soft);border-color:var(--brand)} .extwin{position:fixed;z-index:71;display:none;width:268px;background:var(--card);border:1.5px solid var(--line); border-radius:14px;box-shadow:0 20px 44px rgba(20,24,60,.24);overflow:hidden} .extwin.on{display:block} .extwin.top{z-index:72} .extwin-hd{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 13px;background:var(--fill); border-bottom:1px solid var(--fill-line);cursor:grab;touch-action:none;user-select:none} .extwin-hd:active{cursor:grabbing} .extwin-t{flex:1;font-size:12px;font-weight:850;color:var(--ink2)} .extwin-x{font-size:12px;font-weight:850;color:var(--ink4);background:none;border:none;padding:2px 4px;cursor:pointer;font-family:inherit} .extwin-x:hover{color:var(--bad)} .extwin-bd{padding:11px 12px 13px} .extwin-bd .memoEl{height:150px} .extwin-bd .calcdisp{font-size:22px;padding:9px 12px} .extwin-bd .calcgrid .ck{padding:10px 0;font-size:15px} .extwin-bd .toolnote{margin-top:9px} .drawcv{width:100%;height:180px;background:#fff;border:1.5px solid var(--fill-line);border-radius:10px; touch-action:none;display:block;cursor:crosshair} .drawbar{display:flex;gap:6px;margin-top:9px} .dbtn{flex:1;font-size:11.5px;font-weight:800;color:var(--ink3);background:var(--fill); border:1.5px solid var(--fill-line);border-radius:9px;padding:7px 0;cursor:pointer;font-family:inherit} .dbtn.on{color:var(--brand-deep);background:var(--brand-soft);border-color:var(--brand)} /* 모바일 — 끌어 옮기는 대신 하단에 눕힌다(위치 좌표 무시). */ @media (max-width:759px){ .extbar{right:10px;bottom:calc(78px + var(--kbh,0px) + env(safe-area-inset-bottom,0px));flex-direction:row;left:10px;justify-content:flex-end;flex-wrap:wrap} .extwin{left:8px!important;right:8px;top:auto!important;bottom:calc(126px + var(--kbh,0px) + env(safe-area-inset-bottom,0px));width:auto} .extwin-hd{cursor:default} .extwin-bd .memoEl{height:120px} .drawcv{height:150px} } /* ═══ 홈 허브 — 메뉴 그리드 ═══ */ .menugrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px} .menucard{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:15px 14px;box-shadow:var(--sh-card);text-align:left;transition:transform .12s,border-color .12s} .menucard:hover{transform:translateY(-2px);border-color:var(--brand-line)} .menucard.wide{grid-column:span 2} .menucard .me{font-size:24px} .menucard .mt{font-size:14px;font-weight:850;color:var(--ink);margin-top:2px} .menucard .md{font-size:11.5px;font-weight:650;color:var(--ink3);line-height:1.5} .menucard .mgo{margin-top:auto;font-size:11px;font-weight:850;color:var(--brand-deep)} .menucard.off{opacity:.5;pointer-events:none} /* ── PatternRow — 라벨 + 우측 캡슐 한 줄 (홈·랜딩 공통) ── */ .patrow{display:flex;align-items:center;gap:10px;padding:13px 0;border-top:1px solid var(--line)} .patrow:first-of-type{border-top:none} .patrow .pl{flex:1;font-size:13px;font-weight:700;color:var(--ink2);line-height:1.5} .patrow .pl i{font-style:normal;color:var(--brand-deep);font-weight:800} .patrow .pc{font-size:11px;font-weight:850;color:var(--ink2);background:var(--fill);border:1px solid var(--fill-line);border-radius:var(--r-pill);padding:3px 9px;flex-shrink:0} .patrow .pc.warn{color:var(--warn);background:var(--warn-soft);border-color:transparent} .patrow .pc.good{color:var(--good);background:var(--good-soft);border-color:transparent} /* ── CardFace — 경험 카드 '앞면' · 앱 브랜드 인디고 카드(카드함·CTA와 동일 계열) — 플로우 미리보기·랜딩 예시 공용 ── */ .cardface{position:relative;background:linear-gradient(150deg,#6E6FFF 0%,#5B5CF0 48%,#4E4FE8 100%);border:1px solid rgba(255,255,255,.20);border-radius:20px;padding:20px 18px;margin-top:16px;color:#fff;box-shadow:0 16px 34px rgba(78,79,232,.34),inset 0 1px 0 rgba(255,255,255,.14);overflow:hidden} .cardface::after{content:"";position:absolute;right:-34px;top:-40px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 66%)} .cardface>*{position:relative;z-index:1} .cardface .cf-lb{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:900;color:rgba(255,255,255,.86)} .cardface .cf-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .cardface .cf-tag{font-size:11px;font-weight:850;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-pill);padding:4px 11px;color:#fff} .cardface .cf-title{font-size:20px;font-weight:850;line-height:1.35;margin-top:12px;letter-spacing:-.02em;color:#fff} .cardface .cf-sum{font-size:13px;font-weight:550;line-height:1.7;margin-top:10px;color:rgba(255,255,255,.92)} .cardface .cf-meta{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.74);margin-top:12px} .cardface .rg{margin-top:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);color:#fff;font-weight:800;font-family:inherit;font-size:12px;border-radius:var(--r-pill);padding:7px 13px;display:inline-flex;align-items:center;gap:5px} .cardface .aithink{color:rgba(255,255,255,.92)} .cardface .aithink i{background:#fff} /* ── StepShow — 랜딩 공통: 이 기능이 해주는 일을 단계 탭으로 (탭 전환 + 자동 진행) ── 마크업: .stepshow[data-auto=ms] > .ss-tabs>.ss-tab*n + .ss-panels>.ss-panel*n 바인딩: app.js HS.stepshow() — 페이지 로드 시 1회 호출 */ .stepshow{margin-top:24px} .ss-tabs{display:flex;gap:7px} .ss-tab{flex:1;font-family:inherit;font-size:11.5px;font-weight:800;color:var(--ink3);background:var(--fill);border:1.5px solid var(--fill-line);border-radius:13px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;transition:color .15s,background .15s,border-color .15s;line-height:1.3;text-align:center} .ss-tab i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--card);color:var(--ink4);font-size:10.5px;font-weight:900;display:grid;place-items:center;flex-shrink:0} .ss-tab.on{color:var(--brand-deep);background:var(--brand-soft);border-color:var(--brand)} .ss-tab.on i{background:var(--brand);color:var(--page)} .ss-panel{display:none;margin-top:14px} .ss-panel.on{display:block;animation:stepIn .34s cubic-bezier(.2,.7,.3,1)} @media (prefers-reduced-motion:reduce){.ss-panel.on{animation:none}} @media (min-width:900px){.ss-tab{font-size:13px;padding:12px 6px}.ss-tab i{width:22px;height:22px;font-size:11.5px}} /* ── 폼 공통(React 포팅 이전엔 화면별