/* about_01 (인사말) — 원본 about_01.css 를 #qm 래퍼 없이 .post-content 기준으로 변환 + 다크모드/반응형/cover
   · 사이트 기본 테마는 다크, 라이트는 html[data-theme="light"]
   · 원본 백업: /hosting/qminmom.co.kr/backup/about_01.css.bak-20261006 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@600;700;900&display=swap');
.post-content{
  --max:1200px; --pad:24px;
  --gold:#f0b030; --gold-d:#f3b94a; --gold-l:rgba(240,176,48,.14);
  --ink:#f6efe3; --text:#e6dccc; --muted:#a99d8e; --line:#3a342b;
  --bg:#26211b; --hero:#26211b; --shadow:rgba(0,0,0,.6);
  --grad:radial-gradient(circle at 35% 25%,#ffe9a8,#f4b73a 55%,#c27c00);
}
html[data-theme="light"] .post-content{
  --gold:#e8a317; --gold-d:#c27c00; --gold-l:#fff3d6;
  --ink:#2a2118; --text:#3a3129; --muted:#7d7166; --line:#ece3d4;
  --bg:#fffaf1; --hero:#fffaf1; --shadow:rgba(120,80,0,.45);
}
html,body{overflow-x:clip}
.post-content{font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--text);line-height:1.85;word-break:keep-all;-webkit-font-smoothing:antialiased}
/* 100% 폭 섹션 */
.post-content .greet,.post-content .hero{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.post-content strong{font-weight:700}
.post-content img{max-width:100%}
.post-content *,.post-content *::before,.post-content *::after{box-sizing:border-box}
.post-content h1,.post-content h2,.post-content p,.post-content div,.post-content span,.post-content b,.post-content strong,.post-content em,.post-content ul,.post-content li{margin:0;padding:0}
.post-content ul{list-style:none}
.post-content .in{width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.post-content .serif{font-family:'Noto Serif KR','Batang',serif}

/* 이미지 박스 cover: style="--img:url('경로')" */
.post-content .bg{background-image:var(--img,none),var(--grad);background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat}

/* Hero */
.post-content .hero{padding:clamp(70px,11vw,130px) 0 clamp(48px,7vw,80px);background:var(--hero)}
.post-content .crumb{font-size:15px;color:var(--gold-d);letter-spacing:.12em;margin-bottom:14px;font-weight:500}
.post-content .crumb span{opacity:.5;margin:0 8px}
.post-content .hero h1{font-size:clamp(28px,4.6vw,48px);font-weight:900;line-height:1.35;color:var(--ink);letter-spacing: -2px !important;}
.post-content .hero h1 em{font-style:normal;color:var(--gold-d)}

/* Greeting */
.post-content .greet{padding:clamp(48px,7vw,90px) 0 clamp(60px,9vw,110px)}
.post-content .wrap{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.post-content .portrait{position:relative;aspect-ratio:4/5;width:100%;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -34px var(--shadow);
  --grad:radial-gradient(circle at 35% 25%,#ffe9a8,#f4b73a 55%,#c27c00);display:grid;place-items:center}
.post-content .portrait .q{font-family:'Noto Serif KR',serif;font-size:clamp(90px,14vw,150px);font-weight:900;color:rgba(255,255,255,.55);line-height:1}
.post-content .portrait .name{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;color:#fff;background:linear-gradient(0deg,rgba(30,18,0,.72),transparent)}
.post-content .portrait .name small{display:block;font-size:14px;letter-spacing:.14em;opacity:.85}
.post-content .portrait .name b,.post-content .portrait .name strong{font-size:20px}
.post-content .quote{font-family:'Noto Serif KR',serif;font-size:clamp(21px,2.8vw,30px);line-height:1.6;color:var(--ink);font-weight:700;padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--line);position:relative;letter-spacing: -2px;}
.post-content .quote::before{content:"“";display:block;font-size:56px;line-height:.8;color:var(--gold);margin-bottom:8px}
.post-content .quote em{font-style:normal;color:var(--gold-d)}
.post-content .body p{font-size:clamp(16px,1.5vw,16.5px);margin-bottom:16px;color:var(--text)}
.post-content .body p b,.post-content .body p strong{color:var(--ink)}
.post-content .body .hi{margin:22px 0;padding:18px 22px;border-left:4px solid var(--gold);background:var(--gold-l);border-radius:0 14px 14px 0;color:var(--ink);font-weight:500}
.post-content .vals{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 8px}
.post-content .vals em{font-style:normal;font-size:15px;padding:7px 16px;border-radius:30px;border:1px solid var(--gold);color:var(--gold-d);font-weight:700}
.post-content .sign{margin-top:30px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:16px}
.post-content .sign b,.post-content .sign strong{font-family:'Noto Serif KR',serif;font-size:clamp(22px,2.4vw,26px);color:var(--ink);letter-spacing:.12em}


@media (max-width:820px){
  .post-content .wrap{grid-template-columns:1fr}
  .post-content .portrait{max-width:340px;margin:0 auto;aspect-ratio:1/1}
}

/* ---- 에디터가 대표 사진 <img> 를 .name > small 안에 넣어 둔 것을 박스 전체 cover 로 ---- */
.post-content .portrait .name{position:static;padding:0;background:none}
.post-content .portrait .name small{display:block;font-size:0;letter-spacing:0;opacity:1}
.post-content .portrait .name img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:center top;margin:0!important;top:0!important;left:0!important;border-radius:0;display:block}
.post-content .portrait .q{position:relative;z-index:0}
.post-content .portrait .name strong{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:48px 22px 20px;color:#fff;font-size:20px;background:linear-gradient(0deg,rgba(30,18,0,.78),transparent)}
.post-content .portrait .name strong::before{content:"CEO";display:block;font-size:14px;letter-spacing:.14em;opacity:.85;font-weight:400}

/* ---- 상단 타이틀 영역: 본문 배경과 동일, 100% 폭 ---- */
.content-title-area{width:100vw;box-sizing:border-box;margin:0 calc(50% - 50vw) -5px !important;padding:44px 24px 0 !important;text-align:center;position:relative;z-index:1}
html[data-theme="light"] .content-title-area{}
.subpage-grid.subpage-grid--full{margin-top:0 !important}
.content-title-area + .post-content{margin-top:0 !important}

/* 다크 대비 보정 */
.post-content .body .hi{color:var(--ink)}
.post-content .vals em{background:transparent}
@media (max-width:820px){
  .post-content .portrait{max-width:340px;margin:0 auto;aspect-ratio:4/5}
  .post-content .quote{font-size:clamp(19px,5vw,24px)}
}
@media (max-width:480px){
  .post-content .portrait{max-width:100%}
  .post-content .sign{gap:8px}
  .post-content .vals em{font-size:14.5px;padding:6px 12px}
}