/* 로그인 전 공개 화면 전용 — 웹 개편 2단계(2026-10-05, 설계 docs/planning/design/web-redesign-v2-2026-10-04 P01·P02·P03·F01).
 *
 * 🚨 site.css 의 공통 .btn 은 웹앱(docs/site/app)도 쓴다 — 웹앱 개편(#2223)과 부딪치지 않게
 *    이 파일은 **공개 화면에만** 쓰는 클래스(.pnav · .pbtn · .pcard …)만 정의한다. site.css 는 고치지 않는다.
 * 🎨 색은 site.css 의 :root 토큰만 쓴다(이 파일에 색 값을 박지 않는다 — web_css_uses_tokens 검사).
 *    2026-10-08 개편: 대표 버튼은 검정(--ink 바탕 · --paper 글씨, 시안), 청록(--brand)은 「현재 메뉴 밑줄」·강조 글자(--brand-deep)·단계 숫자에만.
 * 📏 버튼(globe2030님 「버튼 박스가 크니까 조금 줄여 줘」): 대표 36px·14px · 보조 32px·13px · 모서리 8px.
 *    크기는 #2223 이 site.css 에 두는 버튼 크기 토큰(--btn-h · --btn-h-sub · --btn-r)을 쓴다 — 높이를 여기서
 *    따로 정하지 않는다. 토큰이 아직 main 에 없을 때를 위해 var() 에 같은 값을 대체값으로 둔다.
 *    휴대폰·터치(coarse)는 누르는 영역 44px 를 지킨다.
 */

.pwrap{max-width:1184px; margin:0 auto; padding:0 24px;}

/* ── 머리 메뉴 ── */
.pnav{background:var(--paper); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;}
.pnav .pwrap{display:flex; align-items:center; gap:24px; height:64px;}
.pnav .brand{flex:none;}
.pnav-links{display:flex; gap:28px; margin:0 auto; height:100%;}
.pnav-links a{display:flex; align-items:center; height:100%; color:var(--ink-dim); font-size:15px;
  border-bottom:2px solid transparent; text-decoration:none;}
.pnav-links a:hover{color:var(--ink); text-decoration:none;}
.pnav-links a[aria-current="page"]{color:var(--ink); font-weight:700; border-bottom-color:var(--brand);}
.pnav-right{display:flex; align-items:center; gap:12px; flex:none;}
.pnav-login{color:var(--ink-dim); font-size:14px; font-weight:600;}
.pnav-login:hover{color:var(--ink); text-decoration:none;}

/* ── 버튼(공개 화면 전용) ── */
.pbtn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--btn-h-sub, 32px); padding:0 12px; border-radius:var(--btn-r, 8px); border:1px solid var(--border);
  background:var(--paper); color:var(--ink); font:inherit; font-size:13px; font-weight:600;
  text-decoration:none; cursor:pointer; white-space:nowrap;}
.pbtn:hover{background:var(--paper-2); text-decoration:none;}
.pbtn.main, .pbtn.dark{background:var(--ink); color:var(--paper); border-color:transparent;}
.pbtn.main:hover, .pbtn.dark:hover{background:var(--ink-dim);}
.pbtn.main{min-height:var(--btn-h, 36px); padding:0 16px; font-size:14px;}
.pbtn.pending{background:var(--paper-2); color:var(--ink-faint); cursor:default;}
.pbtn:focus-visible{outline:2px solid var(--brand-deep); outline-offset:2px;}
/* 2026-10-07 — .pbtn·.pcta 가 display 를 정해 브라우저 기본 [hidden] 을 이긴다. 공개 화면 본문 안의 hidden 은 늘 숨긴다(get-app 스토어 버튼 자리). */
.pmain [hidden]{display:none;}
/* 휴대폰(≤640)·터치(coarse)는 누르는 영역 44px. #2223 이 site.css 에 토큰을 넣으면 토큰이 같은 일을 하고,
   그 전에도 같은 값이 나오도록 여기서 한 번 더 건다(값이 같아 겹쳐도 다툼이 없다). */
@media (max-width:640px), (pointer:coarse){ .pbtn, .pbtn.main{min-height:44px;} }

/* ── 본문 ── */
.pmain{padding:48px 0 64px;}
.phead h1{font-size:28px; letter-spacing:-.02em; margin:0 0 6px;}
.phead p{color:var(--ink-dim); margin:0 0 24px; font-size:14px;}
.pcard{background:var(--paper); border:1px solid var(--border); border-radius:14px; padding:22px;}
.pcard h2, .pcard h3{margin:0 0 6px;}
.pcard p{margin:0; color:var(--ink-dim); font-size:14px;}

/* P01 첫 줄 */
.phero{display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:40px 0 32px;}
.phero h1{font-size:40px; line-height:1.25; letter-spacing:-.03em; margin:0 0 14px;}
.phero .lede{color:var(--ink-dim); font-size:16px; margin:0 0 22px;}
.pcta{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.pnote{margin:12px 0 0; font-size:13px; color:var(--ink-faint);}

/* 번호 단계 */
.psteps{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.psteps li{display:flex; gap:12px; align-items:flex-start;}
.psteps .n{flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--ink);}
.psteps b{display:block; font-size:15px;}
.psteps span{color:var(--ink-dim); font-size:13px;}

/* 기능 카드 */
.psec-title{font-size:18px; margin:32px 0 14px;}
/* site.css 의 옛 공개 홈 규칙 section{padding:76px 0} 이 이 격자에 걸려 위아래가 비었다 — 여기서 걷는다(site.css 는 안 고친다). */
.pgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; padding:0; margin-bottom:32px;}
.pgrid .pcard h3{font-size:16px; margin-top:12px;}
.picon{width:22px; height:22px; stroke:var(--ink); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.prow{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px;}

/* P02 기능 소개 */
.pfeature{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; margin-bottom:16px;}
.pfeature h2{display:flex; align-items:center; gap:10px; font-size:20px; margin:0 0 8px;}
.pfeature .what{color:var(--ink); font-size:15px; margin:0 0 16px;}
.pfeature .scope{margin:14px 0 0; font-size:13px; color:var(--ink-faint);}
.ppanel{background:var(--paper-2); border:1px dashed var(--border); border-radius:12px; min-height:220px;
  display:flex; align-items:center; justify-content:center;}
.ppanel .picon{width:56px; height:56px; stroke:var(--ink-faint); stroke-width:1.2;}

/* P03 이용 안내 */
.ptwo{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

/* F01 자주 묻는 질문 */
.pfaq-tools{display:grid; gap:12px; margin-bottom:8px;}
.pfaq-search{width:100%; min-height:40px; padding:8px 12px; border:1px solid var(--border); border-radius:8px;
  font:inherit; font-size:14px; background:var(--paper); color:var(--ink);}
.pchips{display:flex; flex-wrap:wrap; gap:6px;}
.pchip{min-height:30px; padding:4px 12px; border-radius:999px; border:1px solid var(--border); background:var(--paper);
  color:var(--ink-dim); font:inherit; font-size:13px; cursor:pointer;}
.pchip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink);}
@media (pointer:coarse){ .pchip{min-height:44px;} }
.pfaq-list{border-top:1px solid var(--border); margin-top:8px;}
.pfaq-item{border-bottom:1px solid var(--border);}
.pfaq-q{width:100%; display:flex; gap:10px; align-items:center; justify-content:space-between; text-align:left;
  padding:14px 2px; background:none; border:0; font:inherit; font-size:15px; color:var(--ink); cursor:pointer;}
.pfaq-q .cat{flex:none; font-size:12px; color:var(--ink-dim); border:1px solid var(--border); border-radius:6px; padding:1px 6px;}
.pfaq-q .t{flex:1;}
.pfaq-a{padding:0 2px 16px; color:var(--ink-dim); font-size:14px;}
.pfaq-a p{margin:0 0 8px;}
.pstate{text-align:center; padding:36px 12px; color:var(--ink-dim); font-size:14px;}
.pstate strong{display:block; color:var(--ink); font-size:15px; margin-bottom:6px;}
.pask{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px;
  background:var(--paper-2); border-radius:12px; padding:14px 16px; color:var(--ink-dim); font-size:14px;}

/* ── 바닥 ── */
.pfoot{border-top:1px solid var(--border); padding:20px 0 28px; font-size:13px; color:var(--ink-dim);}
.pfoot-links{display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 0 0;}
.pfoot-links a{color:var(--ink-dim);}
.pfoot .biz .row{display:flex; flex-wrap:wrap; gap:2px 16px;}


/* ── 로그인 전 첫 화면(2026-10-08 개편) ── */
.phome{padding-top:24px;}
.phome .phero{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr); gap:48px; align-items:start; padding:32px 0 0;}
.peyebrow{margin:0 0 20px; font-size:15px; color:var(--ink);}
.peyebrow b{color:var(--brand-deep); font-weight:600;}
.phome .phero h1{font-size:clamp(30px,5.4vw,64px); line-height:1.2; letter-spacing:-.04em; font-weight:800; margin:0 0 24px;}
.phome .phero h1 span{display:block;}
.phome .lede{font-size:18px; line-height:1.7; margin:0 0 32px;}
.pbtn.big{min-height:48px; padding:0 24px; font-size:16px; border-radius:var(--btn-r, 8px);}
/* 2026-10-29 — 「앱 받기」(/get-app) 정돈: 스토어 두 버튼은 같은 폭·같은 높이로 한 줄, 웹·기능 소개는 그 아래 한 줄.
   본문이 짧아도 바닥글이 화면 아래에 붙고(아래 회색 빈칸 없음), 안내 문장은 한 단어만 덩그러니 남지 않게 접는다. */
.pget{min-height:100vh; display:flex; flex-direction:column;}
.pget .pmain{flex:1;}
.pget .phero .lede{max-width:32em; text-wrap:pretty;}
.pget .pcta{gap:12px;}
.pget .pstores .pbtn, .pget .psecond .pbtn{flex:0 0 auto; min-width:200px;}
.pget .psecond{margin-top:12px;}
@media (max-width:640px){
  .pget .pcta{flex-direction:column; align-items:stretch;}
  .pget .pstores .pbtn, .pget .psecond .pbtn{min-width:0; width:100%;}
}
.plink{display:inline-flex; align-items:center; min-height:44px; padding:0 2px; color:var(--ink); font-size:15px; font-weight:600;
  border-bottom:2px solid var(--brand); text-decoration:none;}
.plink:hover{color:var(--brand-deep); text-decoration:none;}
.plink:focus-visible{outline:2px solid var(--brand-deep); outline-offset:3px;}
.phome .pcta{gap:24px;}
.pphone-fig{margin:0; display:flex; flex-direction:column; align-items:center; gap:12px;}
.pphone{width:min(100%,300px); border:10px solid var(--ink); border-bottom:0; border-radius:44px 44px 0 0; background:var(--ink);
  overflow:hidden; max-height:520px;}
.pphone-img{display:block; width:100%; height:auto; border-radius:34px 34px 0 0;}
.pphone-cap{font-size:13px; color:var(--ink-dim); text-align:center;}

.psection{padding:0; margin-top:48px; border-top:1px solid var(--border);}
.p01{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr) minmax(0,1.6fr); gap:32px; align-items:center; padding:40px 0 8px;}
.plabel{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:13px; color:var(--ink-dim);}
.pnum{color:var(--brand-deep); font-weight:700;}
.pslash{color:var(--ink-dim);}
.pbig{font-size:clamp(26px,3.2vw,38px); line-height:1.25; letter-spacing:-.03em; font-weight:800; margin:0 0 14px;}
.pdesc{margin:0; color:var(--ink-dim); font-size:15px; line-height:1.7;}
.pcardart{position:relative; height:120px; max-width:200px;}
.pcardart-back, .pcardart-front{position:absolute; border:1px solid var(--border); border-radius:8px; background:var(--paper);}
.pcardart-back{inset:0 18px 14px 0; background:var(--paper-2);}
.pcardart-front{inset:18px 0 0 18px; padding:12px;}
.pcardart-brand{display:block; font-size:11px; font-weight:700; color:var(--ink); margin-bottom:10px;}
.pcardart-front i{display:block; height:4px; width:70%; background:var(--border); border-radius:2px; margin-bottom:6px;}
.pcardart-front i:nth-of-type(2){width:50%;}
.pcardart-front i:nth-of-type(3){width:60%;}
.pcardart-front em{position:absolute; top:12px; right:12px; width:12px; height:12px; background:var(--brand); border-radius:2px;}
.pflow{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr); gap:12px; align-items:start;}
.pflow li{display:flex; gap:12px; align-items:flex-start;}
.pstep{flex:none; width:36px; height:36px; border-radius:50%; background:var(--brand-deep); color:var(--paper); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;}
.pflow b{display:block; font-size:18px; margin:4px 0 6px;}
.pflow p{margin:0; color:var(--ink-dim); font-size:14px; line-height:1.7;}
.pflow-arrow{display:block !important; align-self:center; height:1px; background:var(--ink-dim); margin-top:18px; position:relative;}
.pflow-arrow::after{content:""; position:absolute; right:0; top:-4px; width:8px; height:8px; border-top:1px solid var(--ink-dim); border-right:1px solid var(--ink-dim); transform:rotate(45deg);}
.phome .psec-title{font-size:22px; margin:0 0 14px;}
.phome .psection + .psection{padding-top:32px;}
@media (max-width:1100px){
  .p01{grid-template-columns:minmax(0,1fr) minmax(0,.6fr);}
  .pflow{grid-column:1 / -1;}
}

/* ── 오픈소스 라이선스(/licenses) — 목록 마크업은 웹 앱 도움말 패널과 같은 함수(licensesListHtml)가 만든다 ── */
.plicenses .notice-item{border-top:1px solid var(--border); padding:14px 0;}
.plicenses .notice-item:first-child{border-top:0;}
.plicenses .notice-item h4{margin:0 0 4px; font-size:15px; color:var(--ink);}
.plicenses .notice-item p{margin:0 0 4px; font-size:14px; color:var(--ink-dim);}

/* ── 태블릿 ── */
@media (max-width:1023px){
  .pgrid{grid-template-columns:repeat(2,1fr);}
  .phero, .phome .phero{grid-template-columns:1fr; gap:32px;}
  .phome .phero h1{font-size:46px;}
  .pphone{max-height:440px;}
}
/* ── 휴대폰: 로그인 전 화면은 휴대폰에서도 그대로 연다(설계 §1-3) ── */
@media (max-width:640px){
  .pnav .pwrap{flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:0; gap:8px 12px;}
  .pnav-right{margin-left:auto;}
  .pnav-links{order:3; width:100%; margin:0; gap:20px; overflow-x:auto; height:40px;}
  .phero h1, .phome .phero h1{font-size:30px;}
  .phome .lede{font-size:16px;}
  .p01{grid-template-columns:1fr; gap:24px;}
  .pflow{grid-template-columns:1fr;}
  .pflow-arrow{display:none !important;}
  .pcta{gap:16px;}
  .pgrid, .ptwo, .pfeature{grid-template-columns:1fr;}
  .ppanel{min-height:140px;}
  .prow, .pask{flex-direction:column; align-items:flex-start;}
  .pmain{padding:28px 0 48px;}
}

/* 2026-10-09 — 보안 헤더(CSP style-src 'self')가 인라인 style="" 을 막는다. 페이지에 있던 넷을 여기로 옮겼다.
   인라인 style 은 모든 규칙을 이겼으므로, 같은 값을 내도록 기존 규칙(.pcard h2 · .pcard p · .pcta)보다 구체적으로 쓴다. */
.pcard h2.ph2-sm{font-size:17px;}
.pcard p.pmb-14{margin-bottom:14px;}
.pcta.pmt-8{margin-top:8px;}