/*
Theme Name: Pro.B
Theme URI: https://example.com/prob
Author: Pro.B
Author URI: https://example.com
Description: 애플 스타일의 풀스크린 종합 리뷰 블로그 테마. 스크롤 애니메이션, 큰 타이포, 모노톤 기반. 맛집·지식·IT 등 다양한 리뷰용.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prob
*/

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
:root {
  --black:#1d1d1f; --gray:#6e6e73; --light-gray:#86868b;
  --bg:#fff; --bg-secondary:#f5f5f7; --border:#d2d2d7; --radius:18px;
  --blue:#0071e3;
}
body { font-family:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--black); background:var(--bg); line-height:1.5;
  -webkit-font-smoothing:antialiased; letter-spacing:-0.015em; overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100vh; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
.container { max-width:980px; margin:0 auto; padding:0 22px; }

/* 헤더 */
.site-header { position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(255,255,255,0.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:0.5px solid rgba(0,0,0,0.1); }
.site-header .container { display:flex; align-items:center; height:48px; position:relative; }
.site-title { font-size:18px; font-weight:600; letter-spacing:-0.02em; flex:0 0 auto; }
/* 메뉴를 헤더 정중앙에 배치 (transform 없이 — fixed 드롭다운이 화면 기준으로 펼쳐지도록) */
.main-nav { position:absolute; left:0; right:0; top:0; height:48px; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.main-nav > ul { pointer-events:auto; }
.main-nav ul { list-style:none; display:flex; gap:34px; margin:0; padding:0; }
.main-nav a { font-size:13px; font-weight:400; color:var(--black); opacity:0.85; transition:opacity 0.2s; }
.main-nav a:hover { opacity:1; }

/* 본문이 고정 헤더에 가리지 않도록 + 짧은 글에서도 푸터를 아래로 밀어냄 */
.site-content { padding-top:48px; flex:1 0 auto; }

/* 풀스크린 히어로 */
.hero-fs { min-height:90vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:80px 22px; }
.hero-fs .eyebrow { font-size:21px; font-weight:600; color:var(--blue); margin-bottom:6px; }
.hero-fs .headline { font-size:80px; font-weight:600; letter-spacing:-0.035em; line-height:1.05; margin-bottom:10px; }
.hero-fs .subhead { font-size:28px; font-weight:400; color:var(--gray); margin-bottom:26px; max-width:600px; }
.hero-fs .cta-row { display:flex; gap:26px; align-items:center; justify-content:center; flex-wrap:wrap; }
.hero-fs .cta { font-size:21px; color:var(--blue); }
.hero-fs .cta:hover { text-decoration:underline; }

/* 스크롤 페이드인 */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.8s cubic-bezier(0.22,0.61,0.36,1), transform 0.8s cubic-bezier(0.22,0.61,0.36,1); }
.reveal.in { opacity:1; transform:translateY(0); }

/* 리뷰 그리드 */
.grid-section { padding:80px 0 120px; }
.section-title { font-size:48px; font-weight:600; letter-spacing:-0.03em; text-align:center; margin-bottom:14px; }
.section-sub { font-size:21px; color:var(--gray); text-align:center; margin-bottom:56px; }
.post-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.post-card { background:var(--bg-secondary); border-radius:var(--radius); overflow:hidden;
  transition:transform 0.45s cubic-bezier(0.25,0.1,0.25,1), box-shadow 0.45s cubic-bezier(0.25,0.1,0.25,1); }
.post-card:hover { transform:translateY(-6px) scale(1.015);
  box-shadow:0 18px 40px rgba(0,0,0,0.10); }
.post-card .thumb { height:200px; display:flex; align-items:center; justify-content:center;
  font-size:60px; color:#c7c7cc; background:#ececf0; overflow:hidden; }
.post-card .thumb img { width:100%; height:100%; object-fit:cover;
  transition:transform 0.6s cubic-bezier(0.25,0.1,0.25,1); }
.post-card:hover .thumb img { transform:scale(1.06); }
.post-card h3 { transition:color 0.2s ease; }
.post-card:hover h3 { color:var(--blue); }
.post-card .card-body { padding:24px 26px 28px; }
.post-card .cat { font-size:12px; font-weight:600; color:var(--gray); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.04em; }
.post-card h3 { font-size:22px; font-weight:600; line-height:1.25; margin-bottom:8px; letter-spacing:-0.02em; }
.post-card .excerpt { font-size:15px; color:var(--gray); line-height:1.5; }

/* 보기 전환 바 */
.view-toggle { display:flex; justify-content:center; gap:8px; margin-bottom:40px; }
.view-toggle button { background:var(--bg-secondary); border:none; cursor:pointer;
  padding:9px 18px; border-radius:980px; font-size:14px; font-family:inherit; color:var(--gray); transition:all 0.2s; }
.view-toggle button.active { background:var(--black); color:#fff; }

/* 리스트형 */
.post-grid.view-list { display:flex; flex-direction:column; gap:0; }
.view-list .post-card { display:flex; align-items:center; background:none; border-radius:0;
  border-bottom:0.5px solid var(--border); padding:24px 4px; transition:padding-left 0.3s; }
.view-list .post-card:hover { transform:none; padding-left:12px; }
.view-list .post-card .thumb { width:120px; height:80px; flex-shrink:0; border-radius:12px; font-size:32px; margin-right:24px; }
.view-list .post-card .thumb img { border-radius:12px; }
.view-list .post-card .card-body { padding:0; flex:1; }
.view-list .post-card h3 { font-size:20px; margin-bottom:6px; }
.view-list .post-card .excerpt { font-size:14px; }

/* 촘촘한 격자형 */
.post-grid.view-compact { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.view-compact .post-card .thumb { height:120px; font-size:40px; }
.view-compact .post-card .card-body { padding:14px 16px 18px; }
.view-compact .post-card h3 { font-size:16px; margin-bottom:4px; }
.view-compact .post-card .excerpt { display:none; }

/* 개별 글 — 애플 스타일 */
.single-post { width:100%; }

/* 풀스크린 제목 영역 */
.post-hero { min-height:calc(100vh - 48px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:80px 22px 60px;
  max-width:900px; margin:0 auto; }
.post-eyebrow { font-size:20px; font-weight:600; color:var(--blue); margin-bottom:10px;
  text-transform:uppercase; letter-spacing:0.02em; }
.post-title { font-size:64px; font-weight:600; letter-spacing:-0.035em; line-height:1.07; margin-bottom:18px; }
.post-date { font-size:17px; color:var(--light-gray); margin-bottom:40px; }
.post-featured { width:100%; margin-top:20px; }
.post-featured img { border-radius:var(--radius); width:100%; }
.scroll-hint { font-size:32px; color:var(--light-gray); margin-top:40px;
  animation:bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }

/* 본문 */
.post-body { max-width:680px; margin:0 auto; padding:0 22px 120px; }
.post-body .content { font-size:21px; line-height:1.75; color:var(--black); }
.post-body .content p { margin-bottom:28px; }
.post-body .content h2 { font-size:36px; font-weight:600; margin:64px 0 22px; letter-spacing:-0.025em; line-height:1.15; }
.post-body .content h3 { font-size:26px; font-weight:600; margin:40px 0 16px; }
.post-body .content img { border-radius:var(--radius); margin:44px 0; width:100%; }
.post-body .content blockquote { border:none; text-align:center; margin:56px 0;
  font-size:32px; font-weight:600; letter-spacing:-0.02em; color:var(--black); line-height:1.3; }
.back-link { display:inline-block; margin-top:64px; font-size:17px; color:var(--blue); }

/* 페이지네이션 */
.pagination { text-align:center; margin-top:56px; }
.pagination a, .pagination span { display:inline-block; padding:9px 16px; margin:0 4px;
  border-radius:980px; font-size:14px; border:0.5px solid var(--border); }
.pagination .current { background:var(--black); color:#fff; border-color:var(--black); }

/* 더보기 버튼 */
.load-more-wrap { text-align:center; margin-top:56px; }
.load-more-btn {
  display:inline-block; padding:13px 40px; border-radius:980px;
  font-size:15px; font-family:inherit; font-weight:500; letter-spacing:-0.01em;
  color:var(--black); background:none; border:0.5px solid var(--border);
  cursor:pointer; transition:background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s ease;
}
.load-more-btn:hover { background:var(--black); color:#fff; border-color:var(--black); }
.load-more-btn:active { transform:scale(0.96); }
.load-more-btn:disabled { opacity:0.55; cursor:default; }
.load-more-btn:disabled:hover { background:none; color:var(--black); border-color:var(--border); }

/* 검색 UI */
.nav-search-toggle { margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:none; background:none; cursor:pointer; border-radius:50%;
  color:var(--black); opacity:0.8; transition:opacity 0.2s, background 0.2s; }
.nav-search-toggle:hover { opacity:1; background:rgba(0,0,0,0.05); }
.nav-search-toggle svg { display:block; }

.prob-search-form { display:flex; align-items:center; gap:8px;
  background:var(--bg-secondary); border-radius:980px; padding:6px 8px 6px 18px; }
.prob-search-input { flex:1; border:none; background:none; outline:none;
  font-size:16px; font-family:inherit; color:var(--black); padding:6px 0; letter-spacing:-0.01em; }
.prob-search-input::placeholder { color:var(--light-gray); }
.prob-search-btn { border:none; background:var(--black); color:#fff; cursor:pointer;
  width:34px; height:34px; border-radius:50%; font-size:14px; flex-shrink:0; transition:opacity 0.2s; }
.prob-search-btn:hover { opacity:0.85; }

/* 검색 결과 페이지의 검색창 */
.search-box { max-width:560px; margin:0 auto 48px; }
.no-results { grid-column:1/-1; text-align:center; color:var(--gray); font-size:18px; padding:40px 0; }

/* 댓글 영역 */
.comments-area { max-width:680px; margin:80px auto 0; padding-top:56px; border-top:0.5px solid var(--border); }
.comments-title, .comment-reply-title { font-size:28px; font-weight:600; letter-spacing:-0.02em; margin-bottom:28px; }
.comment-list { list-style:none; margin:0 0 48px; padding:0; }
.comment-list li { margin-bottom:24px; }
.comment-list .comment-body { background:var(--bg-secondary); border-radius:var(--radius); padding:20px 24px; }
.comment-list .comment-author { font-size:15px; font-weight:600; margin-bottom:4px; }
.comment-list .comment-author .says { display:none; }
.comment-list .comment-metadata { font-size:13px; color:var(--light-gray); margin-bottom:10px; }
.comment-list .comment-metadata a { color:var(--light-gray); }
.comment-list .comment-content { font-size:16px; line-height:1.6; }
.comment-list .reply { margin-top:8px; font-size:14px; }
.comment-list .reply a { color:var(--blue); }
.comment-list .children { list-style:none; margin-top:20px; margin-left:28px; padding:0; }

.comment-respond { margin-top:8px; }
.comment-form { display:flex; flex-direction:column; gap:14px; }
.comment-form p { margin:0; }
.comment-form label { font-size:14px; color:var(--gray); display:block; margin-bottom:6px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea {
  width:100%; border:0.5px solid var(--border); border-radius:14px; padding:12px 16px;
  font-size:16px; font-family:inherit; color:var(--black); background:var(--bg); outline:none; resize:vertical; }
.comment-form input:focus, .comment-form textarea:focus { border-color:var(--blue); }
.comment-form .form-submit { margin-top:4px; }
.comment-form .comment-submit, .comment-form input[type=submit] {
  background:var(--black); color:#fff; border:none; border-radius:980px;
  padding:11px 28px; font-size:15px; font-family:inherit; cursor:pointer; transition:opacity 0.2s; }
.comment-form .comment-submit:hover, .comment-form input[type=submit]:hover { opacity:0.85; }
.comment-form-cookies-consent { display:flex; flex-direction:row; align-items:center; gap:8px; }
.comment-form-cookies-consent label { margin:0; }

/* 다른 리뷰 (개별 글 하단) */
.related-section { background:var(--bg-secondary); padding:80px 0 100px; margin-top:40px; }
.related-title { font-size:32px; font-weight:600; letter-spacing:-0.025em; text-align:center; margin-bottom:48px; }
.related-section .post-card { background:var(--bg); }

/* 푸터 */
.site-footer { background:var(--bg-secondary); padding:30px 22px; font-size:12px;
  color:var(--light-gray); border-top:0.5px solid var(--border); flex-shrink:0; }
.site-footer .container { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

@media (max-width:734px) {
  .hero-fs .headline { font-size:42px; }
  .hero-fs .subhead { font-size:20px; }
  .section-title { font-size:32px; }
  .post-title { font-size:36px; }
  .post-body .content { font-size:18px; }
  .post-body .content h2 { font-size:26px; }
  .post-body .content blockquote { font-size:24px; }
  .main-nav { position:static; transform:none; margin:0 auto; height:auto; display:block; pointer-events:auto; }
  .main-nav ul { gap:16px; }
  .main-nav a { font-size:12px; }
  .view-list .post-card .thumb { width:80px; height:60px; font-size:24px; margin-right:14px; }
}

/* ===== 읽기 진행 바 ===== */
.reading-progress { position:fixed; top:48px; left:0; height:3px; width:0;
  background:var(--blue); z-index:1100; transition:width 0.08s linear; }

/* ===== 애플 스타일 검색 오버레이 ===== */
.search-overlay { position:fixed; inset:0; z-index:2000;
  background:rgba(245,245,247,0.6);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  display:flex; align-items:flex-start; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease; }
.search-overlay.open { opacity:1; visibility:visible; }
.search-overlay-inner { width:100%; max-width:640px; margin-top:22vh; padding:0 22px;
  transform:translateY(-12px) scale(0.98); opacity:0;
  transition:transform 0.35s cubic-bezier(0.25,0.1,0.25,1), opacity 0.35s ease; }
.search-overlay.open .search-overlay-inner { transform:translateY(0) scale(1); opacity:1; }
.overlay-search-form { display:flex; align-items:center; gap:14px; background:var(--bg);
  border-radius:18px; padding:6px 10px 6px 22px; box-shadow:0 12px 40px rgba(0,0,0,0.12); }
.overlay-search-icon { display:flex; align-items:center; color:var(--black); opacity:0.45; flex-shrink:0; }
.overlay-search-input { flex:1; border:none; background:none; outline:none; font-family:inherit;
  font-size:28px; font-weight:500; letter-spacing:-0.02em; color:var(--black); padding:14px 0; }
.overlay-search-input::placeholder { color:var(--light-gray); }
.overlay-search-close { border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:17px; color:var(--blue); padding:10px 14px; flex-shrink:0; }
.overlay-search-hint { text-align:center; margin-top:20px; font-size:14px; color:var(--light-gray); }

@media (max-width:734px) {
  .search-overlay-inner { margin-top:16vh; }
  .overlay-search-input { font-size:22px; }
}

/* ===== 2영역 펼침: 왼쪽 목록 + 오른쪽에 호버 항목의 하위 ===== */
.main-nav li { position:static; }

/* 펼침 패널 (1단계 하위 ul) = 화면 전체 폭 배경 */
.main-nav ul ul {
  position:fixed; left:0; right:0; top:48px; margin:0; padding:0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease; z-index:999;
}
.main-nav > ul > li > ul {
  position:fixed; top:48px; left:0; right:0; width:100%; box-sizing:border-box;
  display:flex; flex-direction:column; flex-wrap:nowrap; gap:0;
  align-items:flex-start;
  margin:0; padding:40px 70px 64px;
  background:rgba(250,250,252,0.96);
  border-bottom:0.5px solid rgba(0,0,0,0.1);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}
.main-nav li:hover > ul, .main-nav li:focus-within > ul {
  opacity:1; visibility:visible; transform:translateY(0);
}

/* 왼쪽 목록 = 맛집의 직계 하위 (세로) */
.main-nav > ul > li > ul > li {
  display:block; flex:0 0 auto; width:260px; min-width:0; max-width:none;
  margin:0; padding-right:32px; box-sizing:border-box; background:none;
}
.main-nav > ul > li > ul > li > a {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:17px; font-weight:500; letter-spacing:-0.01em; line-height:22px;
  color:var(--black); padding:8px 0; transition:color 0.15s; white-space:nowrap; opacity:1;
}
.main-nav > ul > li > ul > li > a:hover,
.main-nav > ul > li > ul > li.is-active > a { color:var(--blue); }
/* 하위가 더 있는 항목엔 오른쪽 화살표 (텍스트 중앙에 맞춤) */
.main-nav > ul > li > ul > li.menu-item-has-children > a::after {
  content:"›"; font-size:18px; line-height:1; color:var(--light-gray);
  margin-left:8px; align-self:center; transform:translateY(-1px);
}

/* 오른쪽 영역 = 호버한 항목의 하위 (JS가 .is-open 부여) */
.main-nav > ul > li > ul > li > ul {
  position:absolute; top:40px; left:340px; right:70px;
  display:none; margin:0; padding:0;
  background:none; border:none; opacity:1; visibility:visible; transform:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  flex-direction:column; flex-wrap:wrap; max-height:320px; gap:0 48px;
}
.main-nav > ul > li > ul > li.is-open > ul { display:flex; }
.main-nav > ul > li > ul > li > ul > li { display:block; width:auto; max-width:none; margin:0; }
.main-nav > ul > li > ul > li > ul > li > a {
  display:block; font-size:15px; font-weight:400; color:var(--gray); line-height:22px;
  padding:8px 0; letter-spacing:-0.01em; transition:color 0.15s; opacity:1; white-space:nowrap;
}
.main-nav > ul > li > ul > li > ul > li > a:hover { color:var(--blue); }

/* 중간 화면: 좌우 패딩 축소 + 오른쪽 영역 위치 보정 */
@media (max-width:1068px) and (min-width:735px) {
  .main-nav > ul > li > ul { padding:34px 32px 48px; }
  .main-nav > ul > li > ul > li > ul { left:300px; right:32px; }
}

@media (max-width:734px) {
  /* 좁은 화면: 모두 세로로 펼친 목록 */
  .main-nav ul ul,
  .main-nav > ul > li > ul {
    position:static; display:block; width:auto; background:none; border:none; padding:8px 0 0;
    opacity:1; visibility:visible; transform:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .main-nav > ul > li > ul > li { width:auto; padding-right:0; }
  .main-nav > ul > li > ul > li > a { font-size:15px; padding:6px 0; }
  .main-nav > ul > li > ul > li > a::after { content:""; }
  .main-nav > ul > li > ul > li > ul {
    position:static; display:block; left:auto; right:auto; top:auto;
    margin:0 0 0 12px; max-height:none;
  }
  .main-nav > ul > li > ul > li > ul > li > a { font-size:14px; padding:4px 0; opacity:0.7; }
}

/* ===== 마이크로 인터랙션 디테일 ===== */
/* 이미지 로딩 페이드인 */
.post-card .thumb img,
.post-featured img,
.post-body .content img { opacity:0; transition:opacity 0.6s ease; }
.post-card .thumb img.loaded,
.post-featured img.loaded,
.post-body .content img.loaded { opacity:1; }

/* 검색 버튼 누름 효과 */
.nav-search-toggle { transition:opacity 0.2s, background 0.2s, transform 0.12s ease; }
.nav-search-toggle:active { transform:scale(0.9); }

/* 댓글/검색 제출 버튼 누름 효과 */
.comment-form .comment-submit:active,
.comment-form input[type=submit]:active,
.prob-search-btn:active { transform:scale(0.95); }

/* 페이지네이션 호버 디테일 */
.pagination a { transition:background 0.2s, color 0.2s, border-color 0.2s; }
.pagination a:hover { border-color:var(--black); }

/* CTA 링크 호버 시 화살표 살짝 이동 */
.hero-fs .cta { display:inline-block; transition:opacity 0.2s; }
.hero-fs .cta:hover { opacity:0.7; text-decoration:none; }

/* 본문 글 링크 밑줄 디테일 (호버 시 진하게) */
.post-body .content a { color:var(--blue); transition:opacity 0.2s; }
.post-body .content a:hover { opacity:0.7; }

/* 부드러운 포커스 링 (키보드 접근성) */
.load-more-btn:focus-visible,
.nav-search-toggle:focus-visible,
.main-nav a:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:8px; }