/* 리멤버 견본 사이트 — 공통 스타일
   하이어랩 사이트(packages/web/headhunting)와 같은 골격: Hahmlet 제목 · IBM Plex Sans KR 본문 · 작은 머리표 · 선 위주 구성.
   업종 톤에 맞춰 색만 바꾼다: 먹색 · 한지색 · 놋쇠색. 원색과 자극적인 강조는 쓰지 않는다. */
:root{
  color-scheme:light;
  --ink:#1D1C1A;
  --ink-2:#57534B;
  --ink-3:#9A958B;
  --ground:#F4F1EA;
  --paper:#FCFBF8;
  --line:#DCD6CA;
  --night:#1B1A18;
  --night-2:#2A2825;
  --night-ink:#EDE8DE;
  --night-ink-2:#B3AC9F;
  --accent:#7A6438;
  --accent-ink:#5E4C29;
  --accent-tint:#EFE8D9;
  --fill:#F3E3A6;
  --display:"Hahmlet","Nanum Myeongjo","Apple SD Gothic Neo",serif;
  --body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --max:1120px;
  --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.8;
  word-break:keep-all;overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.32;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--accent);margin-bottom:20px}
.eyebrow::before{content:"";display:inline-block;width:22px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px}
.lede{font-size:clamp(17px,1.6vw,19.5px);color:var(--ink-2);max-width:34em}
section{padding-block:clamp(72px,10vw,128px)}
section + section{border-top:1px solid var(--line)}
section.paper{background:var(--paper)}
h2.big{font-size:clamp(26px,3.4vw,40px);max-width:20em}
h2.big + .lede{margin-top:20px}

/* ── 견본 표시 ──
   .fill = 친구분께 받을 자료로 채울 자리. 검토 표시가 켜져 있을 때만 노랗게 보인다.
   표시를 끄면 완성본처럼 보인다(글자는 그대로). */
.sample-bar{background:var(--night);color:var(--night-ink-2);font-size:13px;line-height:1.5}
.sample-bar .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;padding-block:8px;flex-wrap:wrap}
.sample-bar b{color:var(--night-ink);font-weight:600}
.sample-bar button{font:inherit;font-size:12.5px;background:transparent;color:var(--night-ink);border:1px solid #5a564f;border-radius:4px;padding:4px 10px;cursor:pointer}
.fill{border-radius:2px}
html.check .fill{background:var(--fill);box-shadow:0 0 0 2px var(--fill);color:var(--ink);cursor:help}
html.check .night .fill,html.check .hero .fill{color:var(--ink)}
.draft-note{display:none}
html.check .draft-note{display:block;margin-top:18px;padding:10px 14px;border-left:3px solid #C9A227;background:#FBF4DA;color:#5B4A12;font-size:13.5px;line-height:1.6;max-width:46em}

/* nav — 모든 쪽 맨 위에 고정: 상호 · 24시간 번호 · 카톡 */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.brand b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.04em}
.brand small{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--ink-3)}
.menu{display:flex;gap:22px;font-size:14.5px;font-weight:500}
.menu a{text-decoration:none;color:var(--ink-2)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink)}
.menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--accent)}
.call{display:flex;align-items:center;gap:10px;flex:none}
.call .tel{font-family:var(--display);font-weight:700;font-size:17px;text-decoration:none;white-space:nowrap}
.call .tel small{font-family:var(--body);font-weight:500;font-size:11.5px;color:var(--ink-2);margin-right:6px;letter-spacing:.02em}
.call .kakao{font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 12px;white-space:nowrap}
@media (max-width:980px){.menu{display:none}}
@media (max-width:520px){.call .tel small{display:none}.call .kakao{display:none}.brand small{display:none}}

/* 하단 메뉴(좁은 화면) */
.subnav{display:none;border-bottom:1px solid var(--line);background:var(--paper);overflow-x:auto}
.subnav .wrap{display:flex;gap:18px;font-size:14px;white-space:nowrap;padding-block:10px}
.subnav a{text-decoration:none;color:var(--ink-2)}
.subnav a[aria-current="page"]{color:var(--ink);font-weight:600}
@media (max-width:980px){.subnav{display:block}}

/* hero — 먹색 바탕 */
.night{background:var(--night);color:var(--night-ink)}
.night .lede{color:var(--night-ink-2)}
.night .eyebrow{color:#C2A970}
.hero{position:relative;overflow:hidden;padding-block:clamp(72px,11vw,150px) clamp(64px,9vw,120px)}
.hero h1{font-size:clamp(34px,5.2vw,62px);font-weight:800;line-height:1.24;max-width:14em}
.hero h1 .ln{display:block}
.hero .lede{margin-top:28px;position:relative}
.hero .flower{position:absolute;right:max(-60px,calc(50% - 680px));top:50%;transform:translateY(-46%);width:min(46vw,520px);color:#C2A970;opacity:.22;pointer-events:none}
@media (max-width:760px){.hero .flower{opacity:.12;width:80vw;right:-30vw}}
.hero .wrap{position:relative}
.sub-hero{padding-block:clamp(64px,9vw,120px) clamp(56px,7vw,96px)}
.sub-hero h1{font-size:clamp(30px,4.4vw,52px)}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.btn{display:inline-block;padding:14px 22px;border-radius:6px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;transition:background .15s,color .15s,border-color .15s;font-family:inherit;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{border-color:var(--line);background:var(--paper);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-3)}
.night .btn-ghost{background:transparent;color:var(--night-ink);border-color:#4A463F}
.night .btn-ghost:hover{border-color:var(--night-ink-2)}
.btn-light{background:var(--night-ink);color:var(--night)}
.btn-light:hover{background:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 두 갈래 문 */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:56px;border-top:1px solid #3A3733}
.door{display:block;text-decoration:none;padding:28px 28px 30px 0;border-bottom:1px solid #3A3733}
.door + .door{padding-left:28px;border-left:1px solid #3A3733}
.door .who{font-size:13px;letter-spacing:.04em;color:var(--night-ink-2)}
.door h3{font-size:clamp(20px,2.2vw,26px);margin:10px 0 10px}
.door p{color:var(--night-ink-2);font-size:15.5px}
.door .go{display:inline-block;margin-top:18px;font-weight:600;font-size:14.5px;color:#D8C08A}
.door:hover .go{text-decoration:underline;text-underline-offset:5px}
@media (max-width:720px){.doors{grid-template-columns:1fr}.door + .door{padding-left:0;border-left:0}}

/* 번호 목록(약속·원칙) */
.plist{list-style:none;padding:0;margin:48px 0 0;counter-reset:p}
.plist li{counter-increment:p;display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:baseline;padding:28px 0;border-top:1px solid var(--line)}
.plist li:last-child{border-bottom:1px solid var(--line)}
.plist li::before{content:counter(p,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:var(--ink-3);letter-spacing:.08em}
.plist h3{font-size:clamp(19px,2.1vw,25px)}
.plist p{margin-top:8px;color:var(--ink-2);font-size:16px;max-width:40em}
@media (max-width:600px){.plist li{grid-template-columns:40px 1fr}}

/* 단계 */
.steps{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.steps.three{grid-template-columns:repeat(3,1fr)}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:18px}
.steps li.last{border-top-color:var(--accent)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:12px}
.steps.days li::before{content:counter(s) "일째"}
.steps h3{font-size:19px;margin-bottom:10px}
.steps p{font-size:15px;color:var(--ink-2);line-height:1.75}
@media (max-width:980px){.steps,.steps.three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps,.steps.three{grid-template-columns:1fr}}

/* 두 칸 표: 회사 몫 / 가족 몫 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:48px;border:1px solid var(--line);background:var(--paper)}
.split > div{padding:28px 30px}
.split > div + div{border-left:1px solid var(--line)}
.split h3{font-size:18px;margin-bottom:14px;display:flex;align-items:baseline;gap:10px}
.split h3 small{font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:.02em;color:var(--ink-3)}
.split ul{margin:0;padding:0;list-style:none}
.split li{padding:10px 0;border-top:1px dashed var(--line);font-size:15.5px}
.split li:first-child{border-top:0}
.split .co{background:var(--accent-tint)}
@media (max-width:720px){.split{grid-template-columns:1fr}.split > div + div{border-left:0;border-top:1px solid var(--line)}}
.notes{margin-top:24px;padding:0;list-style:none;display:grid;gap:8px;font-size:15px;color:var(--ink-2)}
.notes li{padding-left:16px;position:relative}
.notes li::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:1px;background:var(--ink-3)}

/* 카드 묶음 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 40px;margin-top:48px;border-top:1px solid var(--line)}
.cards > div{padding:24px 0;border-bottom:1px solid var(--line)}
.cards h3{font-size:18px;margin-bottom:8px}
.cards p{font-size:15px;color:var(--ink-2)}

/* 걱정 → 약속 표 */
.worry{margin-top:48px;border-top:1px solid var(--line)}
.worry > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px;padding:24px 0;border-bottom:1px solid var(--line)}
.worry .q{font-family:var(--display);font-weight:500;font-size:18px;color:var(--ink-2)}
.worry .q::before{content:"“";color:var(--accent)}
.worry .q::after{content:"”";color:var(--accent)}
.worry .a b{display:block;font-size:17px;margin-bottom:4px}
.worry .a span{font-size:15px;color:var(--ink-2)}
@media (max-width:720px){.worry > div{grid-template-columns:1fr;gap:8px}}

/* 대표 소개 */
.person{display:grid;grid-template-columns:300px 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.portrait{aspect-ratio:4/5;background:linear-gradient(160deg,#2C2A26,#1B1A18);color:#C2A970;display:grid;place-items:center;position:relative;overflow:hidden}
.portrait svg{width:62%;opacity:.35}
.portrait .pp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.portrait:has(.pp){background:#D9DADD}
.portrait .ph{position:absolute;inset:auto 0 0 0;padding:12px 14px;font-size:12.5px;line-height:1.5;color:var(--night-ink-2);background:rgba(0,0,0,.35);display:none}
html.check .portrait .ph{display:block}
.portrait .mark{position:absolute;font-family:var(--display);font-weight:800;font-size:72px;color:var(--night-ink);opacity:.9}
.person h2{font-size:clamp(30px,4vw,46px);margin-bottom:8px}
.person .role{font-size:13.5px;letter-spacing:.03em;color:var(--ink-2);margin-bottom:28px}
.prose{display:flex;flex-direction:column;gap:20px;max-width:36em;font-size:17px}
.prose .tool{padding:16px 20px;background:var(--accent-tint);border-left:3px solid var(--accent);font-size:15.5px}
.sign{margin-top:8px;font-family:var(--display);font-weight:700;font-size:20px}
.sign small{display:block;font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--ink-2)}
@media (max-width:760px){.person{grid-template-columns:1fr}.portrait{max-width:280px}}

/* 사진 자리 */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.photo{aspect-ratio:4/3;background:repeating-linear-gradient(135deg,#E9E4D9 0 10px,#EFEBE2 10px 20px);border:1px solid var(--line);display:grid;place-items:center;text-align:center;padding:16px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.photo b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:4px}
html:not(.check) .photo span{display:none}
@media (max-width:720px){.photos{grid-template-columns:1fr 1fr}}

/* 큰 인용 */
.quote{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.8vw,34px);line-height:1.5;max-width:22em;text-wrap:balance}
.quote em{font-style:normal;color:var(--accent)}
.night .quote em{color:#D8C08A}

/* FAQ */
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-family:var(--display);font-weight:700;font-size:18.5px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font-family:var(--mono);font-weight:400;font-size:22px;color:var(--ink-3)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px;color:var(--ink-2);font-size:16px;max-width:44em}

/* 문의 */
.contact .grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,5vw,72px);margin-top:48px}
form{display:grid;gap:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
input,textarea,select{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);width:100%}
textarea{min-height:130px;resize:vertical}
button.btn{justify-self:start}
.formnote{font-size:13px;color:var(--ink-3)}
.info{display:grid;gap:22px;align-content:start;font-size:16px}
.info div b{display:block;font-size:12.5px;letter-spacing:.04em;color:var(--ink-3);font-weight:500;margin-bottom:6px}
.info a{text-decoration:none;font-weight:500}
.info .big{font-family:var(--display);font-weight:800;font-size:28px}
@media (max-width:860px){.contact .grid{grid-template-columns:1fr}}

/* 띠: 다음 쪽 안내 */
.band{background:var(--night);color:var(--night-ink)}
.band .wrap{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{font-size:clamp(22px,2.8vw,32px)}
.band p{color:var(--night-ink-2);margin-top:8px}

/* footer */
footer{border-top:1px solid var(--line);padding-block:40px;font-size:13.5px;color:var(--ink-2);background:var(--ground)}
footer .wrap{display:grid;gap:10px}
footer .links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:8px}
footer .links a{text-decoration:none;font-weight:500;color:var(--ink)}
footer .legal{margin-top:10px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12.5px}

/* 휴대폰: 화면 아래 고정 전화 버튼 */
.dock{display:none}
@media (max-width:720px){
  .dock{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--night);border-top:1px solid #3A3733;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));gap:8px}
  .dock a{display:block;text-align:center;text-decoration:none;padding:12px 8px;border-radius:6px;font-weight:600;font-size:15px}
  .dock .d-tel{background:var(--accent);color:#fff}
  .dock .d-kakao{border:1px solid #4A463F;color:var(--night-ink)}
  body{padding-bottom:72px}
}

/* 움직임 — 기본값은 전부 보임. JS가 켜질 때만 .motion 이 붙는다. */
.motion .rise{opacity:0;transform:translateY(14px)}
.motion .rise.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.motion .hero h1 .ln{opacity:0;transform:translateY(16px)}
.motion .hero h1 .ln.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){
  .motion .rise,.motion .hero h1 .ln{opacity:1!important;transform:none!important;transition:none!important}
}
@media print{.sample-bar,.dock,.nav,.subnav{display:none}}