/*
Theme Name: Peepful
Theme URI: https://peepful.kr
Author: 사운드앤조이풀
Description: 핍풀 웹매거진 테마
Version: 1.0
Text Domain: peepful
*/

:root{
  --orange:#FF6F12;
  --lime:#CDD91C;
  --ink:#1F1F1F;
  --muted:rgba(31,31,31,.6);
  --radius:24px;
  --gap:8px;
  --pad:20px;
  --font:helvetica,"Apple SD Gothic Neo","Malgun Gothic","Nanum Gothic",Meiryo,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);font-size:18px;line-height:2;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.pf-wrap{max-width:1160px;margin:0 auto;padding:0 var(--pad)}

/* ---------- 헤더 ---------- */
.pf-top{position:relative}
.pf-logo{position:absolute;top:16px;left:0;right:0;z-index:3;text-align:center}
.pf-logo img{display:inline-block;width:150px;height:auto}
.pf-logo-text{display:inline-block;font-size:34px;font-weight:800;color:var(--orange);letter-spacing:-.02em}

/* ---------- 히어로 ---------- */
.pf-hero{position:relative;display:block;margin:0 var(--pad) 24px;border-radius:var(--radius);overflow:hidden;min-height:480px;background:#ddd center/cover no-repeat;color:#fff}
.pf-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(31,31,31,.85) 0%,rgba(31,31,31,.15) 55%,rgba(31,31,31,.25) 100%)}
.pf-hero-body{position:relative;z-index:2;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;min-height:480px}
.pf-hero .pf-title{font-size:24px;line-height:1.4;font-weight:700;margin:8px 0}
.pf-hero .pf-excerpt{font-size:16px;line-height:1.6;margin:0 0 12px}

/* ---------- 모자이크 ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.pf-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--radius);padding:12px;overflow:hidden;color:#fff;background:#eee center/cover no-repeat;grid-column:span 2;aspect-ratio:1/1}
.pf-card.span4{grid-column:span 4;aspect-ratio:1/1}
.pf-card.text{background:var(--orange);justify-content:flex-start;aspect-ratio:auto;min-height:182px}
.pf-card.photo.has-text::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(31,31,31,.8) 0%,rgba(31,31,31,0) 100%)}
.pf-card > *{position:relative;z-index:2}
.pf-chip{display:inline-block;align-self:flex-start;background:#fff;color:var(--ink);font-size:10px;line-height:1;font-weight:400;padding:4px 6px;border-radius:6px;margin-bottom:8px}
.pf-card.photo .pf-chip{background:var(--lime)}
.pf-title{font-size:13px;line-height:1.4;font-weight:700;margin:0}
.pf-excerpt{font-size:13px;line-height:1.6;margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pf-meta{margin-top:auto;padding-top:12px}
.pf-writer{font-size:12px;line-height:1.4}
.pf-date{font-size:10px;line-height:1.4;opacity:.9}
.pf-card.span4 .pf-title{font-size:18px}
.pf-card.text .pf-meta{margin-top:auto}
.pf-arrow{position:absolute;right:12px;bottom:12px;z-index:3;width:24px;height:24px}

/* ---------- 글 상세 ---------- */
.pf-article{padding-bottom:64px}
.pf-article-head{padding:24px var(--pad) 8px}
.pf-article-head .pf-cat{display:inline-block;background:var(--orange);color:#fff;font-size:11px;padding:4px 8px;border-radius:6px}
.pf-article-head h1{font-size:26px;line-height:1.4;font-weight:700;margin:12px 0 8px}
.pf-article-meta{font-size:13px;color:var(--muted)}
.pf-content{padding:16px var(--pad) 0;font-size:16px;line-height:2}
.pf-content p{margin:0 0 24px}
.pf-content h2{font-size:22px;line-height:1.5;font-weight:700;margin:48px 0 8px}
.pf-content h3{font-size:17px;line-height:1.6;font-weight:700;margin:36px 0 8px;color:var(--orange)}
.pf-content figure{margin:24px 0}
.pf-content img{border-radius:12px}
.pf-content div[style*="grid"] img{border-radius:12px}
.pf-content a{color:var(--orange);text-decoration:underline;word-break:break-all}
.pf-content hr{border:0;border-top:1px solid #eee;margin:48px 0 24px}
.pf-content small{font-size:12px;color:var(--muted);line-height:1.7}

/* ---------- 다음 글 ---------- */
.pf-more{padding:40px var(--pad) 0}
.pf-more h2{font-size:15px;font-weight:700;margin:0 0 12px}

/* ---------- 푸터 ---------- */
.pf-footer{margin-top:64px;padding:32px var(--pad) 48px;background:#F7F7F7;font-size:12px;line-height:1.9;color:var(--muted)}
.pf-footer strong{color:var(--ink);font-size:13px}

/* ---------- 데스크톱 ---------- */
@media (min-width:768px){
  :root{--gap:16px;--pad:40px;--radius:28px}
  .pf-grid{grid-template-columns:repeat(8,1fr)}
  .pf-card{grid-column:span 2}
  .pf-card.span4{grid-column:span 4}
  .pf-hero{min-height:620px;max-width:1160px;margin:0 auto 32px}
  .pf-hero-body{min-height:620px;padding:32px}
  .pf-hero .pf-title{font-size:40px}
  .pf-hero .pf-excerpt{font-size:18px}
  .pf-card{padding:20px}
  .pf-title{font-size:16px}
  .pf-card.span4 .pf-title{font-size:24px}
  .pf-excerpt{font-size:14px}
  .pf-article-head{max-width:880px;margin:0 auto;padding-top:48px}
  .pf-article-head h1{font-size:38px}
  .pf-content{max-width:calc(880px + 2 * var(--pad));margin:0 auto;font-size:18px}
  .pf-logo img{width:190px}
  .pf-more{max-width:1160px;margin:0 auto}
}

/* ---------- v1.1 자동 조판 보강 ---------- */
.pf-card.plain::after{display:none}
.pf-card.plain{aspect-ratio:1/1}
.pf-card.text{min-height:0;aspect-ratio:1/1}
.pf-card.text .pf-excerpt{-webkit-line-clamp:4}
.pf-card.span4.text{aspect-ratio:2/1}
.pf-logo-static{position:static !important;text-align:left;padding:18px var(--pad) 2px}
.pf-logo-static img{width:112px}
.pf-archive-title{font-size:22px;font-weight:700;margin:20px 0}
.pf-hero .pf-meta{margin-top:0;padding-top:4px}
@media (min-width:768px){
  .pf-logo-static{padding:24px 0 4px;max-width:1160px;margin:0 auto}
  .pf-logo-static img{width:132px}
}

/* ---------- v1.2 카드 높이 정리 ---------- */
.pf-card.text{aspect-ratio:auto;min-height:0;height:auto}
.pf-card.text .pf-excerpt{-webkit-line-clamp:2;margin-top:6px}
.pf-card.span4.text{aspect-ratio:auto}
.pf-card.span4.text .pf-excerpt{-webkit-line-clamp:3}
.pf-card .pf-meta{padding-top:10px}
.pf-card.text .pf-title{font-size:14px}
@media (min-width:768px){
  .pf-card.text .pf-title{font-size:18px}
  .pf-card.text .pf-excerpt{-webkit-line-clamp:3;font-size:14px}
}

/* ---------- v1.3 데스크톱 ---------- */
@media (min-width:1024px){
  :root{--gap:32px;--pad:64px;--radius:24px}
  .pf-wrap{max-width:1440px;padding:0 var(--pad)}
  .pf-grid{grid-template-columns:repeat(4,1fr);gap:var(--gap)}
  .pf-card{padding:32px;border-radius:var(--radius)}
  .pf-card.text{aspect-ratio:auto}
  .pf-title{font-size:22px;line-height:1.45}
  .pf-card.text .pf-title{font-size:22px}
  .pf-card.span4 .pf-title{font-size:34px}
  .pf-excerpt{font-size:15px;-webkit-line-clamp:3}
  .pf-card.span4 .pf-excerpt{font-size:17px}
  .pf-writer{font-size:14px}
  .pf-date{font-size:12px}
  .pf-chip{font-size:12px;padding:6px 10px;border-radius:8px;margin-bottom:12px}

  .pf-hero{max-width:1440px;margin:0 auto 32px;min-height:640px;border-radius:var(--radius)}
  .pf-hero-body{min-height:640px;padding:40px}
  .pf-hero .pf-title{font-size:48px;line-height:1.3}
  .pf-hero .pf-excerpt{font-size:18px;max-width:720px}
  .pf-logo img{width:280px}
  .pf-logo{top:24px}

  .pf-article-head{max-width:880px;margin:0 auto;padding:56px 0 8px}
  .pf-article-head h1{font-size:40px}
  .pf-content{max-width:calc(880px + 2 * var(--pad));margin:0 auto;font-size:18px}
  .pf-content h2{font-size:26px}
  .pf-content h3{font-size:19px}
  .pf-more{max-width:1440px;margin:0 auto;padding:64px var(--pad) 0}
  .pf-more h2{font-size:17px}
  .pf-footer{padding:48px var(--pad) 64px}
}

/* ---------- v1.4 인용 카드 ---------- */
.pf-quote{background:var(--orange);color:#fff;justify-content:center}
.pf-quote .pf-quote-text{font-size:17px;line-height:1.5;font-weight:700;margin:0;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pf-quote .pf-quote-text::before{content:'\201C';display:block;font-size:30px;line-height:1;opacity:.55;margin-bottom:6px}
.pf-quote .pf-meta{margin-top:auto;padding-top:12px}
.pf-quote .pf-writer{font-size:11px;opacity:.85;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:1024px){
  .pf-quote .pf-quote-text{font-size:24px;line-height:1.45}
  .pf-quote .pf-quote-text::before{font-size:44px;margin-bottom:10px}
  .pf-quote .pf-writer{font-size:13px}
}

/* ---------- v1.5 고정 로고 · 상단바 · 푸터 ---------- */

/* 화면 위에 떠 있는 워드마크. 스크롤하면 위로 밀려 올라간다. */
.pf-logo{position:fixed;top:0;left:50%;z-index:9999;
  transform:translate(-50%,-8px);transition:transform .7s cubic-bezier(.22,.61,.36,1);
  padding:0;text-align:center;display:block}
.pf-logo img{width:247px;height:auto;display:block}
.pf-logo .pf-logo-text{font-size:44px;font-weight:800;color:var(--orange);display:block;padding-top:14px}
html.pf-scrolled .pf-logo{transform:translate(-50%,-160px)}

/* 스크롤하면 내려오는 흰색 상단바 */
.pf-bar{position:fixed;top:0;left:0;right:0;z-index:9998;height:56px;
  display:flex;align-items:center;background:#fff;border-bottom:1px solid #F0F0F0;
  transform:translateY(-100%);opacity:0;transition:transform .35s ease,opacity .35s ease}
html.pf-scrolled .pf-bar{transform:none;opacity:1}
.pf-bar-logo{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center}
.pf-bar-logo img{width:124px;height:auto;display:block}
.pf-menu-btn{position:relative;z-index:2;width:48px;height:48px;margin-left:8px;
  background:none;border:0;padding:12px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:5px}
.pf-menu-btn span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .25s ease}
html.pf-menu-open .pf-menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
html.pf-menu-open .pf-menu-btn span:nth-child(2){opacity:0}
html.pf-menu-open .pf-menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.pf-menu{position:fixed;top:56px;left:0;right:0;z-index:9997;background:#fff;
  border-bottom:1px solid #F0F0F0;transform:translateY(-120%);transition:transform .35s ease;max-height:70vh;overflow:auto}
html.pf-menu-open .pf-menu{transform:none}
.pf-menu ul{list-style:none;margin:0;padding:8px 0 16px}
.pf-menu li a{display:block;padding:12px var(--pad);font-size:17px;font-weight:700}
.pf-menu li a:hover{color:var(--orange)}

/* 히어로가 없는 페이지는 고정 로고 아래에서 시작 */
.pf-inner{padding-top:104px}

/* 주황 카드 글자 크기 통일 */
.pf-card.text .pf-title,
.pf-quote .pf-quote-text{font-size:16px;line-height:1.5;font-weight:700}
.pf-card.span4 .pf-title{font-size:20px;line-height:1.45}
.pf-card.text .pf-excerpt,
.pf-card .pf-excerpt{font-size:13px;line-height:1.6}

/* 푸터 */
.pf-footer{margin-top:72px;padding:0 0 48px;background:#fff;color:var(--ink)}
.pf-footer-cta{padding:0 var(--pad) 40px}
.pf-footer-cta h2{font-size:26px;line-height:1.45;font-weight:700;margin:0 0 16px}
.pf-more-link{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:700;color:var(--orange)}
.pf-footer-logo{padding:16px var(--pad) 40px;text-align:center}
.pf-footer-logo img{width:230px;height:auto;display:inline-block}
.pf-footer-info{border-top:1px solid #E8E8E8;padding:28px var(--pad) 0;font-size:13px;line-height:1.8;color:#8A8A8A}
.pf-footer-info h3{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 12px}
.pf-footer-info p{margin:0 0 16px}
.pf-footer-info dl{display:grid;grid-template-columns:76px 1fr;gap:6px 0;margin:0}
.pf-footer-info dt{font-weight:700;color:var(--ink)}
.pf-footer-info dd{margin:0}
.pf-footer-info a{color:#8A8A8A}
.pf-footer-info a:hover{color:var(--orange)}
.pf-copy{margin-top:20px !important;font-size:12px}

@media (min-width:1024px){
  .pf-logo img{width:380px}
  html.pf-scrolled .pf-logo{transform:translate(-50%,-240px)}
  .pf-bar{height:68px}
  .pf-bar-logo img{width:150px}
  .pf-menu{top:68px}
  .pf-menu ul{max-width:1440px;margin:0 auto;display:flex;gap:8px;padding:10px var(--pad) 18px}
  .pf-inner{padding-top:150px}
  .pf-card.text .pf-title,
  .pf-quote .pf-quote-text{font-size:22px;line-height:1.45}
  .pf-card.span4 .pf-title{font-size:30px}
  .pf-card .pf-excerpt{font-size:15px}
  .pf-footer-cta{max-width:1440px;margin:0 auto;padding:0 var(--pad) 56px}
  .pf-footer-cta h2{font-size:38px}
  .pf-footer-logo img{width:340px}
  .pf-footer-info{max-width:1440px;margin:0 auto;padding:32px var(--pad) 0}
}

/* ---------- v1.6 로고 위치 보정 ---------- */
.pf-logo{transform:translate(-50%,0);padding-top:14px}
html.pf-scrolled .pf-logo{transform:translate(-50%,-180px)}
body.admin-bar .pf-logo{top:46px}
body.admin-bar .pf-bar{top:46px}
body.admin-bar .pf-menu{top:102px}
@media (min-width:783px){
  body.admin-bar .pf-logo{top:32px}
  body.admin-bar .pf-bar{top:32px}
  body.admin-bar .pf-menu{top:100px}
}
@media (min-width:1024px){
  html.pf-scrolled .pf-logo{transform:translate(-50%,-260px)}
}

/* ---------- v1.7 글 상세 · 읽기 설정 ---------- */

/* 홈이 아니면 상단바는 처음부터 보이고 큰 워드마크는 숨긴다 */
body:not(.home) .pf-bar{transform:none;opacity:1}
body:not(.home) .pf-logo{display:none}
.pf-inner{padding-top:81px}
body.admin-bar .pf-inner{padding-top:127px}

/* 글 상단 히어로 카드 */
.pf-article-hero-wrap{padding-left:var(--pad);padding-right:var(--pad)}
.pf-article-hero{position:relative;border-radius:var(--radius);overflow:hidden;
  min-height:223px;display:flex;align-items:center;justify-content:center;
  background:#bbb center/cover no-repeat;color:#fff;text-align:center;padding:24px 20px}
.pf-article-hero::after{content:"";position:absolute;inset:0;background:rgba(31,31,31,.45)}
.pf-article-hero-body{position:relative;z-index:2;width:100%}
.pf-article-hero .pf-chip{margin:0 auto 14px}
.pf-article-hero h1{font-size:32px;line-height:1.2;font-weight:700;margin:0 0 18px;color:#fff}
.pf-article-hero .pf-writer{font-size:12px;line-height:1.6}
.pf-article-hero .pf-date{font-size:10px;line-height:1.6;opacity:.9}

/* 본문 */
.pf-content{padding:36px var(--pad) 0;font-size:17px;line-height:2}

/* 이전 글 · 다음 글 · 목록 */
.pf-postnav{margin:56px var(--pad) 0;border-top:1px solid #EDEDED}
.pf-postnav-item{display:flex;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid #EDEDED}
.pf-postnav-label{flex:0 0 52px;font-size:12px;color:#9A9A9A}
.pf-postnav-title{font-size:15px;font-weight:700;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pf-postnav-item:hover .pf-postnav-title{color:var(--orange)}
.pf-list-btn{display:block;width:120px;margin:28px auto 0;padding:12px 0;text-align:center;
  border:1px solid var(--ink);border-radius:999px;font-size:14px;font-weight:700}
.pf-list-btn:hover{background:var(--ink);color:#fff}

/* 읽기 설정 패널 */
.pf-reader{position:fixed;right:12px;bottom:16px;z-index:9996;width:152px;
  background:rgba(255,255,255,.96);border:1px solid #E8E8E8;border-radius:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.1);padding:8px 10px 10px;
  font-size:13px;color:var(--ink);transition:transform .25s ease}
.pf-reader-toggle{display:block;margin-left:auto;background:none;border:0;cursor:pointer;
  font-size:16px;line-height:1;color:#9A9A9A;padding:2px 4px}
.pf-reader-row{display:flex;align-items:center;gap:6px;padding:5px 0}
.pf-reader-row span{flex:1;font-size:13px}
.pf-reader-row button{width:26px;height:24px;border:1px solid #DEDEDE;background:#fff;border-radius:6px;
  cursor:pointer;font-size:13px;line-height:1;color:var(--ink)}
.pf-reader-row button:hover{border-color:var(--orange);color:var(--orange)}
.pf-reader.pf-reader-folded .pf-reader-row{display:none}
.pf-reader.pf-reader-folded{width:44px}

@media (min-width:1024px){
  .pf-inner{padding-top:108px}
  body.admin-bar .pf-inner{padding-top:140px}
  .pf-article-hero-wrap{max-width:1440px;margin:0 auto}
  .pf-article-hero{min-height:420px;padding:48px}
  .pf-article-hero h1{font-size:52px;margin-bottom:24px}
  .pf-article-hero .pf-writer{font-size:14px}
  .pf-article-hero .pf-date{font-size:12px}
  .pf-content{max-width:calc(880px + 2 * var(--pad));margin:0 auto;padding-top:56px;font-size:18px}
  .pf-postnav{max-width:760px;margin:72px auto 0}
  .pf-postnav-label{flex-basis:64px;font-size:13px}
  .pf-postnav-title{font-size:17px}
  .pf-reader{right:24px;bottom:24px;width:176px}
}

/* ---------- v1.9 메뉴 2단 · 페이지 · 폼 · 화살표 ---------- */
.pf-menu-inner{padding:16px var(--pad) 24px}
.pf-menu-col + .pf-menu-col{margin-top:20px}
.pf-menu-head{margin:0 0 6px;font-size:19px;font-weight:700}
.pf-menu-head a{color:var(--ink)}
.pf-menu-col ul{list-style:none;margin:0;padding:0}
.pf-menu-col li a{display:block;padding:7px 0;font-size:15px;font-weight:400;color:#6E6E6E}
.pf-menu-col li a:hover,.pf-menu-head a:hover{color:var(--orange)}

/* 카드 화살표 */
.pf-card.text::after,.pf-quote::after{content:"\2192";position:absolute;right:14px;bottom:12px;
  font-size:19px;line-height:1;color:#fff;opacity:.9;z-index:3}
.pf-card.text:hover::after,.pf-quote:hover::after{transform:translateX(3px);transition:transform .2s ease}

/* 일반 페이지 */
.pf-page{max-width:760px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);padding-bottom:64px}
.pf-page-title{font-size:30px;font-weight:700;color:var(--orange);text-align:center;margin:8px 0 18px}
.pf-page-lead{font-size:16px;font-weight:700;text-align:center;margin:0 0 44px}
.pf-page-sec{margin:0 0 40px}
.pf-page-sec h2{font-size:18px;font-weight:700;line-height:1.6;margin:0 0 14px}
.pf-page-sec p{font-size:16px;line-height:1.9;margin:0 0 14px}
.pf-page-contact{text-align:center;font-size:15px;font-weight:700;margin-top:48px}
.pf-page-contact a{color:var(--orange)}
.pf-page-body{font-size:16px;line-height:1.9}
.pf-page-body h2{font-size:19px;margin:32px 0 10px}

/* 문의 폼 */
.pf-form{margin-top:8px}
.pf-field{display:block;margin:0 0 18px}
.pf-field span{display:block;font-size:14px;font-weight:700;margin-bottom:7px}
.pf-field input,.pf-field textarea{width:100%;border:1px solid #DEDEDE;border-radius:10px;
  padding:12px 14px;font-size:15px;font-family:inherit;line-height:1.6;background:#fff;color:var(--ink)}
.pf-field input:focus,.pf-field textarea:focus{outline:none;border-color:var(--orange)}
.pf-agree{display:flex;align-items:flex-start;gap:8px;font-size:14px;margin-top:6px}
.pf-agree input{margin-top:4px}
.pf-agree-note{font-size:12px;color:#8A8A8A;margin:8px 0 0;line-height:1.7}
.pf-submit{display:block;width:100%;margin-top:26px;padding:15px 0;border:0;border-radius:999px;
  background:var(--orange);color:#fff;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer}
.pf-submit:hover{background:#E85F06}
.pf-form-done{background:#FFF3E9;border:1px solid #FFD3B0;border-radius:12px;padding:14px 16px;
  font-size:14px;color:var(--ink);margin:0 0 24px}

/* 페이지네이션 */
.pf-pagination{display:flex;justify-content:center;gap:6px;margin:40px 0 0;flex-wrap:wrap}
.pf-pagination .page-numbers{min-width:38px;padding:9px 10px;text-align:center;border:1px solid #E4E4E4;
  border-radius:10px;font-size:14px;color:var(--ink)}
.pf-pagination .current{background:var(--orange);border-color:var(--orange);color:#fff;font-weight:700}

/* 푸터 보강 */
.pf-sns a + a,.pf-resources a + a{margin-left:10px}
.pf-resources{line-height:2}

@media (min-width:1024px){
  .pf-menu-inner{max-width:1440px;margin:0 auto;display:flex;gap:80px;padding:22px var(--pad) 30px}
  .pf-menu-col + .pf-menu-col{margin-top:0}
  .pf-page{padding-bottom:88px}
  .pf-page-title{font-size:40px}
  .pf-page-lead{font-size:19px;margin-bottom:60px}
  .pf-page-sec h2{font-size:21px}
  .pf-page-sec p{font-size:17px}
  .pf-card.text::after,.pf-quote::after{right:20px;bottom:18px;font-size:24px}
}


/* ==========================================================
   v2.0 — 아임웹 원본 그리드 재현
   실측: 모바일 390px / 태블릿 792px = 4칸 gap 8px
        데스크톱 1440px = 3칸 gap 32px
   타일 비율: 정사각 1.00 / 세로 0.56(모바일)·0.45(데스크톱)
             가로배너 2.7(모바일)·1.93(데스크톱) / 큰덩어리 0.93
   ========================================================== */
.pf-grid{grid-auto-flow:row dense}

.pf-card{grid-column:span 2;aspect-ratio:1/1;min-height:0}
.pf-card.text{aspect-ratio:171/182;min-height:0;justify-content:flex-start}
.pf-card.tall{grid-column:span 2;aspect-ratio:171/307}
.pf-card.wide{grid-column:span 4;aspect-ratio:350/130}
.pf-card.big,.pf-card.full,.pf-card.span4{grid-column:span 4;aspect-ratio:1/1}
.pf-card.wide.text{aspect-ratio:350/130}
.pf-card.big.text,.pf-card.full.text{aspect-ratio:1/1}
.pf-card.tall.text{aspect-ratio:171/307}

/* 작은 타일은 요약을 두 줄로 묶어 넘침을 막는다 */
.pf-card:not(.wide):not(.big):not(.full):not(.tall) .pf-excerpt{-webkit-line-clamp:2}
.pf-card.wide .pf-excerpt{-webkit-line-clamp:2}

@media (min-width:1024px){
  .pf-grid{grid-template-columns:repeat(3,1fr);gap:32px}

  .pf-card{grid-column:span 1;padding:24px}
  .pf-card.text{aspect-ratio:1/1}
  .pf-card.tall,.pf-card.tall.text{grid-column:span 1;aspect-ratio:411/917}
  .pf-card.wide,.pf-card.wide.text{grid-column:span 2;aspect-ratio:854/442}
  .pf-card.big{grid-column:span 2;aspect-ratio:854/917}
  .pf-card.full,.pf-card.span4{grid-column:span 3;aspect-ratio:1181/560}

  .pf-chip{font-size:12px;padding:6px 10px;margin-bottom:12px}
  .pf-title{font-size:20px;line-height:1.45}
  .pf-card.wide .pf-title,.pf-card.big .pf-title,
  .pf-card.full .pf-title,.pf-card.span4 .pf-title{font-size:26px}
  .pf-excerpt{font-size:15px;margin-top:10px}
  .pf-card:not(.wide):not(.big):not(.full):not(.tall) .pf-excerpt{-webkit-line-clamp:3}
  .pf-writer{font-size:14px}
  .pf-date{font-size:12px}
  .pf-meta{padding-top:16px}
  .pf-card.text .pf-title,.pf-quote .pf-quote-text{font-size:22px;line-height:1.5}
  .pf-card.wide.text .pf-title,.pf-card.big.text .pf-title{font-size:26px}
  .pf-arrow{right:24px;bottom:24px;width:30px;height:30px}
}


/* 768~1023px 구간 교정 — 아임웹 원본은 이 구간에서도 4칸 8px을 유지한다.
   기존 테마가 8칸 16px로 쪼개면서 카드가 잘게 흩어지던 문제를 되돌린다. */
@media (min-width:768px) and (max-width:1023.98px){
  .pf-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .pf-card{grid-column:span 2;padding:16px;border-radius:24px}
  .pf-card.tall{grid-column:span 2}
  .pf-card.wide,.pf-card.wide.text,.pf-card.big,.pf-card.full,.pf-card.span4{grid-column:span 4}
  .pf-card.wide.text{aspect-ratio:350/130}
  .pf-title{font-size:16px}
  .pf-card.wide .pf-title,.pf-card.big .pf-title,
  .pf-card.full .pf-title,.pf-card.span4 .pf-title{font-size:20px}
  .pf-excerpt{font-size:14px}
  .pf-card.text .pf-title,.pf-quote .pf-quote-text{font-size:18px}
}


/* ==========================================================
   v2.1 — 스크롤 동작을 아임웹 원본 실측값에 맞춘다
   측정(모바일 390px):
     로고 영역 높이 148px · 워드마크 SVG 262×72 · 위 여백 32px
     스크롤이 1px이라도 생기면 즉시 translateY(-148px)로 빠진다
   ========================================================== */
.pf-logo{transform:translate(-50%,0);padding-top:0}
.pf-logo img{width:262px}
.pf-logo .pf-logo-text{font-size:46px;padding-top:32px}
.pf-logo img{margin-top:32px;margin-bottom:44px}
html.pf-scrolled .pf-logo{transform:translate(-50%,-148px)}

@media (min-width:768px){
  .pf-logo img{width:300px}
  html.pf-scrolled .pf-logo{transform:translate(-50%,-170px)}
}
@media (min-width:1024px){
  .pf-logo img{width:340px}
  html.pf-scrolled .pf-logo{transform:translate(-50%,-190px)}
}
body.admin-bar .pf-logo{top:32px}
@media (max-width:782px){ body.admin-bar .pf-logo{top:46px} }


/* ==========================================================
   v2.2 — 마우스 반응
   아임웹 원본은 카드 호버에 변화가 없다(트랜지션 0.5s와 커서만).
   클릭 가능하다는 신호가 약해서, 마우스가 있는 기기에서만
   아주 옅게 밝아지도록 더한다. 터치 기기에는 적용하지 않는다.
   ========================================================== */
@media (hover:hover) and (pointer:fine){
  .pf-card{transition:transform .5s cubic-bezier(.22,.61,.36,1),filter .3s ease}

  /* 사진 카드: 살짝 밝아지고 아주 조금 커진다 */
  .pf-card.photo:hover{filter:brightness(1.07)}
  .pf-card:hover{transform:translateY(-2px)}
  .pf-card:active{transform:translateY(0);transition-duration:.08s}

  /* 주황 카드: 밝기 대신 색을 한 톤 올린다 */
  .pf-card.text{transition:transform .5s cubic-bezier(.22,.61,.36,1),background-color .3s ease}
  .pf-card.text:hover{background-color:#FF8034}

  /* 화살표는 호버 때 살짝 오른쪽으로 */
  .pf-card .pf-arrow{transition:transform .3s ease}
  .pf-card:hover .pf-arrow{transform:translateX(4px)}

  /* 링크·버튼 */
  .pf-menu a{transition:color .2s ease}
  .pf-menu a:hover{color:var(--orange)}
  .pf-more a:hover,.pf-footer a:hover{color:var(--orange)}
}

/* 키보드 사용자를 위한 초점 표시 */
.pf-card:focus-visible,.pf-menu a:focus-visible,.pf-menu-btn:focus-visible{
  outline:3px solid var(--orange);outline-offset:3px}

/* 움직임을 줄이도록 설정한 기기에서는 이동을 끈다 */
@media (prefers-reduced-motion:reduce){
  .pf-card,.pf-logo,.pf-bar,.pf-arrow{transition:none !important}
  .pf-card:hover{transform:none}
}


/* ==========================================================
   v3.0 — 아임웹 원본 정밀 재현 (2026-09-21 실측)
   측정 기준 : peepful.imweb.me @ 390 / 900 / 1440px
   앞선 v1.x~v2.x 규칙 중 어긋난 값을 이 블록이 정리한다.

   좌우 여백   20 / 32 / 64   (최대폭 제한 없음)
   그리드      4칸 gap 8  →  1024px부터 3칸 gap 32
   카드        padding 12·20 / 20·24 / 40,  모서리 24
   워드마크    width:100% max-width:800 padding:32px 64px 44px
               → 390px에서 262x72, 1440px에서 672x185
   상단바      49px 중앙 로고 124  /  1024px부터 90px 좌측 64 로고 184
   사진 카드   linear-gradient(0deg, rgba(31,31,31,.8), transparent)
   ========================================================== */

/* ---------- 1. 바깥 여백 : 아임웹은 최대폭 제한이 없다 ---------- */
.pf-wrap{max-width:none;margin:0;padding:0 20px}
.pf-hero{max-width:none;margin:0 20px 24px}
@media (min-width:768px){
  .pf-wrap{max-width:none;padding:0 32px}
  .pf-hero{max-width:none;margin:0 32px 32px}
}
@media (min-width:1024px){
  .pf-wrap{max-width:none;padding:0 64px}
  .pf-hero{max-width:none;margin:0 64px 32px}
}

/* ---------- 2. 큰 워드마크 : 폭 하나로 전부 결정된다 ---------- */
.pf-logo{
  position:fixed;top:0;left:50%;
  transform:translateX(-50%);
  width:100%;max-width:800px;
  padding:32px 64px 44px;margin:0;
  display:block;text-align:center;z-index:99999;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.pf-logo img{display:block;width:100%;height:auto;max-width:none;margin:0}
.pf-logo .pf-logo-text{display:block;margin:0;padding:0;font-size:clamp(34px,12vw,96px);line-height:1}
html.pf-scrolled .pf-logo{transform:translate(-50%,-100%)}
body.admin-bar .pf-logo{top:32px}
@media (max-width:782px){body.admin-bar .pf-logo{top:46px}}

/* ---------- 3. 고정 상단바 ---------- */
.pf-bar{height:49px}
.pf-bar-logo img{width:124px;height:auto}
@media (min-width:1024px){
  .pf-bar{height:90px}
  .pf-bar-logo{left:64px;transform:none}
  .pf-bar-logo img{width:184px}
}

/* ---------- 4. 그리드 ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;grid-auto-flow:row dense}
@media (min-width:1024px){.pf-grid{grid-template-columns:repeat(3,1fr);gap:32px}}

/* ---------- 5. 카드 뼈대 ---------- */
.pf-card{
  position:relative;display:flex;flex-direction:row;
  align-items:flex-start;justify-content:flex-start;
  padding:12px;border-radius:24px;overflow:hidden;color:#fff;
  background-color:#e9e9e9;background-position:center;background-size:cover;background-repeat:no-repeat;
  grid-column:span 2;aspect-ratio:1/1;text-decoration:none;
}
.pf-card::after{display:none !important}
.pf-card.photo{align-items:flex-end}
.pf-card.text,.pf-card.pf-quote,.pf-card.pf-more{background-color:var(--orange);background-image:none}
.pf-info{display:flex;flex-direction:column;align-items:flex-start;
  flex:0 1 auto;min-width:0;max-width:100%;position:relative;z-index:2}

/* ---------- 6. 모양 (모바일·태블릿 4칸) ---------- */
.pf-card,.pf-card.text,.pf-card.pf-quote,.pf-card.pf-more{grid-column:span 2;aspect-ratio:1/1}
.pf-card.text,.pf-card.pf-quote{aspect-ratio:171/182}
.pf-card.tall,.pf-card.tall.text,.pf-card.tall.pf-quote{grid-column:span 2;aspect-ratio:171/307}
.pf-card.wide{grid-column:span 4;aspect-ratio:350/130}
.pf-card.wide.text,.pf-card.wide.pf-quote{grid-column:span 4;aspect-ratio:350/200}
.pf-card.big,.pf-card.big.text,.pf-card.big.pf-quote{grid-column:span 4;aspect-ratio:350/326}
.pf-card.full,.pf-card.full.text,.pf-card.full.pf-quote{grid-column:span 4;aspect-ratio:350/130}
.pf-card.span4{grid-column:span 4}

/* ---------- 7. 모양 (데스크톱 3칸) ---------- */
@media (min-width:1024px){
  .pf-card,.pf-card.text,.pf-card.pf-quote,.pf-card.pf-more{grid-column:span 1;aspect-ratio:1/1}
  .pf-card.tall,.pf-card.tall.text,.pf-card.tall.pf-quote{grid-column:span 1;aspect-ratio:411/917}
  .pf-card.wide,.pf-card.wide.text,.pf-card.wide.pf-quote{grid-column:span 2;aspect-ratio:854/442}
  .pf-card.big,.pf-card.big.text,.pf-card.big.pf-quote{grid-column:span 2;aspect-ratio:854/917}
  .pf-card.full,.pf-card.full.text,.pf-card.full.pf-quote,.pf-card.span4{grid-column:span 3;aspect-ratio:1297/560}
}

/* ---------- 8. 카드 안쪽 여백 ---------- */
.pf-card{padding:12px}
.pf-card.wide,.pf-card.big,.pf-card.full,.pf-card.span4{padding:20px}
@media (min-width:768px){
  .pf-card{padding:20px}
  .pf-card.wide,.pf-card.big,.pf-card.full,.pf-card.span4{padding:24px}
}
@media (min-width:1024px){
  .pf-card,.pf-card.wide,.pf-card.big,.pf-card.full,.pf-card.span4{padding:40px}
}

/* ---------- 9. 카드 글자 (아임웹 실측 크기) ---------- */
.pf-card .pf-chip{display:inline-block;background:#fff;color:var(--ink);
  border-radius:6px;padding:4px 8px;font-size:10px;line-height:1;font-weight:400;margin:0 0 8px}
.pf-card.photo .pf-chip{background:#fff;color:var(--ink)}
.pf-card .pf-title{font-size:13px;line-height:1.4;font-weight:700;color:#fff;margin:0 0 16px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.pf-card .pf-excerpt{font-size:13px;line-height:1.6;color:#fff;margin:0 0 8px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pf-card.wide .pf-excerpt{-webkit-line-clamp:3}
.pf-card.tall .pf-excerpt,.pf-card.big .pf-excerpt,.pf-card.full .pf-excerpt{-webkit-line-clamp:5}
.pf-card .pf-writer{font-size:12px;line-height:1;color:#fff;margin:0 0 8px}
.pf-card .pf-date{font-size:10px;line-height:1;color:#fff;opacity:.85;margin:0}
.pf-card .pf-quote-text{font-size:13px;line-height:1.5;font-weight:700;color:#fff;margin:0 0 16px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}

@media (min-width:768px){
  .pf-card .pf-chip{font-size:13px;padding:5px 10px;margin-bottom:12px}
  .pf-card .pf-title{font-size:18px;margin-bottom:16px}
  .pf-card .pf-excerpt{font-size:15px;margin-bottom:12px}
  .pf-card .pf-writer{font-size:14px;margin-bottom:12px}
  .pf-card .pf-date{font-size:12px}
  .pf-card .pf-quote-text{font-size:19px}
}
@media (min-width:1024px){
  .pf-card .pf-chip{font-size:16px;padding:6px 12px;margin-bottom:16px}
  .pf-card .pf-title{font-size:28px;line-height:1.4;margin-bottom:16px}
  .pf-card .pf-excerpt{font-size:20px;line-height:1.6;margin-bottom:16px}
  .pf-card .pf-writer{font-size:18px;margin-bottom:16px}
  .pf-card .pf-date{font-size:14px}
  .pf-card .pf-quote-text{font-size:26px;line-height:1.45;margin-bottom:16px}
}

/* ---------- 10. 더보기 카드 ---------- */
.pf-card.pf-more{align-items:stretch}
.pf-card.pf-more .pf-info{flex:1 1 auto;width:100%;justify-content:space-between}
.pf-more-lead{font-size:13px;line-height:1.5;font-weight:700;color:#fff;margin:0}
.pf-more-btn{display:inline-flex;align-items:center;gap:6px;margin-top:auto;
  background:#fff;color:var(--ink);border-radius:999px;
  padding:8px 14px;font-size:12px;font-weight:700;line-height:1;
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
@media (min-width:768px){
  .pf-more-lead{font-size:18px}
  .pf-more-btn{font-size:14px;padding:10px 18px}
}
@media (min-width:1024px){
  .pf-more-lead{font-size:26px;line-height:1.45}
  .pf-more-btn{font-size:16px;padding:12px 22px;gap:8px}
}

/* ---------- 11. 히어로는 카드 규칙에서 제외 ---------- */
.pf-hero .pf-excerpt{display:block;-webkit-line-clamp:none;overflow:visible}
.pf-hero .pf-chip{font-size:12px;padding:6px 10px;background:#fff;color:var(--ink)}
@media (min-width:1024px){.pf-hero .pf-chip{font-size:16px;padding:6px 12px}}

/* ---------- 12. 마우스 반응 : 원본은 카드가 움직이지 않는다 ---------- */
@media (hover:hover) and (pointer:fine){
  .pf-card{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
  .pf-card:hover{transform:none;filter:none}
  .pf-card.text:hover,.pf-card.pf-quote:hover{background-color:var(--orange)}
  .pf-card:hover .pf-arrow{transform:none}
  /* 더보기만 커서를 올리면 작아진다 */
  .pf-card.pf-more:hover{transform:scale(.965)}
  .pf-card.pf-more:hover .pf-more-btn{transform:scale(.94)}
}
@media (prefers-reduced-motion:reduce){
  .pf-card.pf-more:hover{transform:none}
  .pf-card.pf-more:hover .pf-more-btn{transform:none}
}


/* ==========================================================
   v3.1 — 모양 체계 교정
   원인 : 세로로 긴 카드에 grid-row:span 2 가 없어서
          같은 줄의 정사각 카드 아래가 흰 구멍으로 남았다.
   해법 : 행 높이를 정사각 카드 한 칸으로 고정하고,
          긴 카드는 두 행을 차지하게 한다. 구멍이 생길 수 없다.
   ========================================================== */

.pf-grid{grid-auto-flow:row dense}
.pf-card{align-self:start}
.pf-card.pf-more{order:99}

/* 모바일·태블릿 : 4칸 / gap 8 / 기본 칸 = 2열(171px) */
.pf-card,.pf-card.text,.pf-card.pf-quote,.pf-card.pf-more{
  grid-column:span 2;grid-row:span 1;aspect-ratio:1/1}
.pf-card.tall,.pf-card.tall.text,.pf-card.tall.pf-quote{
  grid-column:span 2;grid-row:span 2;aspect-ratio:171/350}
.pf-card.wide,.pf-card.wide.text,.pf-card.wide.pf-quote{
  grid-column:span 4;grid-row:span 1;aspect-ratio:350/171}
.pf-card.big,.pf-card.big.text,.pf-card.big.pf-quote{
  grid-column:span 4;grid-row:span 2;aspect-ratio:1/1}
.pf-card.full,.pf-card.full.text,.pf-card.full.pf-quote,.pf-card.span4{
  grid-column:span 4;grid-row:span 1;aspect-ratio:350/171}

/* 작은 주황 카드는 자리가 좁다 — 제목 2줄, 본문 1줄 */
.pf-card.text .pf-title,.pf-card.pf-quote .pf-title{-webkit-line-clamp:2}
.pf-card.text .pf-excerpt{-webkit-line-clamp:1}
.pf-card.text .pf-chip{margin-bottom:6px}
.pf-card.text .pf-title{margin-bottom:12px}
.pf-card.text .pf-excerpt{margin-bottom:6px}
.pf-card.text .pf-writer{margin-bottom:6px}
.pf-card.tall .pf-excerpt,.pf-card.big .pf-excerpt,
.pf-card.wide .pf-excerpt,.pf-card.full .pf-excerpt{-webkit-line-clamp:4}
.pf-card.tall .pf-title,.pf-card.big .pf-title,
.pf-card.wide .pf-title,.pf-card.full .pf-title{-webkit-line-clamp:3}

/* 데스크톱 : 3칸 / gap 32 / 기본 칸 = 1열(411px) */
@media (min-width:1024px){
  .pf-card,.pf-card.text,.pf-card.pf-quote,.pf-card.pf-more{
    grid-column:span 1;grid-row:span 1;aspect-ratio:1/1}
  .pf-card.tall,.pf-card.tall.text,.pf-card.tall.pf-quote{
    grid-column:span 1;grid-row:span 2;aspect-ratio:411/854}
  .pf-card.wide,.pf-card.wide.text,.pf-card.wide.pf-quote{
    grid-column:span 2;grid-row:span 1;aspect-ratio:854/411}
  .pf-card.big,.pf-card.big.text,.pf-card.big.pf-quote{
    grid-column:span 2;grid-row:span 2;aspect-ratio:1/1}
  .pf-card.full,.pf-card.full.text,.pf-card.full.pf-quote,.pf-card.span4{
    grid-column:span 3;grid-row:span 1;aspect-ratio:1297/411}

  /* 데스크톱은 자리가 넉넉하다 — 본문을 더 보여준다 */
  .pf-card.text .pf-chip,.pf-card.text .pf-title,
  .pf-card.text .pf-excerpt,.pf-card.text .pf-writer{margin-bottom:16px}
  .pf-card.text .pf-title,.pf-card.pf-quote .pf-title{-webkit-line-clamp:2}
  .pf-card.text .pf-excerpt{-webkit-line-clamp:3}
  .pf-card.tall .pf-excerpt,.pf-card.big .pf-excerpt,
  .pf-card.full .pf-excerpt{-webkit-line-clamp:6}
  .pf-card.wide .pf-excerpt{-webkit-line-clamp:4}
}


/* ==========================================================
   v3.2 — 남은 빈칸 정리
   · align-self:start 를 걷어내 카드가 칸을 꽉 채우게 한다
   · 더보기는 마지막 줄을 가로로 채우는 닫는 배너로
   · 세로로 긴 주황 카드는 본문을 더 길게 보여준다
   ========================================================== */

.pf-card{align-self:stretch}

/* 더보기 배너 */
.pf-card.pf-more,.pf-card.pf-more.full{
  grid-column:span 4;grid-row:span 1;aspect-ratio:auto;
  align-items:center;order:99}
.pf-card.pf-more .pf-info{
  flex-direction:row;align-items:center;justify-content:space-between;
  width:100%;gap:16px}
.pf-more-lead{flex:1 1 auto}
.pf-more-btn{margin-top:0;flex:0 0 auto;white-space:nowrap}
@media (min-width:1024px){
  .pf-card.pf-more,.pf-card.pf-more.full{grid-column:span 3;aspect-ratio:auto}
}

/* 긴 카드의 본문 노출량 */
.pf-card.tall .pf-excerpt,.pf-card.big .pf-excerpt{-webkit-line-clamp:6}
@media (min-width:1024px){
  .pf-card.tall .pf-excerpt,.pf-card.big .pf-excerpt{-webkit-line-clamp:11}
  .pf-card.full .pf-excerpt{-webkit-line-clamp:3}
  .pf-card.wide .pf-excerpt{-webkit-line-clamp:4}
}


/* ==========================================================
   v3.3 — 더보기 카드 클래스 분리
   옛 .pf-more 규칙(max-width:1160/1440 + margin:0 auto)이
   그리드 칸 안에서 카드를 가운데로 쪼그라뜨리고 있었다.
   클래스를 .pf-cta 로 갈라 옛 규칙과 끊는다.
   ========================================================== */
.pf-card.pf-cta{
  grid-area:span 1 / span 4;aspect-ratio:auto;
  align-items:center;order:99;margin:0;max-width:none;
  background-color:var(--orange);background-image:none;padding:20px}
.pf-card.pf-cta .pf-info{
  flex-direction:row;align-items:center;justify-content:space-between;
  width:100%;gap:16px;flex:1 1 auto}
.pf-cta-lead{flex:1 1 auto;font-size:15px;line-height:1.5;font-weight:700;color:#fff;margin:0}
.pf-cta-btn{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;
  background:#fff;color:var(--ink);border-radius:999px;
  padding:10px 16px;font-size:13px;font-weight:700;line-height:1;
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
@media (min-width:768px){
  .pf-card.pf-cta{padding:24px}
  .pf-cta-lead{font-size:20px}
  .pf-cta-btn{font-size:15px;padding:12px 20px}
}
@media (min-width:1024px){
  .pf-card.pf-cta{grid-area:span 1 / span 3;padding:40px}
  .pf-cta-lead{font-size:28px;line-height:1.45}
  .pf-cta-btn{font-size:18px;padding:16px 28px;gap:10px}
}
/* 커서를 올리면 작아진다 */
@media (hover:hover) and (pointer:fine){
  .pf-card.pf-cta{transition:transform .3s cubic-bezier(.22,.61,.36,1)}
  .pf-card.pf-cta:hover{transform:scale(.985)}
  .pf-card.pf-cta:hover .pf-cta-btn{transform:scale(.93)}
}
@media (prefers-reduced-motion:reduce){
  .pf-card.pf-cta:hover,.pf-card.pf-cta:hover .pf-cta-btn{transform:none}
}


/* ==========================================================
   v3.4 — 첫 화면 위 여백
   아임웹은 상단바 높이(모바일 49 / 데스크톱 90)만큼을 비워 두고
   그 아래에서 히어로가 시작한다. 큰 워드마크가 그 위를 덮는다.
   ========================================================== */
body.home .pf-site{padding-top:49px}
@media (min-width:1024px){body.home .pf-site{padding-top:90px}}


/* ==========================================================
   v3.5 — 태블릿 구간 교정 (769~1023px)
   실측: 아임웹은 이 구간에서 워드마크를 0.85배로 줄여 680px로 쓰고,
         카드 글자 크기는 모바일과 같은 값(제목 13px)을 그대로 쓴다.
   판단: 워드마크 680px는 그대로 맞춘다.
         다만 이 구간의 카드는 404px로 큰데 제목이 13px이면
         카드가 텅 비어 보인다(아임웹 원본도 채움률 19%).
         그래서 글자만 카드 크기에 맞춰 흐르게 키운다.
         390px에서는 clamp 하한이 걸려 아임웹과 완전히 같은 값이 된다.
   ========================================================== */

@media (min-width:769px) and (max-width:1023.98px){
  .pf-logo{max-width:680px}
}

@media (max-width:1023.98px){
  .pf-card{padding:clamp(12px,2vw,22px)}
  .pf-card.wide,.pf-card.big,.pf-card.full{padding:clamp(12px,2.2vw,26px)}
  .pf-card .pf-chip{font-size:clamp(10px,1.5vw,15px);padding:clamp(4px,.6vw,6px) clamp(8px,1.1vw,12px);margin-bottom:clamp(6px,1.2vw,14px)}
  .pf-card .pf-title{font-size:clamp(13px,2.2vw,22px);margin-bottom:clamp(10px,1.5vw,16px)}
  .pf-card .pf-excerpt{font-size:clamp(13px,1.7vw,17px);margin-bottom:clamp(6px,1.2vw,14px)}
  .pf-card .pf-writer{font-size:clamp(12px,1.5vw,15px);margin-bottom:clamp(6px,1.2vw,14px)}
  .pf-card .pf-date{font-size:clamp(10px,1.2vw,13px)}
  .pf-card .pf-quote-text{font-size:clamp(13px,2.1vw,21px)}
  .pf-cta-lead{font-size:clamp(15px,2.2vw,22px)}
  .pf-cta-btn{font-size:clamp(13px,1.6vw,16px)}
}

/* 카드가 클수록 본문을 더 보여준다 (태블릿 구간) */
@media (min-width:640px) and (max-width:1023.98px){
  .pf-card.text .pf-excerpt{-webkit-line-clamp:3}
  .pf-card.tall .pf-excerpt,.pf-card.big .pf-excerpt{-webkit-line-clamp:10}
  .pf-card.wide .pf-excerpt{-webkit-line-clamp:5}
  .pf-card.full .pf-excerpt{-webkit-line-clamp:4}
}


/* ==========================================================
   v3.6 — 모바일 가로형 주황 카드 높이
   문제 : 350x171 카드에 글이 183px 들어가 24px이 잘렸다.
   실측 : 아임웹도 모바일에서 가로 전체 텍스트 카드는 350x326으로 쓴다.
   조치 : 두 행을 쓰게 해 350x350으로 맞춘다(행 높이 171 + 간격 8 + 171).
   ========================================================== */
@media (max-width:1023.98px){
  .pf-card.wide.text,.pf-card.wide.pf-quote,
  .pf-card.full.text,.pf-card.full.pf-quote{
    grid-area:span 2 / span 4;aspect-ratio:1/1}
}
/* 어떤 경우에도 글이 카드 밖으로 잘리지 않게 하는 안전망 */
.pf-card .pf-info{max-height:100%}


/* ==========================================================
   v3.7 — 1024~1365px 구간
   이 구간은 3칸으로 바뀌는데 창이 좁아 카드가 272~400px밖에 안 된다.
   데스크톱 값(제목 28px · 여백 40px)을 그대로 쓰면 글이 카드를 꽉 눌러
   답답해진다. 카드 크기에 맞춰 흐르게 줄인다. 1366px부터는 실측값 그대로.
   ========================================================== */
@media (min-width:1024px) and (max-width:1365.98px){
  .pf-card,.pf-card.wide,.pf-card.big,.pf-card.full{padding:clamp(20px,2.9vw,40px)}
  .pf-card .pf-chip{font-size:clamp(12px,1.2vw,16px);padding:clamp(5px,.45vw,6px) clamp(9px,.9vw,12px);margin-bottom:clamp(10px,1.2vw,16px)}
  .pf-card .pf-title{font-size:clamp(18px,2.1vw,28px);margin-bottom:clamp(10px,1.2vw,16px)}
  .pf-card .pf-excerpt{font-size:clamp(14px,1.5vw,20px);margin-bottom:clamp(10px,1.2vw,16px)}
  .pf-card .pf-writer{font-size:clamp(13px,1.35vw,18px);margin-bottom:clamp(10px,1.2vw,16px)}
  .pf-card .pf-date{font-size:clamp(11px,1.05vw,14px)}
  .pf-card .pf-quote-text{font-size:clamp(17px,2vw,26px)}
  .pf-cta-lead{font-size:clamp(18px,2.1vw,28px)}
  .pf-cta-btn{font-size:clamp(14px,1.35vw,18px);padding:clamp(11px,1.2vw,16px) clamp(18px,2vw,28px)}
}


/* ==========================================================
   v3.8 — 화면 검수에서 나온 것 (2026-09-21, 모바일·PC 육안 대조)
   1) 세로형 주황 카드의 본문이 카드 밖으로 64px 잘리고 있었다
   2) 히어로가 아임웹과 달리 여백 안으로 들어가 있었다 (원본은 전체 폭)
   3) 히어로 그라데이션이 원본보다 진해 사진과 워드마크가 묻혔다
   4) 히어로 카테고리 칩이 흰색이었다 (원본은 라임)
   5) 주황 카드 우하단 화살표가 빠져 있었다
   ========================================================== */

/* ---- 1. 글이 카드 밖으로 나가지 않게 ---- */
.pf-info{align-items:stretch}
.pf-info > *{max-width:100%;min-width:0}
.pf-info .pf-chip{align-self:flex-start;width:auto}
.pf-card .pf-title,.pf-card .pf-excerpt,.pf-card .pf-quote-text,
.pf-card .pf-writer,.pf-card .pf-date{
  word-break:keep-all;overflow-wrap:anywhere}

/* ---- 2·3·4. 히어로 ---- */
.pf-hero{
  margin:0 0 8px;max-width:none;border-radius:0;
  min-height:0;aspect-ratio:390/425;
  background-position:center;background-size:cover}
.pf-hero::after{
  background:linear-gradient(0deg,rgba(31,31,31,.8) 0%,rgba(31,31,31,0) 100%)}
.pf-hero-body{min-height:0;height:100%;padding:40px;justify-content:flex-end}
.pf-hero .pf-chip{
  background:var(--lime);color:var(--ink);
  border-radius:8px;padding:4px 6px;font-size:10px;line-height:1;margin:0 0 8px}
.pf-hero .pf-title{font-size:24px;line-height:1.4;font-weight:700;margin:0 0 8px;
  display:block;-webkit-line-clamp:none;overflow:visible}
.pf-hero .pf-excerpt{font-size:16px;line-height:1.6;margin:0 0 8px;max-width:560px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pf-hero .pf-meta{margin:0;padding:0}
.pf-hero .pf-writer{font-size:12px;line-height:1;margin:0 0 8px}
.pf-hero .pf-date{font-size:10px;line-height:1}

@media (min-width:768px){
  .pf-hero{aspect-ratio:2.25;margin:0 0 16px}
  .pf-hero-body{padding:clamp(40px,8vw,128px)}
  .pf-hero .pf-chip{font-size:clamp(12px,1.4vw,20px);padding:clamp(5px,.55vw,8px) clamp(9px,1.1vw,16px)}
  .pf-hero .pf-title{font-size:clamp(28px,3.4vw,48px);margin-bottom:clamp(12px,1.7vw,24px)}
  .pf-hero .pf-excerpt{font-size:clamp(17px,1.7vw,24px)}
  .pf-hero .pf-writer{font-size:clamp(13px,1.3vw,18px)}
  .pf-hero .pf-date{font-size:clamp(11px,1vw,14px)}
}
@media (min-width:1024px){ .pf-hero{margin:0 0 32px} }

/* ---- 5. 주황 카드 화살표 (아임웹 실측: 모바일 25px/12px, 데스크톱 64px/40px) ---- */
.pf-card.text::after,.pf-card.pf-quote::after{
  content:"";display:block !important;position:absolute;
  right:12px;bottom:12px;width:25px;height:25px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");background-repeat:no-repeat;
  background-position:center;background-size:contain;
  z-index:3;pointer-events:none;opacity:.95}
.pf-card.pf-cta::after{display:none !important}
@media (min-width:768px){
  .pf-card.text::after,.pf-card.pf-quote::after{
    right:clamp(16px,2.6vw,40px);bottom:clamp(16px,2.6vw,40px);
    width:clamp(32px,4.4vw,64px);height:clamp(32px,4.4vw,64px)}
}

/* ---- 인용 카드 아래 글줄이 흐려 읽기 어려웠다 ---- */
.pf-card.pf-quote .pf-writer{color:#fff;opacity:.92;font-weight:400}


/* ==========================================================
   v3.9 — 카테고리 칩 색 (아임웹 실측)
   주황(텍스트) 카드 칩 = 흰색 / 사진 카드 칩 = 라임 #CDD91C / 히어로 칩 = 라임
   전부 글자 #1F1F1F, 모서리 6px(히어로만 8px), 모바일 padding 4px 6px
   ========================================================== */
.pf-card .pf-chip{background:#fff;color:var(--ink);border-radius:6px;padding:4px 6px}
.pf-card.photo .pf-chip{background:var(--lime);color:var(--ink)}
@media (min-width:1024px){
  .pf-card .pf-chip{padding:6px 12px}
}
.pf-card.pf-quote .pf-writer{opacity:1}


/* ==========================================================
   v4.0 — 더보기는 푸터 하나로
   그리드 안 더보기 카드를 걷어내 푸터와의 중복을 없앴다.
   푸터 더보기는 커서를 올리면 작아진다.
   ========================================================== */
.pf-more-link{display:inline-flex;align-items:center;gap:10px;
  transform-origin:left center;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),color .2s ease}
@media (hover:hover) and (pointer:fine){
  .pf-more-link:hover{transform:scale(.94)}
  .pf-more-link:hover span{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .pf-more-link,.pf-more-link:hover{transition:none;transform:none}
}


/* ==========================================================
   v4.1 — 넓은 주황 카드의 글 칼럼 폭
   아임웹은 854px짜리 가로형 카드에서도 글 칼럼을 362px로 묶는다.
   전폭으로 퍼지면 한 줄이 너무 길어 읽기 불편하고 원본과도 다르다.
   (데스크톱에서만. 모바일·태블릿은 원본대로 카드 폭을 다 쓴다)
   ========================================================== */
@media (min-width:1024px){
  .pf-card.wide .pf-info,.pf-card.big .pf-info,.pf-card.full .pf-info{max-width:362px}
  .pf-hero .pf-excerpt{max-width:560px}
}


/* v4.2 - 푸터 2단 (아임웹 실측: 왼쪽 Company Information 432px, 오른쪽 SNS/Contact/Resources) */
@media (min-width:1024px){
  .pf-footer-info{display:grid;grid-template-columns:432px minmax(0,1fr);grid-template-areas:"title sns" "info sns" "copy copy";column-gap:64px;align-items:start}
  .pf-footer-info > h3{grid-area:title;margin-top:0}
  .pf-footer-info > p:first-of-type{grid-area:info}
  .pf-footer-info > dl{grid-area:sns;margin:0}
  .pf-footer-info > .pf-copy{grid-area:copy;margin-top:40px}
}


/* ==========================================================
   v4.3 - 카드 hover 축소 (아임웹 원본 규칙)
   원본은 transform이 아니라 margin으로 줄인다.
     .tms-article-item:hover           { margin: 16px }
     .tms-article-item:hover .info     { margin: -16px }
     @media (max-width:991px) { 위 둘 다 margin: 0 }
   즉 데스크톱에서만 카드가 사방 16px씩(가로·세로 32px) 작아지고,
   안쪽 글은 제자리에 남는다. transition은 0.5s.
   내가 앞서 넣은 transform:none 은 원본에 transform이 없다는 뜻이지
   아무 변화도 없다는 뜻이 아니었는데, 잘못 읽고 hover를 막아 두었다.
   ========================================================== */
@media (hover:hover) and (pointer:fine) and (min-width:992px){
  .pf-card{transition:margin .5s cubic-bezier(.22,.61,.36,1)}
  .pf-card:hover{margin:16px;transform:none;filter:none}
  .pf-card:hover .pf-info{margin:-16px}
}
@media (prefers-reduced-motion:reduce){
  .pf-card:hover,.pf-card:hover .pf-info{margin:0;transition:none}
}

/* v4.4 - 글 안 사진 확대 (데스크톱만). 본문 글 폭(760px)은 그대로 두고 사진만 화면 폭에 맞춰 넓힌다. 모바일(899px 이하)은 기존 그대로. */
@media (min-width:900px){
  .pf-content p:has(> img){width:min(1400px,calc(100vw - 96px));max-width:none;margin-left:50%;transform:translateX(-50%)}
  .pf-content p:has(> img) img{display:block;width:100%;height:auto}
}

/* v4.5 - 우체통 코너를 화면 폭에 맞춰 꽉 차게 (모든 폭). 좌우 여백은 홈 카드 그리드와 같은 --pad. 모바일(899px 이하)은 기존 그대로. */
.pf-site .pf-postbox{max-width:none;margin-left:var(--pad);margin-right:var(--pad)}
/* ==========================================================
v5.0 - 상단 메뉴 하위 메뉴 (아임웹 원본 재현, 2026-10-14 실측)
PC : 메뉴 간격 33px, 하위 메뉴 글자 18px / #B2B2B2 / 줄 높이 36px / 줄 간격 44px,
     열 간격 80px, 호버하면 흰 패널이 열리고 모든 하위 메뉴가 한꺼번에 보인다.
모바일 : 왼쪽에서 300px 서랍, 14px 글자, 1px #F3F3F3 구분선, 화살표로 펼침.
========================================================== */

/* ---------- 인스타그램 아이콘 ---------- */
html body .pf-ig{display:flex;align-items:center;justify-content:center;color:#FF6F12;line-height:0}
html body .pf-ig svg{display:block}
html body .pf-ig-m{display:none}

/* ---------- PC (1000px~) ---------- */
@media (min-width:1000px){
html body .pf-nav{gap:33px}
html body .pf-nav-item{position:relative;align-self:stretch;display:flex;align-items:center}

/* 하위 메뉴 열 : 라벨 아래 90px, 열 사이 80px (라벨 간격 33px + 47px씩 밀림) */
html body .pf-nav .pf-sub{position:absolute;top:100%;left:var(--s,0px);z-index:2;
list-style:none;margin:0;padding:1px 0 0;width:max-content;white-space:nowrap;
opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
html body .pf-nav .pf-sub li{margin:0 0 8px;padding:0;height:36px;line-height:36px}
html body .pf-nav .pf-sub a{display:block;color:#B2B2B2;font-size:18px;font-weight:400;line-height:36px;
text-decoration:none;transition:color .3s ease}
html body .pf-nav .pf-sub a:hover,html body .pf-nav .pf-sub a:focus-visible{color:#FF6F12}

/* 흰 패널 : 화면 전체 너비, 높이는 가장 긴 열에 맞춘다 (6줄 = 289px) */
html body .pf-nav::after{content:"";position:absolute;z-index:0;top:100%;left:-100vw;right:-100vw;
height:calc(var(--rows,2) * 44px + 25px);background:#fff;
opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}

html body .pf-nav:hover::after,html body .pf-nav:focus-within::after,
html body .pf-nav:hover .pf-sub,html body .pf-nav:focus-within .pf-sub{opacity:1;visibility:visible}

html body .pf-dim,html body .pf-menu-close{display:none}
}

/* ---------- 모바일·태블릿 (~999px) : 왼쪽 서랍 ---------- */
@media (max-width:999.98px){
html body .pf-ig-m{display:flex;position:absolute;right:14px;top:50%;transform:translateY(-50%);width:36px;height:36px}
html body .pf-ig:not(.pf-ig-m){display:none}

html body .pf-dim{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);
opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
html.pf-menu-open body .pf-dim{opacity:1;visibility:visible}

html body .pf-menu,html body.admin-bar .pf-menu{position:fixed;top:0;bottom:0;left:0;right:auto;
width:300px;max-width:86vw;height:auto;max-height:none;overflow-y:auto;background:#fff;border:0;
transform:translateX(-100%);transition:transform .3s ease;z-index:10001;visibility:hidden}
html.pf-menu-open body .pf-menu{transform:none;visibility:visible}

html body .pf-menu-close{position:fixed;top:0;left:min(300px,86vw);z-index:10002;width:56px;height:56px;
background:none;border:0;padding:0;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
html.pf-menu-open body .pf-menu-close{opacity:1;visibility:visible}
html body .pf-menu-close span{position:absolute;left:19px;top:27px;width:20px;height:1.5px;background:#fff}
html body .pf-menu-close span:nth-child(1){transform:rotate(45deg)}
html body .pf-menu-close span:nth-child(2){transform:rotate(-45deg)}

html body .pf-menu-inner{display:block;max-width:none;margin:0;padding:56px 0 10px}
html body .pf-menu-col,html body .pf-menu-col + .pf-menu-col{margin:0;border-top:1px solid #F3F3F3}
html body .pf-menu-col:last-child{border-bottom:1px solid #F3F3F3}
html body .pf-menu-row{position:relative}
html body .pf-menu-head{margin:0;font-size:14px;font-weight:400;line-height:14px}
html body .pf-menu-head a{display:block;padding:13px 50px 14px 20px;color:rgba(33,33,33,.89);transition:color .2s ease}
html body .pf-menu-head a:hover{color:#FF6F12}

html body .pf-acc{position:absolute;top:0;right:0;width:50px;height:100%;padding:0;background:none;border:0;cursor:pointer}
html body .pf-acc::before{content:"";position:absolute;left:calc(50% - 5px);top:calc(50% - 7px);width:9px;height:9px;
border-right:1px solid #8C8C8C;border-bottom:1px solid #8C8C8C;transform:rotate(45deg);transition:transform .25s ease,top .25s ease}
html body .pf-menu-col.pf-open .pf-acc::before{transform:rotate(-135deg);top:calc(50% - 2px)}

html body .pf-menu-col ul{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
html body .pf-menu-col.pf-open ul{max-height:420px;padding-bottom:15px}
html body .pf-menu-col li a{display:block;height:29px;padding:0 20px 0 30px;font-size:14px;font-weight:400;line-height:29px;color:#333}
html body .pf-menu-col li a:hover{color:#FF6F12}
}

/* ===== v5.2 모바일 블록 배치·글자: 아임웹 모바일 13칸과 동일 =====
   아임웹 모바일 순서: 1 글카드(182) · 2 사진 | 3 큰 글카드(326) | 4~7 사진 | 8 큰 사진(352) | 9 글카드(182) · 10 세로 글카드(307) | 11·12 사진 | 13 더보기(큰)
   13칸 주기로 반복한다. PC(1000px 이상)는 그대로 둔다. */
@media (max-width:999px){
  html body .pf-site .pf-grid{align-items:start}
  html body .pf-site .pf-grid > .pf-card,
  html body .pf-site .pf-grid > .pf-cta{min-height:0;overflow:hidden;align-self:start;justify-self:stretch;width:auto}
  html body .pf-site .pf-grid > .pf-card,
  html body .pf-site .pf-grid > .pf-cta{grid-column:auto / span 2}
  html body .pf-site .pf-grid > :nth-child(13n+3),
  html body .pf-site .pf-grid > :nth-child(13n+8),
  html body .pf-site .pf-grid > :nth-child(13n),
  html body .pf-site .pf-grid > :last-child:nth-child(13n+1),
  html body .pf-site .pf-grid > :last-child:nth-child(13n+4),
  html body .pf-site .pf-grid > :last-child:nth-child(13n+6),
  html body .pf-site .pf-grid > :last-child:nth-child(13n+9),
  html body .pf-site .pf-grid > :last-child:nth-child(13n+11){grid-column:auto / span 4}
  html body .pf-site .pf-grid > .pf-card.text{aspect-ratio:auto;height:calc(var(--cell)*1.1098)}
  html body .pf-site .pf-grid > .pf-card:nth-child(13n+10){aspect-ratio:auto;height:calc(var(--cell)*1.872)}
  html body .pf-site .pf-grid > .pf-card:nth-child(13n+3){aspect-ratio:auto;height:calc((2*var(--cell) + var(--g))*0.9731)}
  html body .pf-site .pf-grid > .pf-card:nth-child(13n+8){aspect-ratio:auto;height:calc((2*var(--cell) + var(--g))*1.0507)}
  html body .pf-site .pf-grid > :nth-child(13n){aspect-ratio:1/1}
  html body .pf-site .pf-grid > .pf-card .pf-info > .pf-title{margin-bottom:calc(8*var(--u)) !important;-webkit-line-clamp:2 !important}
  html body .pf-site .pf-grid > .pf-card:nth-child(13n+3),
  html body .pf-site .pf-grid > .pf-card:nth-child(13n+8){padding:calc(20*var(--u))}
  html body .pf-site .pf-grid > .pf-card:nth-child(13n+3) .pf-info > .pf-title,
  html body .pf-site .pf-grid > .pf-card:nth-child(13n+8) .pf-info > .pf-title{font-size:calc(18*var(--u)) !important;line-height:1.4 !important;margin-bottom:0 !important;-webkit-line-clamp:3 !important}
  html body .pf-site .pf-grid > .pf-card:nth-child(13n+3) .pf-excerpt{-webkit-line-clamp:9 !important}
  html body .pf-site .pf-grid > .pf-card:nth-child(13n+10) .pf-excerpt{-webkit-line-clamp:8 !important}
}
/* ===== v5.1 PC: 큰 블록 제목 48px (아임웹 실측) ===== */
@media (min-width:1000px){
  html body .pf-site .pf-grid > .pf-card[data-shape="b"] .pf-title{font-size:48px !important;line-height:1.4 !important;-webkit-line-clamp:3 !important}
}

/* ===== v5.3 가독성: 대표 글 제목 2줄 제한 · 사진 카드 아래쪽 그림자 보강 ===== */
html body .pf-site .pf-hero .pf-title{display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2 !important;overflow:hidden}
html body .pf-site .pf-grid > .pf-card.photo{position:relative;isolation:isolate}
html body .pf-site .pf-grid > .pf-card.photo::before{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;z-index:0;pointer-events:none;background:linear-gradient(0deg,rgba(31,31,31,.55) 0%,rgba(31,31,31,0) 100%)}
html body .pf-site .pf-grid > .pf-card.photo .pf-info{position:relative;z-index:1}

/* ===== v5.4 모바일 대표 카드 높이: 아임웹 실제 폰 화면 기준 (폭 390 → 높이 약 586) ===== */
@media (max-width:540px){
  html body .pf-site .pf-hero{height:calc(100vw*1.5)}
}

/* ===== v5.5 폰(iOS)에서도 햄버거 메뉴 버튼이 항상 보이도록 크기·색을 명시 ===== */
@media (max-width:1023.98px){
html body .pf-bar .pf-menu-btn{display:flex !important;flex-direction:column;justify-content:center;align-items:center;gap:5px;flex:none;width:48px;height:48px;padding:0;-webkit-appearance:none;appearance:none;background:transparent;visibility:visible;opacity:1}
html body .pf-bar .pf-menu-btn span{display:block !important;flex:none;width:24px !important;height:2px !important;min-height:2px;background:#1f1f1f !important;border-radius:2px}
}

/* ===== v6.0 글 본문: 모바일 읽기 편하게 (사진-캡션 밀착, 단락 사이 간격 확대) ===== */
@media (max-width:999px){
  html body #pf-content p{margin:0 0 1.85em;word-break:keep-all;overflow-wrap:break-word}
  html body #pf-content h2{margin:64px 0 14px}
  html body #pf-content hr{margin:56px 0 40px}
  /* 사진 + ▲ 설명 : 설명은 사진에 바짝 붙이고, 다음 단락과는 넉넉히 띄운다 */
  html body #pf-content p:has(> img){margin:44px 0 52px;font-size:14px;line-height:1.6;color:#6e6a66;letter-spacing:0}
  html body #pf-content p:has(> img) img{display:block;width:100%;height:auto;margin:0 0 10px}
  html body #pf-content p:has(> img) br{display:none}
  html body #pf-content p:has(> img) + p{margin-top:0}
}

/* ===== v6.0 쉬어가기: 붓으로 로고가 그려지는 모션 (긴 글 중간) ===== */
.pf-brush{position:relative;margin:40px 0;padding:40px 0 6px;text-align:center;overflow:hidden}
.pf-brush svg{display:block;width:min(84px,64%);height:auto;margin:0 auto;overflow:visible}
@media (prefers-reduced-motion:reduce){.pf-brush .pf-bm{stroke-dashoffset:0 !important}.pf-brush .pf-bt{display:none}}

/* v6.2 — CTA 로고 속눈썹 깜빡임 (빠르게) + 모바일 로고 확대 + 글 안 구분선 제거(여백만) */
.pf-blink .pf-lash{transform-box:fill-box;transform-origin:50% 100%;animation:pf-blink 2.4s ease-in-out infinite}
.pf-blink .pf-lash.l{--r:-16deg}
.pf-blink .pf-lash.r{--r:16deg}
.pf-blink .pf-lash.m{--r:0deg}
.pf-blink .pf-lash:nth-of-type(n+4){animation-delay:.04s}
@keyframes pf-blink{
  0%,68%,100%{transform:none}
  72%{transform:rotate(var(--r)) scaleY(.15)}
  77%{transform:rotate(calc(var(--r)*.3)) scaleY(.95)}
  82%{transform:rotate(var(--r)) scaleY(.2)}
  88%{transform:none}
}
@media (prefers-reduced-motion:reduce){.pf-blink .pf-lash{animation:none}}
@media (max-width:540px){html body .pf-site .pf-cta .pf-cta-logo{width:100% !important;max-width:100% !important;height:auto !important;margin-left:0 !important;align-self:stretch}}
html body #pf-content hr,html body #pf-content .wp-block-separator{border:0 !important;background:none !important;height:0 !important;box-shadow:none !important;margin:44px 0 !important;opacity:1}
@media (max-width:999px){html body #pf-content hr,html body #pf-content .wp-block-separator{margin:52px 0 !important}}

/* v6.7 — PC: 상단바는 데스크톱 배치(로고 왼쪽·메뉴 가운데)로 되돌림(햄버거는 1024px 미만에서만), 사진 설명 밀착, 글-사진 간격 확대 */
@media (min-width:1024px){html body .pf-bar .pf-menu-btn,html body .pf-bar .pf-menu{display:none !important}}
@media (min-width:1000px){
  html body #pf-content p:has(> img){margin-top:72px;margin-bottom:72px;font-size:14px;line-height:1.6;color:#6e6a66;letter-spacing:0}
  html body #pf-content p:has(> img) img{display:block;width:100%;height:auto;margin:0 0 12px}
  html body #pf-content p:has(> img) br{display:none}
  html body #pf-content p:has(> img) + p{margin-top:0}
  html body #pf-content p{margin-bottom:1.6em}
  html body #pf-content h2{margin-top:72px}
  html body #pf-content hr,html body #pf-content .wp-block-separator{margin:80px 0 !important}
}

/* v6.8 PC: caption centered, no awkward breaks */
@media (min-width:1000px){
  html body #pf-content p:has(> img){text-align:center;text-wrap:balance;word-break:keep-all;overflow-wrap:normal}
}
html body #pf-content p{word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
html body #pf-content p:has(> img){text-wrap:balance}
html body #pf-content .pf-place{text-wrap:balance;word-break:keep-all}
html body #pf-content h2,html body #pf-content h3{word-break:keep-all;text-wrap:balance}