/* ================================================
위너넷 아카이브 — 사용자단 내부 페이지 컴포넌트 (시안 D / .pk .pk-light)
landing-c.css(토큰·헤더·버튼·FAQ) 위에 얹는 "내부 페이지" 컴포넌트 모음.
pk_header / pk_footer 와 함께 사용. 모든 색은 --pk-* 토큰 사용.
================================================ */
/* ──────────────────────────────────────────────
헤더 네비게이션 (pkh-*) — .pk-header(다크 스코프) 내부
─────────────────────────────────────────────── */
/* 헤더는 항상 다크 — 토큰 상속(.pk-light .pk-header)이 환경에 따라 안 먹는 경우가 있어
헤더 텍스트/면 색은 토큰 의존 없이 '명시 리터럴'로 둔다(견고). */
.pk-header .pkh-inner { gap: 38px; max-width: 1480px; padding: 0 28px; } /* .pk .pk-inner(1160)보다 구체적으로 — 넓게 */
.pkh .pk-logo { -ms-flex-negative: 0; flex-shrink: 0; white-space: nowrap; margin-right: 4px; color: #FFFFFF; }
.pkh .pk-logo b { color: #A9B6FF; }
.pkh-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
.pkh-item { position: relative; }
.pkh-item > a {
display: block; padding: 0 15px; line-height: 72px; height: 72px;
font-size: 16px; font-weight: 600; color: rgba(233,238,248,0.82); white-space: nowrap;
-webkit-transition: color .2s ease; transition: color .2s ease;
}
.pkh-item > a:hover, .pkh-item.on > a { color: #FFFFFF; }
.pkh-item.on > a { font-weight: 700; }
.pkh-item.has-sub > a:after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; -webkit-transform: translateY(-2px) rotate(45deg); transform: translateY(-2px) rotate(45deg); opacity: .6; }
/* 드롭다운 (다크 헤더 톤 유지) */
.pkh-sub {
position: absolute; top: 66px; left: 0; min-width: 190px;
background: #1C243C; border: 1px solid rgba(255,255,255,0.10); border-radius: 14px;
box-shadow: 0 18px 44px rgba(0,0,0,0.40); padding: 8px; opacity: 0; visibility: hidden;
-webkit-transform: translateY(8px); transform: translateY(8px);
-webkit-transition: all .22s cubic-bezier(.76,0,.24,1); transition: all .22s cubic-bezier(.76,0,.24,1); z-index: 60;
}
.pkh-item.has-sub:hover .pkh-sub { opacity: 1; visibility: visible; top: 62px; -webkit-transform: none; transform: none; }
.pkh-sub a { display: block; padding: 10px 14px; font-size: 15px; font-weight: 600; color: rgba(233,238,248,0.85); border-radius: 9px; }
.pkh-sub a:hover { background: rgba(107,123,255,0.22); color: #FFFFFF; }
.pkh-util { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; -ms-flex-negative: 0; flex-shrink: 0; }
.pkh-search { position: relative; }
.pkh-search input {
width: 200px; height: 42px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.08); color: #FFFFFF; padding: 0 58px 0 18px; font-size: 14px;
-webkit-transition: width .28s cubic-bezier(.76,0,.24,1), border-color .2s ease, background .2s ease, box-shadow .2s ease;
transition: width .28s cubic-bezier(.76,0,.24,1), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.pkh-search input::-webkit-input-placeholder { color: rgba(233,238,248,0.45); }
.pkh-search input::placeholder { color: rgba(233,238,248,0.45); }
.pkh-search input:focus { outline: none; width: 290px; border-color: #6B7BFF; background: rgba(255,255,255,0.14); box-shadow: 0 0 0 3px rgba(107,123,255,0.22); }
/* 검색어 지우기(×) — 기본 회색이 안 보여서 흰색 커스텀 아이콘으로 교체 */
.pkh-search input::-webkit-search-cancel-button {
-webkit-appearance: none; appearance: none; height: 16px; width: 16px; margin-right: 2px; cursor: pointer; opacity: .65;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pkh-search input::-webkit-search-cancel-button:hover { opacity: 1; }
.pkh-search button { position: absolute; right: 8px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: none; border: 0; color: rgba(233,238,248,0.7); font-size: 16px; cursor: pointer; padding: 6px; }
.pkh .pkh-me { font-size: 15px; font-weight: 700; color: #EAF0FA; white-space: nowrap; }
.pkh .pkh-me:hover { color: #A9B6FF; }
/* 헤더 내 버튼 — 다크 위 명시 색 */
.pkh .pk-btn.ghost { background: rgba(255,255,255,0.06); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20); }
.pkh .pk-btn.ghost:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; }
.pkh .pk-btn.primary { background: #6B7BFF; color: #fff; box-shadow: 0 6px 18px rgba(107,123,255,0.35); }
.pkh .pk-btn.primary:hover { background: #7E8DFF; color: #fff; }
.pkh .pk-burger { color: #FFFFFF; }
.pkh-mobile-auth { display: none; }
.pkh .pk-burger { display: none; }
/* 드로어 뒤 어둠막 — 데스크톱에선 항상 숨김 */
.pkh-backdrop { display: none; }
/* 모바일/태블릿 드로어 — 메뉴가 빽빽해 991px에선 데스크톱 줄이 넘쳐서 1100px부터 햄버거로 전환 */
@media (max-width: 1100px) {
/* ★ 가로 넘침 차단 = overflow-x:CLIP (hidden 아님).
hidden 은 스크롤 컨테이너를 만들어 그 안의 position:fixed 자식이 뷰포트가 아니라 문서 기준으로 잡혀
모바일에서 드로어가 스크롤을 따라 문서 위치에 붙어버린다(대표적 fixed 버그). clip 은 스크롤 컨테이너를
만들지 않아 fixed 가 정상(뷰포트 기준)이면서 넘침은 잘라낸다. (아래 드로어는 화면 밖 슬라이드 대신
제자리 페이드라 애초에 넘침도 없음 — clip 은 이중 안전장치.) */
html { overflow-x: clip; }
/* ★ 모바일 햄버거 드로어 안 보이던 버그 근본 수정:
.pk-header 의 backdrop-filter 가 position:fixed 자식(.pkh-nav 드로어)의 containing block 이 되어
드로어가 헤더(72px) 컨텍스트에 갇혀(특히 iOS Safari) 열어도 화면에 안 나타났다.
모바일에선 backdrop-filter 제거 → 드로어가 뷰포트 기준으로 정상 슬라이드. 헤더 배경은 88~92% 불투명이라 blur 없어도 무방. */
.pk-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* ★ 모바일: 헤더 sticky→fixed. sticky 는 배경 스크롤 잠금(body position:fixed) 시 스크롤 컨텍스트가 사라져
헤더가 문서 맨 위로 튕겨 화면에서 사라진다. fixed 는 뷰포트에 고정돼 잠금 중에도 항상 상단에 유지.
body padding-top 으로 본문이 fixed 헤더 뒤로 숨지 않게 보정. */
.pk-header { position: fixed; top: 0; left: 0; right: 0; }
body.pk { padding-top: 72px; }
/* 모바일 헤더 — 로고+이름+햄버거가 항상 들어가도록 간격/패딩 축소(데스크톱 38px·28px는 너무 큼). */
.pk-header .pkh-inner { gap: 10px; padding: 0 16px; }
.pkh-util .pkh-search { display: none; }
/* 로그인 이름(○○님)은 헤더 상단 유지(메뉴 안에 들어가면 어색). 로그아웃 버튼만 드로어로 이동해 햄버거 자리 확보. */
.pkh-util .pk-btn.ghost { display: none; }
.pkh .pk-burger { display: block; margin-left: 8px; }
/* ★ 드로어: 화면 밖 슬라이드(translateX)는 가로 넘침을 만들어 위 overflow 처리가 필요했고, 그 overflow 가
fixed 를 깨뜨렸다. 그래서 슬라이드 대신 '제자리 페이드'(right:0 뷰포트 안에 늘 있고 visibility/opacity 로
숨김) → 넘침 0 · fixed 안전 · 스크롤에 항상 뷰포트 상단 고정. */
.pkh-nav {
position: fixed; top: 72px; right: 0; width: 300px; max-width: 86vw; height: calc(100vh - 72px);
background: var(--pk-surface); border-left: 1px solid var(--pk-line); box-shadow: var(--pk-shadow-lg);
-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
-webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 0; margin: 0; padding: 12px;
overflow-y: auto; opacity: 0; visibility: hidden;
-webkit-transition: opacity .25s, visibility .25s; transition: opacity .25s, visibility .25s; z-index: 55;
}
.pkh-nav.open { opacity: 1; visibility: visible; }
/* 어둠막 */
/* z-index 45 < 헤더 스태킹 컨텍스트(.pk-header z-50). 드로어(.pkh-nav)는 헤더의 자식이라
헤더 컨텍스트(50) 안에 갇히므로, 문서레벨 어둠막이 54면 드로어 위를 덮어 클릭을 가로챘다.
45로 낮추면 드로어는 클릭 가능(헤더 컨텍스트가 어둠막보다 위), 페이지 본문은 계속 어두워진다. */
.pkh-backdrop { display: block; position: fixed; inset: 72px 0 0 0; background: rgba(10,14,25,0.42); opacity: 0; visibility: hidden; -webkit-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; z-index: 45; }
.pkh-backdrop.open { opacity: 1; visibility: visible; }
/* 드로어 열림 시 배경 스크롤 잠금.
★ overflow:hidden 은 (특히 스크롤된 상태에서) sticky 헤더를 풀어 문서 위로 튕겨내(헤더 사라짐) + iOS 는
스크롤도 안 잠긴다. → position:fixed 로 페이지 전체를 현재 스크롤 위치에 얼린다(헤더 포함 그대로 유지·
스크롤 진짜 잠금). JS(pkhOpen)가 body.top 에 -scrollY 를 넣고 닫을 때 복원.
드로어(#pkhNav)는 body 직속 position:fixed 라 fixed body 안에서도 뷰포트 기준(top:72) 유지된다. */
body.pkh-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.pkh-item { width: 100%; }
.pkh-item > a { line-height: normal; height: auto; padding: 14px 12px; border-radius: 10px; }
/* ★ 드로어는 흰 배경(--pk-surface). 항목 글자는 데스크톱 헤더용 밝은색이 아니라 어둡게(안 보이던 것 수정).
드로어를 body 직속으로 옮기면 다크 헤더 스코프를 벗어나 배경이 흰색이 되므로 명시 색 지정 필수. */
.pkh-nav .pkh-item > a { color: var(--pk-ink); }
.pkh-nav .pkh-item > a:hover { background: var(--pk-primary-soft); color: var(--pk-primary-text); }
.pkh-nav .pkh-item.on > a { color: var(--pk-primary-text); }
.pkh-nav .pkh-item.has-sub > a:after { border-color: var(--pk-gray); }
.pkh-nav .pkh-sub a { color: var(--pk-ink-2); }
.pkh-nav .pkh-sub a:hover { color: var(--pk-primary-text); }
.pkh-item.has-sub > a:after { float: right; margin-top: 6px; }
.pkh-sub {
position: static; opacity: 1; visibility: visible; -webkit-transform: none; transform: none;
box-shadow: none; border: 0; background: transparent; padding: 0 0 6px 12px; display: none;
}
.pkh-item.expand .pkh-sub { display: block; }
.pkh-item.expand.has-sub > a:after { -webkit-transform: translateY(-2px) rotate(-135deg); transform: translateY(-2px) rotate(-135deg); }
.pkh-mobile-auth { display: block; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--pk-line); }
.pkh-mobile-auth a { display: block; padding: 12px; font-size: 15px; font-weight: 700; color: var(--pk-ink); border-radius: 10px; }
.pkh-mobile-auth a:hover { background: var(--pk-primary-soft); color: var(--pk-primary-text); }
}
/* ──────────────────────────────────────────────
아이콘 토큰 (.ico) — 흩어진 이모지(✓ℹ!⚠🔒★…)를 단일 SVG 세트로 통일.
mask + currentColor → 쓰이는 맥락의 글자색을 그대로 따라가(토큰 일관성).
사용: · 크기=font-size(1em), 색=color 상속.
라인 아이콘은 stroke, 채움 아이콘(star·play)은 fill — mask는 알파만 사용.
─────────────────────────────────────────────── */
.ico {
display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em;
background-color: currentColor; -ms-flex-negative: 0; flex-shrink: 0;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-image: var(--i); mask-image: var(--i);
}
.ico-info { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); }
.ico-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.ico-alert { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.ico-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.ico-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E"); }
.ico-heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
.ico-heart-fill { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
.ico-play { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E"); }
.ico-arrow { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E"); }
.ico-compass { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E"); }
.ico-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); }
.ico-chart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='20' x2='12' y2='10'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='16'/%3E%3C/svg%3E"); }
.ico-clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.ico-gift { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E"); }
.ico-coins { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M18.09 10.37A6 6 0 1 1 10.34 18'/%3E%3Cpath d='M7 6h1v4'/%3E%3Cpath d='m16.71 13.88.7.71-2.82 2.82'/%3E%3C/svg%3E"); }
.ico-download{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); }
.ico-trophy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E"); }
.ico-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.ico-edit { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.ico-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); }
.ico-calendar{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
/* ──────────────────────────────────────────────
페이지 셸
─────────────────────────────────────────────── */
.pk-main { min-height: 62vh; background: var(--pk-page); padding-bottom: 88px; } /* 본문↔푸터 간격 확보 */
.pk-container { max-width: 1480px; margin: 0 auto; padding: 0 28px; } /* 양옆 답답함 해소 — 더 넓게(헤더 밴드와 정렬) */
.pk-narrow { max-width: 880px; }
.pk-xnarrow { max-width: 560px; }
@media (max-width: 600px){ .pk-container { padding: 0 18px; } }
.pk-section { padding: 40px 0 72px; }
/* 페이지 헤더 (제목 밴드) */
.pk-phead { padding: 44px 0 32px; }
.pk-phead.center { text-align: center; }
.pk-breadcrumb { font-size: 15px; color: var(--pk-gray-2); margin-bottom: 13px; }
.pk-breadcrumb a { color: var(--pk-gray-2); }
.pk-breadcrumb a:hover { color: var(--pk-primary-text); }
.pk-breadcrumb span { margin: 0 6px; opacity: .5; }
/* 가운데 정렬 헤더의 단일 라벨은 작아 보여서 — 강조 라벨로(accent·굵게·자간) 전역 처리 */
.pk-phead.center .pk-breadcrumb { font-size: 15px; font-weight: 800; color: var(--pk-primary-text); letter-spacing: .06em; }
.pk-phead h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: var(--pk-ink); margin: 0; }
.pk-phead .sub { font-size: 18px; color: var(--pk-gray); margin-top: 12px; line-height: 1.65; word-break: keep-all; text-wrap: balance; }
.pk-eyebrow2 { display: inline-block; font-size: 17px; font-weight: 800; letter-spacing: .1em; color: var(--pk-primary-text); margin-bottom: 12px; }
/* 섹션 타이틀(본문 내) */
.pk-h2 { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; color: var(--pk-ink); margin: 0 0 18px; }
.pk-h3 { font-size: 19px; font-weight: 800; color: var(--pk-ink); margin: 0 0 14px; }
/* ──────────────────────────────────────────────
버튼 추가 변형 (landing-c .pk-btn 보완)
─────────────────────────────────────────────── */
.pk-btn.block { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; }
.pk-btn.outline { background: transparent; color: var(--pk-primary-text); box-shadow: inset 0 0 0 1.5px var(--pk-primary); }
.pk-btn.outline:hover { background: var(--pk-primary); color: #fff; }
.pk-btn.soft { background: var(--pk-primary-soft); color: var(--pk-primary-text); }
.pk-btn.soft:hover { background: var(--pk-primary); color: #fff; }
.pk-btn.xs { height: 36px; padding: 0 16px; font-size: 13px; }
.pk-btn.danger { background: #E5484D; color: #fff; }
.pk-btn.danger:hover { background: #D13A3F; color: #fff; }
.pk-link { color: var(--pk-primary-text); font-weight: 700; }
.pk-link:hover { text-decoration: underline; }
/* ──────────────────────────────────────────────
카드 / 패널 (라이트 surface)
─────────────────────────────────────────────── */
.pk-card { background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: var(--pk-radius-sm); box-shadow: var(--pk-shadow); }
.pk-card.pad { padding: 26px; }
.pk-card.pad-lg { padding: 34px; }
.pk-card-head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pk-card-head h3 { font-size: 19px; font-weight: 800; color: var(--pk-ink); margin: 0; }
.pk-grid-2 { display: -ms-grid; display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.pk-grid-3 { display: -ms-grid; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.pk-grid-4 { display: -ms-grid; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
@media (max-width: 860px){ .pk-grid-2,.pk-grid-3,.pk-grid-4 { grid-template-columns: 1fr; } }
/* ──────────────────────────────────────────────
콘텐츠 카드 (_card.php / .content-card)
─────────────────────────────────────────────── */
.card-grid { display: -ms-grid; display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
@media (max-width: 1024px){ .card-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 760px){ .card-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){ .card-grid { grid-template-columns: 1fr; } }
.content-card {
display: block; background: var(--pk-surface); border: 1px solid var(--pk-line);
border-radius: var(--pk-radius-sm); overflow: hidden;
-webkit-transition: all .3s cubic-bezier(.76,0,.24,1); transition: all .3s cubic-bezier(.76,0,.24,1);
}
.content-card:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); box-shadow: var(--pk-shadow); border-color: rgba(61,90,254,0.4); }
.content-card .thumb { position: relative; aspect-ratio: 16/10; background: var(--pk-surface-2); overflow: hidden; }
.content-card .thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.content-card .thumb-placeholder { width: 100%; height: 100%; background: -webkit-linear-gradient(135deg, var(--pk-primary), #9A7BFF); background: linear-gradient(135deg, var(--pk-primary), #9A7BFF); opacity: .85; }
.content-card .thumb .time { position: absolute; right: 8px; bottom: 8px; background: rgba(15,20,35,0.78); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.content-card .thumb .badge-new { position: absolute; left: 8px; top: 8px; background: var(--pk-accent); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
/* 배지 묶음(우수 왕관 + NEW) — 썸네일 좌상단 */
.content-card .thumb .card-badges { position: absolute; left: 8px; top: 8px; display: -webkit-box; display: flex; gap: 5px; -webkit-box-align: center; align-items: center; z-index: 2; }
.content-card .thumb .card-badges .badge-new { position: static; left: auto; top: auto; }
.content-card .thumb .badge-excellent { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; gap: 4px; background: -webkit-linear-gradient(135deg, rgba(34,29,18,0.94), rgba(18,16,11,0.94)); background: linear-gradient(135deg, rgba(34,29,18,0.94), rgba(18,16,11,0.94)); color: #F1D78D; font-size: 11px; font-weight: 800; letter-spacing: .2px; padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid rgba(225,189,99,0.55); box-shadow: 0 2px 8px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06); white-space: nowrap; }
.content-card .thumb .badge-excellent .cr { fill: currentColor; -webkit-filter: drop-shadow(0 0 3px rgba(241,215,141,0.45)); filter: drop-shadow(0 0 3px rgba(241,215,141,0.45)); }
.content-card .btn-wish {
position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border-radius: 50%;
border: 0; cursor: pointer; background: rgba(15,20,35,0.55); color: #fff; font-size: 15px;
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
-webkit-transition: all .2s ease; transition: all .2s ease;
}
.content-card .btn-wish:before {
content: ''; display: block; width: 17px; height: 17px; background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.content-card .btn-wish.active { background: var(--pk-accent); }
.content-card .btn-wish.active:before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}
.content-card .btn-wish:hover { -webkit-transform: scale(1.1); transform: scale(1.1); }
.content-card .info { padding: 18px 18px 20px; }
.content-card .info .category { font-size: 13px; font-weight: 700; color: var(--pk-primary-text); margin-bottom: 8px; }
.content-card .info .tit { font-size: 16.5px; font-weight: 700; color: var(--pk-ink); line-height: 1.45; height: 2.9em; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }
.content-card .info .professor { font-size: 14px; color: var(--pk-gray); margin-top: 9px; }
.content-card .info .meta { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; margin-top: 11px; font-size: 13px; color: var(--pk-gray-2); }
.content-card .info .meta .rating { color: var(--pk-amber-ink); font-weight: 700; }
/* ──────────────────────────────────────────────
아카이브 탐색 (필터 사이드바 + 결과)
─────────────────────────────────────────────── */
.arc-wrap { padding: 36px 0 72px; }
.arc-head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 16px; margin-bottom: 26px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.arc-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--pk-ink); margin: 0; }
.arc-search { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; }
.arc-search input { width: 280px; max-width: 60vw; height: 46px; border-radius: 999px; border: 1px solid var(--pk-line); background: var(--pk-surface); color: var(--pk-ink); padding: 0 20px; font-size: 14px; }
.arc-search input:focus { outline: none; border-color: var(--pk-primary); }
.arc-search button { height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--pk-primary); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.arc-search button:hover { background: var(--pk-primary-dk); }
.arc-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 28px; }
.arc-filter { -ms-flex-negative: 0; flex-shrink: 0; width: 232px; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: var(--pk-radius-sm); padding: 22px 20px; position: -webkit-sticky; position: sticky; top: 88px; }
.arc-filter .fblock { margin-bottom: 22px; }
.arc-filter .fblock h3 { font-size: 14px; font-weight: 800; color: var(--pk-gray); letter-spacing: .03em; margin: 0 0 10px; }
.arc-filter ul { list-style: none; margin: 0; padding: 0; }
.arc-filter li a { display: block; padding: 9px 11px; border-radius: 9px; font-size: 15px; color: var(--pk-ink-2); -webkit-transition: all .18s ease; transition: all .18s ease; }
.arc-filter li a:hover { background: var(--pk-surface-2); }
.arc-filter li.on a { background: var(--pk-primary-soft); color: var(--pk-primary-text); font-weight: 700; }
.arc-filter .fclear { display: block; text-align: center; padding: 10px; font-size: 13px; font-weight: 700; color: var(--pk-gray); border: 1px dashed var(--pk-line); border-radius: 10px; }
.arc-filter .fclear:hover { color: var(--pk-primary-text); border-color: var(--pk-primary); }
.arc-result { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; }
/* 전체 / 우수 콘텐츠 탭 */
.arc-tabs { display: -webkit-box; display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--pk-line); }
.arc-tabs a { padding: 10px 16px; font-size: 15px; font-weight: 700; color: var(--pk-gray); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.arc-tabs a.on { color: var(--pk-ink); border-bottom-color: var(--pk-primary); }
.arc-tabs a.exc { -webkit-box-align: center; align-items: center; display: -webkit-inline-box; display: inline-flex; gap: 5px; }
.arc-tabs a.exc.on { color: #B8860B; border-bottom-color: #D4AF37; }
.arc-tabs a.exc .cr { fill: #C79A2E; }
.arc-tabs a.exc.on .cr { fill: #B8860B; }
.arc-exc-note { background: rgba(245,179,1,0.10); border: 1px solid rgba(240,140,0,0.28); color: #8A5A00; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; }
.det-excellent { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; gap: 6px; vertical-align: middle; margin-left: 10px; font-size: 13px; font-weight: 800; letter-spacing: .2px; color: #F1D78D; background: -webkit-linear-gradient(135deg, #2a2417, #15130c); background: linear-gradient(135deg, #2a2417, #15130c); border: 1px solid rgba(225,189,99,0.5); padding: 4px 13px; border-radius: 999px; box-shadow: 0 3px 12px rgba(0,0,0,0.18); white-space: nowrap; }
.det-excellent .cr { fill: currentColor; -webkit-filter: drop-shadow(0 0 3px rgba(241,215,141,0.5)); filter: drop-shadow(0 0 3px rgba(241,215,141,0.5)); }
.arc-toolbar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 12px; margin-bottom: 18px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.arc-sort { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 4px; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: 999px; padding: 4px; }
.arc-sort a { padding: 8px 17px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--pk-gray); }
.arc-sort a.on { background: var(--pk-primary); color: #fff; }
.arc-count { font-size: 15px; color: var(--pk-gray); }
.arc-count strong { color: var(--pk-ink); }
.arc-empty { text-align: center; padding: 72px 24px; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: var(--pk-radius); }
.arc-empty .pk-icon-badge { margin-bottom: 20px; }
.arc-empty h3 { font-size: 19px; font-weight: 800; color: var(--pk-ink); margin: 0 0 8px; letter-spacing: -0.02em; }
.arc-empty p { font-size: 15px; line-height: 1.65; color: var(--pk-gray); margin: 0 auto 24px; max-width: 420px; }
.arc-empty-cta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; }
/* 비회원 제한 — 로그인 게이트 */
.arc-gate { margin-top: 28px; text-align: center; padding: 40px 24px; border-radius: var(--pk-radius); background: var(--pk-primary-soft); border: 1px dashed var(--pk-primary); }
.arc-gate .lock { font-size: 40px; margin-bottom: 12px; color: var(--pk-primary-text); }
.arc-gate h3 { font-size: 20px; font-weight: 800; color: var(--pk-ink); margin: 0 0 8px; }
.arc-gate p { font-size: 15px; color: var(--pk-gray); margin: 0 0 22px; line-height: 1.6; }
.arc-gate p strong { color: var(--pk-primary-text); }
.arc-gate-cta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; }
/* 페이지네이션 */
.arc-pager, .pk-pager { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; margin-top: 36px; }
.arc-pager a, .pk-pager a { min-width: 40px; height: 40px; padding: 0 12px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--pk-ink-2); background: var(--pk-surface); border: 1px solid var(--pk-line); }
.arc-pager a:hover, .pk-pager a:hover { border-color: var(--pk-primary); color: var(--pk-primary-text); }
.arc-pager a.on, .pk-pager a.on { background: var(--pk-primary); color: #fff; border-color: var(--pk-primary); }
@media (max-width: 860px){
.arc-body { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.arc-filter { width: 100%; position: static; padding: 4px 18px 18px; }
/* 그룹 사이 얇은 구분선 + 간격 → '정리된' 느낌 */
.arc-filter .fblock { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--pk-line); }
.arc-filter .fblock:last-of-type { border-bottom: 0; }
.arc-filter .fblock h3 { margin-bottom: 12px; }
/* 옵션을 또렷한 칩(테두리 알약)으로 — 각 항목이 뚜렷이 구분되고, 선택은 꽉 찬 인디고 */
.arc-filter ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; }
.arc-filter li a {
display: block; padding: 8px 15px; border: 1px solid var(--pk-line); border-radius: 999px;
background: var(--pk-surface); font-size: 14px; font-weight: 600; color: var(--pk-ink-2);
}
.arc-filter li a:hover { border-color: var(--pk-primary); background: var(--pk-surface); }
.arc-filter li.on a { background: var(--pk-primary); color: #fff; border-color: var(--pk-primary); font-weight: 700; }
.arc-filter .fclear { margin-top: 18px; }
}
/* ──────────────────────────────────────────────
콘텐츠 상세 (detail)
─────────────────────────────────────────────── */
.det-wrap { padding: 36px 0 72px; }
.det-top { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 34px; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 36px; }
.det-preview { -webkit-box-flex: 1; -ms-flex: 1 1 440px; flex: 1 1 440px; min-width: 300px; }
.det-thumb { position: relative; aspect-ratio: 16/9; border-radius: var(--pk-radius-sm); background: -webkit-linear-gradient(135deg, var(--pk-primary), #9A7BFF); background: linear-gradient(135deg, var(--pk-primary), #9A7BFF); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 16px; box-shadow: var(--pk-shadow); }
.det-cat-badge { background: rgba(255,255,255,0.22); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.det-preview-btn { width: 100%; margin-top: 12px; height: 48px; border-radius: 12px; border: 1px solid var(--pk-line); background: var(--pk-surface); color: var(--pk-ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.det-preview-btn:hover { border-color: var(--pk-primary); color: var(--pk-primary-text); }
.det-preview-btn em { color: var(--pk-gray-2); font-style: normal; font-weight: 500; }
.det-info { -webkit-box-flex: 1; -ms-flex: 1 1 380px; flex: 1 1 380px; min-width: 280px; }
.det-cat { font-size: 13px; font-weight: 700; color: var(--pk-primary-text); margin-bottom: 10px; }
.det-info h1 { font-size: 31px; font-weight: 800; letter-spacing: -0.03em; color: var(--pk-ink); line-height: 1.3; margin: 0 0 18px; }
.det-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 18px; font-size: 15px; color: var(--pk-gray); margin-bottom: 14px; }
.det-meta b { color: var(--pk-ink); font-weight: 700; }
.det-stat { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--pk-gray); padding: 14px 0; border-top: 1px solid var(--pk-line); border-bottom: 1px solid var(--pk-line); margin-bottom: 16px; }
.det-rating { color: var(--pk-amber-ink); font-weight: 800; }
.det-tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.det-tags a { font-size: 13px; font-weight: 600; color: var(--pk-ink-2); background: var(--pk-surface); border: 1px solid var(--pk-line); padding: 5px 12px; border-radius: 999px; }
.det-tags a:hover { border-color: var(--pk-primary); color: var(--pk-primary-text); }
.det-actions { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.btn-take { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 52px; padding: 0 36px; border-radius: 999px; background: var(--pk-primary); color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 8px 24px rgba(61,90,254,0.30); }
.btn-take:hover { background: var(--pk-primary-dk); color: #fff; -webkit-transform: translateY(-2px); transform: translateY(-2px); }
.btn-wish-lg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 7px; height: 52px; padding: 0 24px; border-radius: 999px; background: var(--pk-surface); border: 1px solid var(--pk-line); color: var(--pk-ink-2); font-size: 15px; font-weight: 700; cursor: pointer; }
.btn-wish-lg:hover { border-color: var(--pk-accent); color: var(--pk-accent); }
.btn-wish-lg.active { border-color: var(--pk-accent); color: var(--pk-accent); }
.btn-wish-lg.active .ico { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
.det-tabs { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 6px; border-bottom: 1px solid var(--pk-line); margin-bottom: 24px; }
.det-tabs button { padding: 13px 22px; background: none; border: 0; border-bottom: 2.5px solid transparent; margin-bottom: -1px; font-size: 15px; font-weight: 700; color: var(--pk-gray); cursor: pointer; }
.det-tabs button.on { color: var(--pk-primary-text); border-bottom-color: var(--pk-primary); }
.det-panel { margin-bottom: 36px; }
.det-panel h3 { font-size: 18px; font-weight: 800; color: var(--pk-ink); margin: 0 0 14px; }
.det-panel p { font-size: 15px; line-height: 1.75; color: var(--pk-ink-2); }
.det-panel .muted { color: var(--pk-gray); }
.curri-list { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.curri-list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 14px; padding: 14px 18px; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: 12px; margin-bottom: 8px; }
.curri-list .cno { -ms-flex-negative: 0; flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--pk-primary-text); width: 56px; }
.curri-list .ctit { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 16px; font-weight: 600; color: var(--pk-ink); }
.curri-list .cdur { font-size: 13px; color: var(--pk-gray-2); }
.det-related h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--pk-ink); margin: 0 0 20px; }
/* ──────────────────────────────────────────────
탭 (마이페이지 / 고객센터)
─────────────────────────────────────────────── */
.pk-tabs { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 6px; border-bottom: 1px solid var(--pk-line); margin-bottom: 28px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.pk-tabs a { padding: 14px 22px; font-size: 16px; font-weight: 700; color: var(--pk-gray); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.pk-tabs a:hover { color: var(--pk-ink); }
.pk-tabs a.on { color: var(--pk-primary-text); border-bottom-color: var(--pk-primary); }
/* 모바일: 밑줄 탭은 줄바꿈되면 구분이 안 돼 허접해 보임 → 또렷한 칩(알약)으로 전환(선택=꽉찬 인디고) */
@media (max-width: 640px){
.pk-tabs { border-bottom: 0; gap: 8px; margin-bottom: 22px; }
.pk-tabs a {
padding: 9px 15px; font-size: 14px; font-weight: 700; margin-bottom: 0;
border: 1px solid var(--pk-line); border-radius: 999px; background: var(--pk-surface); color: var(--pk-ink-2);
}
.pk-tabs a.on { background: var(--pk-primary); color: #fff; border-color: var(--pk-primary); }
}
/* 알약형 탭(보조) */
.pk-pills { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 24px; }
.pk-pills a { padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--pk-surface); border: 1px solid var(--pk-line); color: var(--pk-ink-2); cursor: pointer; -webkit-transition: all .15s; transition: all .15s; }
.pk-pills a:hover { border-color: var(--pk-primary); color: var(--pk-primary); }
.pk-pills a.on { background: var(--pk-primary); color: #fff; border-color: var(--pk-primary); }
.pk-pills a.on:hover { color: #fff; }
/* FAQ 아코디언(.pk-faq)은 landing-c.css에서 랜딩용으로 max-width:820px 가운데 정렬.
고객센터 등 내부 페이지(.pk-container)에서는 탭·목록과 동일하게 전체 폭을 쓰도록 해제(좁아 보이는 불균형 해소).
랜딩 FAQ는 .pk-container 밖(.pk-sec)이라 영향 없음. */
.pk-container .pk-faq { max-width: none; margin: 0; }
/* ──────────────────────────────────────────────
테이블 / 정의 리스트
─────────────────────────────────────────────── */
.pk-table { width: 100%; border-collapse: collapse; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: var(--pk-radius-sm); overflow: hidden; }
.pk-table th, .pk-table td { padding: 15px 16px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--pk-line); }
.pk-table thead th { background: var(--pk-surface-2); color: var(--pk-gray); font-weight: 700; font-size: 14px; }
.pk-table tbody tr:last-child td { border-bottom: 0; }
.pk-table tbody tr:hover { background: var(--pk-surface-2); }
.pk-table td { color: var(--pk-ink-2); }
.pk-table td.num, .pk-table th.num { text-align: center; }
.pk-table a.t { color: var(--pk-ink); font-weight: 600; }
.pk-table a.t:hover { color: var(--pk-primary-text); }
.pk-table-wrap { overflow-x: auto; }
.pk-dl { display: -ms-grid; display: grid; grid-template-columns: 140px 1fr; border: 1px solid var(--pk-line); border-radius: var(--pk-radius-sm); overflow: hidden; background: var(--pk-surface); }
.pk-dl dt { padding: 15px 18px; background: var(--pk-surface-2); font-size: 14px; font-weight: 700; color: var(--pk-gray); border-bottom: 1px solid var(--pk-line); }
.pk-dl dd { padding: 15px 18px; margin: 0; font-size: 15px; color: var(--pk-ink); border-bottom: 1px solid var(--pk-line); }
.pk-dl dt:last-of-type, .pk-dl dd:last-of-type { border-bottom: 0; }
@media (max-width: 560px){ .pk-dl { grid-template-columns: 100px 1fr; } }
/* ──────────────────────────────────────────────
폼
─────────────────────────────────────────────── */
.pk-form { }
.pk-field { margin-bottom: 20px; }
.pk-label { display: block; font-size: 15px; font-weight: 700; color: var(--pk-ink); margin-bottom: 9px; }
.pk-label .req { color: var(--pk-accent); margin-left: 3px; }
.pk-input, .pk-select, .pk-textarea {
width: 100%; height: 54px; border-radius: 12px; border: 1px solid var(--pk-line);
background: var(--pk-surface); color: var(--pk-ink); padding: 0 18px; font-size: 16px; font-family: inherit;
-webkit-transition: border-color .2s ease, box-shadow .2s ease; transition: border-color .2s ease, box-shadow .2s ease;
}
.pk-textarea { height: auto; min-height: 130px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
/* 셀렉트 — 기본 OS 화살표 제거 + pk 커스텀 화살표(닫힌 상태). 열림 목록은 OS 기본. */
.pk-select {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
padding-right: 46px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236A7282' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 16px;
}
.pk-select::-ms-expand { display: none; }
.pk-select:hover { border-color: var(--pk-primary); }
.pk-input:focus, .pk-select:focus, .pk-textarea:focus { outline: none; border-color: var(--pk-primary); box-shadow: 0 0 0 3px var(--pk-primary-soft); }
.pk-input::-webkit-input-placeholder, .pk-textarea::-webkit-input-placeholder { color: var(--pk-gray-2); }
.pk-input::placeholder, .pk-textarea::placeholder { color: var(--pk-gray-2); }
.pk-input.err, .pk-select.err, .pk-textarea.err { border-color: #E5484D; }
/* 커스텀 드롭다운 — select.pk-select 를 JS(pk_footer)가 펼침목록까지 pk 스타일로 교체.
JS 미작동 시엔 원래 .pk-select(OS 기본 목록)로 폴백. */
.pk-ddl { position: relative; }
.pk-ddl-native { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); overflow: hidden; }
.pk-ddl-btn {
width: 100%; height: 54px; border-radius: 12px; border: 1px solid var(--pk-line);
background: var(--pk-surface); color: var(--pk-ink); padding: 0 46px 0 18px; font-size: 16px; font-family: inherit;
text-align: left; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236A7282' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 16px;
-webkit-transition: border-color .15s, box-shadow .15s; transition: border-color .15s, box-shadow .15s;
}
.pk-ddl-btn:hover { border-color: var(--pk-primary); }
.pk-ddl.open .pk-ddl-btn { border-color: var(--pk-primary); box-shadow: 0 0 0 3px var(--pk-primary-soft); }
.pk-ddl.open .pk-ddl-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7BFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E"); }
.pk-ddl.err .pk-ddl-btn { border-color: #E5484D; }
.pk-ddl-val { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-ddl-menu {
position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50;
background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: 12px; box-shadow: var(--pk-shadow);
padding: 6px; margin: 0; list-style: none; max-height: 304px; overflow-y: auto;
opacity: 0; visibility: hidden; -webkit-transform: translateY(-6px); transform: translateY(-6px);
-webkit-transition: opacity .16s, -webkit-transform .16s; transition: opacity .16s, transform .16s, visibility .16s;
}
.pk-ddl.open .pk-ddl-menu { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; }
.pk-ddl-opt { padding: 11px 14px; border-radius: 8px; font-size: 15px; color: var(--pk-ink-2); cursor: pointer; line-height: 1.4; }
.pk-ddl-opt:hover { background: var(--pk-primary-soft); color: var(--pk-ink); }
.pk-ddl-opt.on { background: var(--pk-primary-soft); color: var(--pk-primary-text); font-weight: 700; }
.pk-ddl-opt.on::after { content: '✓'; float: right; font-weight: 800; }
.pk-help { font-size: 14px; color: var(--pk-gray-2); margin-top: 8px; word-break: keep-all; text-wrap: balance; }
.pk-help.err { color: #E5484D; } /* 폼 필드 오류 안내(인라인 color 하드코딩 제거용) */
.pk-help.ok { color: #1AA260; } /* 폼 필드 성공 안내(실시간 검증 — 비번 일치 등) */
.pk-err-msg { font-size: 14px; color: #E5484D; margin-top: 8px; font-weight: 600; }
.pk-form-actions { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; margin-top: 28px; }
/* 입력 + 버튼 한 줄(이메일 인증 등) */
.pk-input-group { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; }
.pk-input-group .pk-input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; } /* min-width:0 — flex 아이템 기본 min-content 넘침 방지(입력칸이 콘텐츠폭에 갇혀 줄 넘침/축소되던 문제) */
.pk-input-group .pk-btn { -ms-flex-negative: 0; flex-shrink: 0; white-space: nowrap; }
/* 약관 동의 그룹 — 행 구분선 + 여유 간격(깔끔) */
.pk-agree { border: 1px solid var(--pk-line); border-radius: 14px; background: var(--pk-surface); padding: 4px 18px; }
.pk-agree label.pk-choice { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: 15px 0; border-bottom: 1px solid var(--pk-line); -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; }
.pk-agree label.pk-choice:last-child { border-bottom: 0; }
.pk-agree label.pk-choice.all { font-size: 16px; }
.pk-agree label.pk-choice.all strong { color: var(--pk-ink); }
.pk-agree .pk-choice input { width: 19px; height: 19px; }
/* 라디오/체크 그룹 */
.pk-choice { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; font-size: 15px; color: var(--pk-ink-2); cursor: pointer; }
.pk-choice input { width: 18px; height: 18px; accent-color: var(--pk-primary); }
.pk-choice-row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; }
/* ──────────────────────────────────────────────
배지 / 태그 / 노트(알림) / 빈 상태
─────────────────────────────────────────────── */
.pk-tag { display: inline-block; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--pk-primary-soft); color: var(--pk-primary-text); }
.pk-tag.green { background: rgba(47,203,135,0.16); color: #1A9E66; }
.pk-tag.amber { background: rgba(255,176,32,0.18); color: var(--pk-amber-ink); }
.pk-tag.gray { background: var(--pk-surface-2); color: var(--pk-gray); }
.pk-tag.red { background: rgba(229,72,77,0.14); color: #D13A3F; }
.pk-note { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 14px; font-size: 15.5px; line-height: 1.65; background: var(--pk-primary-soft); color: var(--pk-ink-2); border: 1px solid var(--pk-line); }
.pk-note .ic { -ms-flex-negative: 0; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(61,90,254,0.12); color: var(--pk-primary-text); font-size: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.pk-note strong { color: var(--pk-ink); }
.pk-note.warn { background: rgba(255,176,32,0.12); border-color: rgba(255,176,32,0.4); }
.pk-note.green { background: rgba(47,203,135,0.12); border-color: rgba(47,203,135,0.4); }
.pk-note.red { background: rgba(229,72,77,0.10); border-color: rgba(229,72,77,0.35); }
/* 노트 변형별 아이콘 배지 색(이전엔 전부 파랑이라 톤 불일치) */
.pk-note.warn .ic { background: rgba(255,176,32,0.16); color: var(--pk-amber-ink); }
.pk-note.green .ic { background: rgba(47,203,135,0.16); color: var(--pk-green); }
.pk-note.red .ic { background: rgba(229,72,77,0.14); color: #E5484D; }
.pk-note > div { min-width: 0; word-break: keep-all; text-wrap: balance; }
.pk-note code { font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; font-size: 12.5px; background: rgba(61,90,254,0.10); color: var(--pk-primary-text); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.pk-empty { text-align: center; padding: 80px 20px; }
/* 빈 상태 아이콘 — 장난스러운 이모지 대신 .ico 라인아이콘을 둥근 배지에 담아 무게감/전문성 부여 */
.pk-empty .emo {
display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 24px;
background: var(--pk-primary-soft); color: var(--pk-primary-text); font-size: 38px;
}
.pk-empty .emo .ico { width: 1em; height: 1em; }
.pk-empty p { font-size: 17px; color: var(--pk-gray); margin: 0 0 18px; }
/* 인라인 아이콘 배지(로드맵 등 pk-empty 밖에서 쓰는 둥근 배지) */
.pk-icon-badge {
display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
width: 76px; height: 76px; border-radius: 22px;
background: var(--pk-primary-soft); color: var(--pk-primary-text); font-size: 34px;
}
/* ──────────────────────────────────────────────
KPI / 통계 카드 · 진도바 · 스텝퍼
─────────────────────────────────────────────── */
.pk-kpi { background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: var(--pk-radius-sm); padding: 22px; }
.pk-kpi .label { font-size: 14.5px; color: var(--pk-gray); margin-bottom: 9px; }
.pk-kpi .value { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--pk-ink); line-height: 1; }
.pk-kpi .value small { font-size: 16px; font-weight: 700; color: var(--pk-gray); }
.pk-kpi .delta { font-size: 12px; font-weight: 700; margin-top: 6px; }
.pk-kpi .delta.up { color: #1A9E66; } .pk-kpi .delta.down { color: #D13A3F; }
.pk-bar { height: 9px; border-radius: 999px; background: var(--pk-track); overflow: hidden; }
.pk-bar > i { display: block; height: 100%; background: var(--pk-primary); border-radius: 999px; }
.pk-bar.green > i { background: var(--pk-green); }
.pk-bar.amber > i { background: var(--pk-amber); }
.pk-steps { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; counter-reset: step; }
.pk-step { -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0; min-width: 120px; text-align: center; padding: 18px 12px; border-radius: 14px; background: var(--pk-surface); border: 1px solid var(--pk-line); position: relative; }
.pk-step .n { width: 30px; height: 30px; margin: 0 auto 8px; border-radius: 50%; background: var(--pk-surface-2); color: var(--pk-gray); font-weight: 800; font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.pk-step .t { font-size: 13px; font-weight: 700; color: var(--pk-ink-2); }
.pk-step.done .n { background: rgba(47,203,135,0.18); color: #1A9E66; }
.pk-step.active { border-color: var(--pk-primary); box-shadow: 0 8px 24px rgba(61,90,254,0.14); }
.pk-step.active .n { background: var(--pk-primary); color: #fff; }
.pk-step.active .t { color: var(--pk-primary-text); }
/* 신청 절차 흐름 — 가로형 번호 스텝(번호 왼쪽 + 제목/부제 오른쪽).
⚠️ 전역 .pk-step(세로형 스텝퍼)와는 별개 컴포넌트 — 클래스명을 분리해 충돌(상속된 margin:auto·text-align) 방지.
inquiry(기업 구독 신청) 발급 절차 안내 등에서 사용. */
.pk-flow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 10px; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.pk-flow-step { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 160px; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: 14px; padding: 16px 18px; }
.pk-flow-step .n { -ms-flex-negative: 0; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--pk-primary); color: #fff; font-weight: 800; font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.pk-flow-step .tx { min-width: 0; }
.pk-flow-step strong { display: block; font-size: 14px; font-weight: 700; color: var(--pk-ink); }
.pk-flow-step small { display: block; font-size: 12px; color: var(--pk-gray-2); margin-top: 2px; }
.pk-flow-arrow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--pk-gray-2); font-weight: 700; -ms-flex-negative: 0; flex-shrink: 0; }
@media (max-width: 640px){
.pk-flow-arrow { display: none; }
.pk-flow-step { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; }
}
/* 폼 액션 줄 — 단일 CTA 가운데 정렬 모디파이어(전역 .pk-form-actions 불변) */
.pk-form-actions.center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
/* ──────────────────────────────────────────────
인증(로그인/회원) 카드
─────────────────────────────────────────────── */
.pk-auth { max-width: 440px; margin: 56px auto; }
.pk-auth-card { background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: var(--pk-radius); box-shadow: var(--pk-shadow-lg); padding: 40px 36px; }
.pk-auth-head { text-align: center; margin-bottom: 28px; }
.pk-auth-head h1 { font-size: 24px; font-weight: 800; color: var(--pk-ink); margin: 0 0 8px; }
.pk-auth-head p { font-size: 14px; color: var(--pk-gray); margin: 0; }
.pk-auth-foot { text-align: center; margin-top: 24px; font-size: 15px; color: var(--pk-gray); }
.pk-auth-foot a { color: var(--pk-primary-text); font-weight: 700; }
.pk-auth-divider { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; margin: 22px 0; color: var(--pk-gray-2); font-size: 13px; }
.pk-auth-divider:before, .pk-auth-divider:after { content: ''; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 1px; background: var(--pk-line); }
/* ──────────────────────────────────────────────
본문 프로즈 (공지 상세 / 약관·정보 long-form)
─────────────────────────────────────────────── */
.pk-prose { font-size: 16px; line-height: 1.85; color: var(--pk-ink-2); }
.pk-prose h4 { font-size: 16px; font-weight: 800; color: var(--pk-ink); margin: 22px 0 8px; }
.pk-prose h4:first-child { margin-top: 0; }
.pk-prose p { margin: 0 0 12px; }
.pk-prose ul, .pk-prose ol, .pk-prose .info-list { margin: 8px 0 12px; padding-left: 20px; }
.pk-prose li { margin: 4px 0; }
.pk-prose a { color: var(--pk-primary-text); font-weight: 600; }
.pk-prose strong { color: var(--pk-ink); }
.pk-prose .info-note { font-size: 13px; color: var(--pk-gray-2); margin-top: 16px; }
/* ──────────────────────────────────────────────
공용 레이어(모달) — 약관·방침 '보기' 등. 화면 이동 없이 본문만 띄움
─────────────────────────────────────────────── */
.pk-modal { position: fixed; inset: 0; z-index: 1000; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 24px; }
.pk-modal.open { display: -webkit-box; display: -ms-flexbox; display: flex; }
.pk-modal-dim { position: absolute; inset: 0; background: rgba(10,16,32,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pk-modal-card { position: relative; width: 100%; max-width: 640px; max-height: 86vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--pk-surface); border-radius: 18px; box-shadow: var(--pk-shadow-lg); overflow: hidden; -webkit-animation: pkModalIn .22s cubic-bezier(.2,.7,.3,1); animation: pkModalIn .22s cubic-bezier(.2,.7,.3,1); }
@-webkit-keyframes pkModalIn { from { opacity: 0; -webkit-transform: translateY(14px); } to { opacity: 1; -webkit-transform: none; } }
@keyframes pkModalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pk-modal-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--pk-surface-2); color: var(--pk-ink-2); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: background .15s, color .15s; transition: background .15s, color .15s; }
.pk-modal-x:hover { background: var(--pk-primary); color: #fff; }
.pk-modal-x .ico { width: 18px; height: 18px; }
.pk-modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 30px 32px 32px; outline: none; }
.pk-modal-title { font-size: 21px; font-weight: 800; color: var(--pk-ink); margin: 0 36px 18px 0; letter-spacing: -0.02em; }
.pk-modal-loading { padding: 28px 4px; color: var(--pk-gray-2); font-size: 15px; text-align: center; }
@media (max-width: 600px){
.pk-modal { padding: 0; }
.pk-modal-card { max-width: none; max-height: 100%; height: 100%; border-radius: 0; }
.pk-modal-body { padding: 26px 20px 28px; }
}
/* ──────────────────────────────────────────────
진단 설문 5점 척도 (diagnosis/survey)
─────────────────────────────────────────────── */
.sv-q { border-top: 1px solid var(--pk-line); padding: 16px 0; }
.sv-q:first-child { border-top: 0; padding-top: 6px; }
.sv-qtext { font-size: 14.5px; font-weight: 600; color: var(--pk-ink); margin-bottom: 12px; }
.sv-qno { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; background: var(--pk-primary-soft); color: var(--pk-primary-text); font-size: 12px; font-weight: 800; margin-right: 4px; }
.sv-scale .pk-choice { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 90px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; text-align: center; }
.sv-dot { width: 28px; height: 28px; line-height: 28px; border-radius: 50%; background: var(--pk-surface-2); color: var(--pk-ink-2); font-weight: 800; font-size: 13px; -webkit-transition: all .15s ease; transition: all .15s ease; }
.sv-lbl { font-size: 11.5px; color: var(--pk-gray); }
.sv-scale .pk-choice input:checked ~ .sv-dot { background: var(--pk-primary); color: #fff; }
/* ──────────────────────────────────────────────
향상도 비교 행 / 학습 로드맵 단계 (mypage/curation)
─────────────────────────────────────────────── */
.pk-delta-row { display: -ms-grid; display: grid; grid-template-columns: 110px 1fr 140px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--pk-line); }
.pk-delta-row:last-child { border-bottom: 0; }
.pk-delta-row .lbl { font-weight: 700; color: var(--pk-ink); }
.pk-delta-row .bars { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5px; }
.pk-delta-row .val { text-align: right; color: var(--pk-ink-2); font-size: 14px; }
.pk-roadmap-item { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 14px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--pk-line); }
.pk-roadmap-item:last-child { border-bottom: 0; }
.pk-roadmap-item .n { -ms-flex-negative: 0; flex-shrink: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: var(--pk-primary); color: #fff; font-weight: 800; }
.pk-roadmap-item .ti { font-weight: 600; color: var(--pk-ink); }
.pk-card-head .pk-h2, .pk-card-head .pk-h3 { margin: 0; }
/* ──────────────────────────────────────────────
인증(로그인) 2단 카드 — 좌측 브랜드 패널 + 우측 폼
─────────────────────────────────────────────── */
.pk-authx { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 920px; margin: 48px auto; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: var(--pk-radius); box-shadow: var(--pk-shadow-lg); overflow: hidden; }
.pk-authx-aside { -webkit-box-flex: 1; -ms-flex: 1 1 44%; flex: 1 1 44%; position: relative; padding: 48px 40px; color: #fff; overflow: hidden;
background: -webkit-linear-gradient(135deg, #4456E0 0%, #6B7BFF 55%, #9A7BFF 100%);
background: linear-gradient(135deg, #4456E0 0%, #6B7BFF 55%, #9A7BFF 100%); }
.pk-authx-aside:after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,0.10); }
.pk-authx-aside:before { content: ''; position: absolute; left: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,0.08); }
.pk-authx-aside .alogo { position: relative; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 36px; }
.pk-authx-aside h2 { position: relative; font-size: 28px; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em; margin: 0 0 22px; }
.pk-authx-aside ul { position: relative; list-style: none; margin: 0; padding: 0; }
.pk-authx-aside li { position: relative; font-size: 15.5px; padding: 9px 0 9px 30px; opacity: .95; }
.pk-authx-aside li:before { content: '✓'; position: absolute; left: 0; top: 9px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.22); text-align: center; line-height: 20px; font-size: 12px; font-weight: 800; }
.pk-authx-form { -webkit-box-flex: 1; -ms-flex: 1 1 56%; flex: 1 1 56%; padding: 48px 44px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.pk-authx-form h1 { font-size: 26px; font-weight: 800; color: var(--pk-ink); margin: 0 0 8px; }
.pk-authx-form .lead { font-size: 15px; color: var(--pk-gray); margin: 0 0 26px; }
@media (max-width: 760px){ .pk-authx { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 24px 16px; } .pk-authx-aside { padding: 34px 30px; } .pk-authx-aside h2 { font-size: 23px; } .pk-authx-form { padding: 34px 26px; } }
/* ──────────────────────────────────────────────
유틸
─────────────────────────────────────────────── */
.pk-mt-0 { margin-top: 0 !important; } .pk-mt-1 { margin-top: 12px; } .pk-mt-2 { margin-top: 24px; } .pk-mt-3 { margin-top: 40px; }
.pk-mb-2 { margin-bottom: 24px; } .pk-mb-3 { margin-bottom: 40px; }
.pk-center { text-align: center; }
/* ── 레이아웃 유틸(admin.css 와 동일 명명 — 인라인 배치 스타일 이관용, user 뷰 공용) ── */
.u-flex { display:flex; } .u-col { flex-direction:column; } .u-wrap { flex-wrap:wrap; } .u-f1 { flex:1; }
.u-ac { align-items:center; } .u-as { align-items:flex-start; }
.u-jc { justify-content:center; } .u-jb { justify-content:space-between; } .u-je { justify-content:flex-end; }
.u-g8 { gap:8px; } .u-g10 { gap:10px; } .u-g16 { gap:16px; }
.u-tac { text-align:center; } .u-tar { text-align:right; } .u-nowrap { white-space:nowrap; }
.u-hide { display:none; } .u-inline { display:inline; } .u-grid { display:grid; } .u-w100 { width:100%; }
.u-m0 { margin:0; } .u-ml-auto { margin-left:auto; }
.u-mt6 { margin-top:6px; } .u-mt8 { margin-top:8px; } .u-mt10 { margin-top:10px; } .u-mt12 { margin-top:12px; } .u-mt14 { margin-top:14px; } .u-mt16 { margin-top:16px; } .u-mt18 { margin-top:18px; }
.u-mb4 { margin-bottom:4px; } .u-mb6 { margin-bottom:6px; } .u-mb8 { margin-bottom:8px; } .u-mb10 { margin-bottom:10px; } .u-mb14 { margin-bottom:14px; } .u-mb16 { margin-bottom:16px; } .u-mb18 { margin-bottom:18px; }
.u-fs13 { font-size:13px; } .u-r10 { border-radius:10px; }
.u-mt20 { margin-top:20px; } .u-mt24 { margin-top:24px; } .u-mt28 { margin-top:28px; } .u-mt32 { margin-top:32px; }
.u-mb12 { margin-bottom:12px; } .u-mb20 { margin-bottom:20px; } .u-mb24 { margin-bottom:24px; } .u-mb28 { margin-bottom:28px; }
.u-mt2 { margin-top:2px; } .u-mt4 { margin-top:4px; } .u-mb2 { margin-bottom:2px; }
.u-fw400 { font-weight:400; } .u-fw500 { font-weight:500; } .u-fw600 { font-weight:600; } .u-fw700 { font-weight:700; } .u-fw800 { font-weight:800; }
.u-fs12 { font-size:12px; } .u-fs14 { font-size:14px; } .u-g12 { gap:12px; } .u-pt0 { padding-top:0; } .u-lh16 { line-height:1.6; }
.u-grid2 { grid-template-columns:1fr 1fr; }
.pk-muted { color: var(--pk-gray); }
.pk-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.pk-row.between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.pk-split { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 28px; }
.pk-split .main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; }
.pk-split .side { -ms-flex-negative: 0; flex-shrink: 0; width: 320px; }
@media (max-width: 900px){ .pk-split { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .pk-split .side { width: 100%; } }
/* ──────────────────────────────────────────────
구독 신청(subscribe) — 페이지 내