/* signature.nanoscentkorea.com — 구조·형태는 참고 사이트(headspa)의 공개 CSS 기준, 컬러는 자체 선정(브론즈/샌드) */
:root{
  --bg:#fff; --sand:#f5efe6; --mist:#ece6da; --ink:#211e1b; --ink-soft:#5a544d; --ink-mute:#8b857c;
  --head:#2e2924; --line:#e3dccf; --brand:#7b5a37; --brand-dark:#5e4328; --brand-soft:#f0e8dc;
  --maxw:1180px; --gutter:24px; --gutter-lg:40px; --section-py:88px; --section-py-sm:56px; --header-h:80px;
  --serif:"Noto Serif KR","Nanum Myeongjo","Apple SD Gothic Neo",serif;
  --sans:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --fs-h1:clamp(32px,4.6vw,52px); --fs-h2:clamp(25px,2.6vw,38px); --fs-h3:clamp(18px,1.5vw,22px);
  --btn-h:52px; --btn-h-sm:44px; --btn-radius:4px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:10px 16px;z-index:200}
.skip-link:focus{left:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
@media(min-width:1024px){.wrap{padding:0 var(--gutter-lg)}}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);padding:0 28px;border-radius:var(--btn-radius);font-size:15.5px;font-weight:500;border:1px solid var(--line);background:transparent;color:var(--ink);transition:background .15s,color .15s,border-color .15s;white-space:nowrap;cursor:pointer}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn--sm{height:var(--btn-h-sm);padding:0 20px;font-size:14.5px}
.btn--solid{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--solid:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link-arrow{display:inline-flex;gap:8px;font-size:14.5px;font-weight:500;padding-bottom:3px;border-bottom:1px solid var(--ink-mute)}
.link-arrow:hover{color:var(--brand);border-color:var(--brand)}

/* 헤더 */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid rgba(33,30,27,.08);height:var(--header-h)}
.site-header__bar{height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:24px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:44px;height:auto}
.brand span{font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--ink-mute);padding-left:10px;border-left:1px solid var(--line);white-space:nowrap}
.site-nav{display:flex;gap:30px;justify-self:center}
.site-nav a{font-family:var(--serif);font-size:13.5px;font-weight:500;letter-spacing:.12em;color:var(--ink-soft);padding:6px 2px}
.site-nav a:hover{color:var(--brand)}
.site-header .btn{justify-self:end}
@media(max-width:1023px){
  .site-header__bar{grid-template-columns:1fr auto}
  .site-nav{display:none}
  .brand span{display:none}
}

/* 히어로 (hero-intro + hero-image) */
.hero-intro{padding:72px 0 40px;background:var(--bg)}
.hero-intro__inner{max-width:680px;margin:0 auto;text-align:center}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);display:block;margin-bottom:14px}
.hero-intro h1{font-family:var(--serif);font-size:var(--fs-h1);font-weight:500;letter-spacing:-.01em;line-height:1.25;color:var(--head)}
.hero-intro__copy{margin-top:18px;font-family:var(--serif);font-size:clamp(18px,1.9vw,22px);color:var(--ink-soft);line-height:1.7}
.hero-intro__fact{margin-top:14px;font-size:14.5px;color:var(--ink-mute)}
.hero-intro__fact strong{color:var(--ink);font-weight:600}
.hero-intro .btn-row{justify-content:center;margin-top:28px}
.hero-image{padding-bottom:var(--section-py)}
.hero-image img{width:100%;height:auto;max-height:78vh;object-fit:cover}

/* 중앙 소개문 */
.intro-statement{padding:8px 0 104px;text-align:center}
.intro-statement p{font-family:var(--serif);font-size:clamp(20px,2.6vw,32px);line-height:1.75;color:var(--head);font-weight:400;max-width:760px;margin:0 auto}
.intro-statement span{display:block}

/* 좌우 분할 패널 */
.feature-split{display:flex;width:100%}
.feature-split__panel{position:relative;flex:1 1 50%;height:clamp(360px,42vw,560px);overflow:hidden;display:block;background:var(--mist)}
.feature-split__panel img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.feature-split__panel:hover img{transform:scale(1.03)}
.feature-split__panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(33,30,27,.55),rgba(33,30,27,.05) 55%)}
.feature-split__label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:32px 36px;color:#fff}
.feature-split__title{display:block;font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);font-weight:500}
.feature-split__sub{display:block;margin-top:6px;font-size:14px;opacity:.9}
@media(max-width:820px){.feature-split{flex-direction:column}.feature-split__panel{flex:0 0 auto;height:340px}}

/* 섹션 공통 */
.sec{padding:var(--section-py) 0}
.sec--sand{background:var(--sand)}
.sec--mist{background:var(--mist)}
.sec-head{max-width:680px;margin-bottom:40px}
.sec-title{font-family:var(--serif);font-size:var(--fs-h2);font-weight:500;letter-spacing:-.005em;line-height:1.3;color:var(--head)}
.sec-desc{margin-top:16px;color:var(--ink-soft);line-height:1.75}
@media(max-width:600px){.sec{padding:var(--section-py-sm) 0}}

/* 상품 영역 (case-slider 형태: 좌측 헤드 + 우측 카드) */
.cases{padding:var(--section-py) 0;background:#fff}
.cases__inner{display:flex;gap:48px;align-items:flex-start}
.cases__head{flex:0 0 34%;max-width:34%;position:sticky;top:calc(var(--header-h) + 24px)}
.cases__head p{margin-top:16px;color:var(--ink-soft)}
.pgrid{flex:1 1 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:40px 28px;min-width:0}
.pcard{display:flex;flex-direction:column}
.pcard__media{aspect-ratio:4/5;overflow:hidden;background:var(--sand)}
.pcard__media img{width:100%;height:100%;object-fit:cover}
.pcard__body{display:flex;flex-direction:column;flex:1;padding-top:20px}
.pcard__eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--brand)}
.pcard__title{font-family:var(--serif);font-size:17px;font-weight:500;line-height:1.5;color:var(--head);margin-top:6px}
.pcard__desc{font-size:14.5px;color:var(--ink-soft);margin-top:10px;line-height:1.65}
.pcard__specs{margin-top:12px;font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.pcard__specs li{padding-left:14px;position:relative;margin-top:4px}
.pcard__specs li::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:1px;background:var(--ink-mute)}
.pcard__price{margin-top:auto;padding-top:18px;font-size:14px;color:var(--ink-mute)}
.pcard__price strong{display:block;font-size:22px;color:var(--ink);font-weight:600;margin-top:2px}
.pcard .btn{margin-top:14px;width:100%}
.ptile{border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;justify-content:center;gap:14px;background:var(--sand)}
.ptile h3{font-family:var(--serif);font-size:20px;font-weight:500;color:var(--head)}
.ptile p{font-size:14.5px;color:var(--ink-soft)}
.price-note{font-size:13px;color:var(--ink-mute);margin-top:20px}
.cases .price-note{grid-column:1/-1;margin-top:-8px}
@media(max-width:1023px){.cases__inner{flex-direction:column;gap:32px}.cases__head{position:static;max-width:none;flex:0 0 auto}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}}

/* 갤러리 모자이크 (공간·정보 타일) */
.gallery{padding:var(--section-py-sm) 0 var(--section-py)}
.gallery__head{max-width:var(--maxw);margin:0 auto 32px;padding:0 var(--gutter);text-align:center}
.gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.gtile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.gtile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gtile:hover img{transform:scale(1.045)}
.gtile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(33,30,27,.6),rgba(33,30,27,0) 60%)}
.gtile__tag{position:absolute;top:14px;left:16px;z-index:2;font-size:11px;letter-spacing:.14em;color:#fff;font-weight:600}
.gtile__kw{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff;font-family:var(--serif);font-size:clamp(17px,1.8vw,22px);font-weight:500;line-height:1.35}
@media(max-width:820px){.gallery__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gallery__grid{grid-template-columns:1fr}}

/* 정의/공간/순서 */
.defs{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.defs h3{font-family:var(--serif);font-size:var(--fs-h3);font-weight:500;color:var(--head);margin-bottom:12px}
.defs p{color:var(--ink-soft);font-size:15.5px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.card{padding:28px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.card h3{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--head);margin:10px 0}
.card p{font-size:14.5px;color:var(--ink-soft)}
.tag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--brand);border:1px solid var(--brand);padding:2px 10px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;list-style:none}
.step{border-top:2px solid var(--brand);padding-top:16px}
.step__num{font-family:var(--serif);font-size:26px;color:var(--brand)}
.step h3{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--head);margin:6px 0 8px}
.step p{font-size:14.5px;color:var(--ink-soft)}
@media(max-width:1023px){.defs{grid-template-columns:1fr;gap:28px}.cards4{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cards4,.steps{grid-template-columns:1fr}}

/* 표 */
.table-wrap{overflow-x:auto}
.spec-table{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
.spec-table caption{text-align:left;font-size:13px;color:var(--ink-mute);padding-bottom:10px}
.spec-table th,.spec-table td{padding:14px 16px;border:1px solid var(--line);text-align:left;vertical-align:top}
.spec-table thead th{background:var(--sand);font-weight:600;color:var(--head)}
.spec-table tbody th{font-weight:600;white-space:nowrap}
@media(max-width:700px){
  .spec-table thead{display:none}
  .spec-table caption{display:block;width:100%}
  .spec-table,.spec-table tbody,.spec-table tr,.spec-table th,.spec-table td{display:block;width:100%}
  .spec-table tr{margin-bottom:16px;border:1px solid var(--line)}
  .spec-table th,.spec-table td{border:0;border-bottom:1px solid var(--line)}
  .spec-table td::before{content:attr(data-label);display:block;font-size:12px;color:var(--ink-mute)}
}

/* 안내 + 문의 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split__media img{width:100%;height:auto}
.checklist{margin-top:18px}
.checklist li{padding:10px 0 10px 22px;position:relative;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-soft)}
.checklist li::before{content:"";position:absolute;left:0;top:1.35em;width:10px;height:1px;background:var(--brand)}
.checklist a{border-bottom:1px solid var(--ink-mute)}
.contact-box{margin-top:28px;padding:28px;background:#fff;border:1px solid var(--line)}
.contact-box h3{font-family:var(--serif);font-size:20px;font-weight:500;color:var(--head)}
.contact-box p{margin:8px 0 18px;font-size:15px;color:var(--ink-soft)}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);background:#fff}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 4px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--brand)}
.faq details[open] summary::after{content:"\2212"}
.faq summary h3{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--head);display:inline}
.faq__a{padding:0 4px 22px;color:var(--ink-soft);font-size:15.5px;max-width:820px}

/* CTA */
.cta{background:var(--mist);padding:var(--section-py-sm) 0}
.cta__inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta__heading{font-family:var(--serif);font-size:clamp(20px,2vw,26px);font-weight:500;color:var(--head)}
.cta__sub{margin-top:8px;font-size:15px;color:var(--ink-soft);max-width:520px}
@media(max-width:700px){.cta__inner{flex-direction:column;align-items:flex-start}.cta .btn{width:100%}}

/* 푸터 */
.site-footer{background:var(--sand);border-top:1px solid var(--line);padding:44px 0 96px}
.site-footer__brand{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--head)}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 20px;font-size:13.5px;color:var(--ink-soft)}
.site-footer__nav a:hover{color:var(--brand)}
.site-footer__biz{font-style:normal;font-size:13px;color:var(--ink-soft);line-height:1.7;display:flex;flex-wrap:wrap;gap:2px 18px;max-width:760px}

/* 플로팅 */
.floating{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;gap:8px}
.floating .btn{background:#fff;box-shadow:0 4px 14px rgba(33,30,27,.14)}
.floating .btn--solid{background:var(--brand)}
@media(max-width:600px){.floating{left:12px;right:12px}.floating .btn{flex:1}}

/* NSEO */
.crumb{font-size:13px;color:var(--ink-mute);margin-bottom:20px}
.crumb span{margin:0 8px}
.crumb a:hover{color:var(--brand)}
.nseo-hero{background:var(--sand);padding:56px 0;border-bottom:1px solid var(--line)}
.nseo-hero h1{font-family:var(--serif);font-size:var(--fs-h1);font-weight:500;line-height:1.25;color:var(--head);max-width:760px}
.nseo-lead{margin-top:18px;font-size:17.5px;color:var(--ink-soft);max-width:760px;line-height:1.8}
.nseo-body{padding-top:20px;padding-bottom:var(--section-py)}
.nseo-sec{padding:48px 0 0}
.nseo-sec h2{font-family:var(--serif);font-size:var(--fs-h2);font-weight:500;line-height:1.3;color:var(--head);margin-bottom:18px}
.nseo-sec p{color:var(--ink-soft);margin-top:14px;max-width:760px}
.nseo-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.nseo-grid--one{grid-template-columns:1fr}
.nseo-fig img{width:100%;height:auto}
.nseo-sec--story{background:var(--sand);padding:40px 36px;margin-top:48px}
.nseo-steps{margin-top:24px}
.nseo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:20px}
.nseo-quote{border-left:3px solid var(--brand);padding:6px 0 6px 24px}
.nseo-quote p{font-family:var(--serif);font-size:22px;color:var(--head);margin:0;max-width:760px}
.nseo-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;margin-top:20px}
.nseo-ba__arrow{align-self:center;color:var(--brand);font-size:22px}
.pgrid--nseo{grid-template-columns:repeat(3,1fr);margin-top:24px}
.nseo-more{padding-top:56px}
.nseo-cta{margin-top:64px;padding:40px;background:var(--mist);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.nseo-cta h2{margin:0;font-size:clamp(20px,2vw,26px)}
.page-narrow{max-width:760px;margin:0 auto;padding:72px var(--gutter)}
@media(max-width:900px){.nseo-grid{grid-template-columns:1fr;gap:24px}.nseo-cards,.pgrid--nseo{grid-template-columns:1fr}.nseo-ba{grid-template-columns:1fr}.nseo-ba__arrow{transform:rotate(90deg);justify-self:center}.nseo-sec--story{padding:28px 20px}}

.nseo-tagline{margin-top:16px;font-family:var(--serif);font-size:clamp(19px,2vw,24px);color:var(--brand-dark);line-height:1.6}

/* ===== 디자인 개선: 섹션·헤딩 구분, 고민 카드, 마커, 모바일 버튼 ===== */
.sec{border-top:1px solid var(--line)}
.sec--sand,.sec--mist{border-top:0}
.sec-head{position:relative;padding-top:22px;margin-bottom:44px}
.sec-head::before{content:"";position:absolute;top:0;left:0;width:44px;height:3px;background:var(--brand)}
.sec-title{letter-spacing:-.02em;font-weight:500}
.sec-desc{font-size:16px}
.gallery__head{text-align:center}
.gallery__head .eyebrow{margin-bottom:10px}
.eyebrow::before{content:"";display:inline-block;width:18px;height:1px;background:var(--brand);vertical-align:middle;margin-right:10px}
.hero-intro .eyebrow::before,.gallery__head .eyebrow::before{display:none}
.cases__head .eyebrow::before{display:inline-block}

/* h3 위계: 본문 카드 제목은 세리프 + 상단 가는 선 */
.card h3,.worry h3,.defs h3,.step h3{font-family:var(--serif);font-weight:500;color:var(--head);letter-spacing:-.01em}
.pcard__title{font-size:16px}

/* 고민 카드 */
.worries{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.worry{background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);padding:28px 24px 24px;display:flex;flex-direction:column;gap:12px;transition:transform .2s,box-shadow .2s}
.worry:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(33,30,27,.08)}
.worry h3{font-size:19px;line-height:1.45}
.worry p{font-size:15px;color:var(--ink-soft);flex:1}
.worry .link-arrow{align-self:flex-start}
.worry .link-arrow::after{content:"\2192";margin-left:2px}
.brand-line{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);max-width:780px;font-family:var(--serif);color:var(--ink-soft);font-size:16px;line-height:1.85}

/* 숫자 마커 제거 → 선/점 마커 */
.step__mark{display:block;width:10px;height:10px;border-radius:50%;background:var(--brand);margin-bottom:4px}
.step{border-top:1px solid var(--line);padding-top:18px}
.steps .step:hover{border-top-color:var(--brand)}
.gtile__kw{font-size:clamp(17px,1.8vw,22px)}
.gtile__kw::after{content:"\2192";margin-left:8px;opacity:.85}

/* 카드 정리 */
.card{transition:background .2s}
.card:hover{background:var(--sand)}
.pcard{padding-bottom:8px}
.pcard__body{border-top:0}
.cases{border-top:1px solid var(--line)}
.faq summary{padding:22px 44px 22px 4px}
.faq summary:hover h3{color:var(--brand)}

/* NSEO 섹션 구분 */
.nseo-sec{border-top:1px solid var(--line);margin-top:48px;padding-top:44px}
.nseo-sec:first-child,.nseo-sec--story{border-top:0}
.nseo-sec h2{position:relative;padding-top:18px}
.nseo-sec h2::before{content:"";position:absolute;top:0;left:0;width:36px;height:3px;background:var(--brand)}
.nseo-sec--story h2::before{background:var(--brand-dark)}
.nseo-sec h3{font-family:var(--serif);font-weight:500}

@media(max-width:1023px){.worries{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  :root{--section-py:64px;--btn-h:50px}
  body{font-size:16px}
  .worries{grid-template-columns:1fr;gap:14px}
  .worry{padding:22px 20px}
  .sec-head{margin-bottom:32px}
  /* 버튼: 한 줄에 하나, 전체 폭, 손가락 크기 */
  .btn-row{flex-direction:column;gap:10px;width:100%}
  .btn-row .btn,.hero-intro .btn,.contact-box .btn,.cta .btn,.nseo-cta .btn{width:100%;height:52px;font-size:16px}
  .hero-intro{padding:48px 0 28px}
  .hero-intro .btn-row{align-items:stretch}
  .site-header .btn{height:40px;padding:0 14px;font-size:13.5px}
  .brand img{width:38px}
  .floating{padding:10px 12px calc(10px + env(safe-area-inset-bottom));left:0;right:0;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid var(--line);gap:8px}
  .floating .btn{height:46px;box-shadow:none;font-size:15px}
  .site-footer{padding-bottom:110px}
  .cta__inner{gap:18px}
  .nseo-cta{padding:28px 20px}
  .feature-split__label{padding:22px 20px}
}

/* 상품 영역: 좌측 빈 공간 제거 — 헤드 상단 배치 + 3열 그리드 */
.cases__inner{flex-direction:column;gap:40px;align-items:stretch}
.cases__head{position:static;max-width:680px;flex:0 0 auto}
.pgrid{grid-template-columns:repeat(3,1fr);gap:48px 28px}
.ptile{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ptile h3,.ptile p{margin:0}
@media(max-width:1023px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}.ptile{flex-direction:column;align-items:stretch}.ptile .btn{width:100%}}
.sec-head .eyebrow::before{display:none}

/* 하단 연결: 사진카드형 링크 */
.pagecards{padding:var(--section-py) 0;background:var(--sand);border-top:1px solid var(--line)}
.pagecards__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.pagecard{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);transition:transform .25s,box-shadow .25s,border-color .25s}
.pagecard:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(33,30,27,.1);border-color:var(--brand)}
.pagecard__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.pagecard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pagecard:hover .pagecard__media img{transform:scale(1.05)}
.pagecard__body{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;flex:1}
.pagecard__title{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--head)}
.pagecard__desc{font-size:14.5px;color:var(--ink-soft);line-height:1.6;flex:1}
.pagecard__more{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--brand)}
.pagecard__more::after{content:"\2192";margin-left:6px;transition:margin .2s}
.pagecard:hover .pagecard__more::after{margin-left:12px}
@media(max-width:1023px){.pagecards__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pagecards__grid{grid-template-columns:1fr}.pagecard{flex-direction:row}.pagecard__media{flex:0 0 38%;aspect-ratio:auto}.pagecard__body{padding:14px 16px}.pagecard__desc{display:none}}