/* ==========================================================================
   OBJECT OBJECT — 리디자인 공용 시트 (objectstudio 전용)
   handoff README 확정 토큰. 기존 oo-common.css 의 --ink/--accent/--line 과
   충돌하지 않도록 전부 --oo- 접두사로 새 네임스페이스를 씁니다.
   기존 시트를 수정하지 않고 이 파일만 추가로 로드합니다.
   ========================================================================== */

:root{
  --oo-paper:#F7F2E9;
  --oo-paper-card:#FDF9F2;
  --oo-white:#FFFFFF;
  --oo-ink:#2B241E;
  --oo-ink-body:#3A322A;
  --oo-ink-muted:#6C6157;
  /* 작은 글씨(10~12px 라벨)에 쓰이는데 크림 배경에서 3.1:1 밖에 안 나와
     흐릿했습니다. 권장 최소 4.5:1 을 넘도록 한 단계 내렸습니다. */
  --oo-ink-faint:#6E6458;          /* 크림 5.2:1 · 푸터 4.7:1 */

  /* 테라코타는 "배경으로 깔 때"와 "글씨로 쓸 때" 필요한 밝기가 다릅니다.
     - 배경(--oo-terracotta): 위에 흰 글씨가 올라가므로 조금 어두워야 함 (4.9:1)
     - 글씨(--oo-terracotta-dark): 밝은 배경 위에 얹히므로 더 어두워야 함 (4.8~5.6:1)
     예전엔 둘 다 #D2542A 한 색으로 써서 양쪽 다 기준 미달이었습니다. */
  --oo-terracotta:#C24A22;         /* 배경용 — 흰 글씨 4.9:1 */
  --oo-terracotta-dark:#B03F18;    /* 글씨용 */
  --oo-terracotta-light:#EE7A4A;
  --oo-cream:#F5E7CF;
  --oo-peach:#F4E1C9;
  --oo-lime:#C6E85C;
  --oo-lime-text:#3C4A18;
  --oo-cobalt:#5A9BE8;
  --oo-cobalt-bg:#CBDEF8;
  --oo-cobalt-text:#1B4F92;
  --oo-border:#E4DCD0;
  --oo-hairline:#EFE9E0;
  --oo-menu-bg:#F0E9DE;

  --oo-shadow-card:0 2px 10px rgba(112,96,80,0.05);
  --oo-shadow-sticker:0 6px 18px rgba(112,96,80,0.3);
  --oo-shadow-chat:0 8px 24px rgba(160,70,40,0.35);
  /* 타이포 — 본문 --oo-sans / 제목 --oo-serif
     --oo-serif 라는 이름이지만 지금은 고딕(나눔고딕)이 들어 있습니다.
     쓰이는 자리가 "제목"이라 이름은 그대로 두고 값만 바꿉니다. */
  --oo-sans:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --oo-serif:'Nanum Gothic','Apple SD Gothic Neo',sans-serif;

  --oo-max:1360px;
  --oo-pad:56px;
}
@media (max-width:900px){ :root{ --oo-pad:24px; } }

*{ box-sizing:border-box; }
html{ scroll-behavior:auto; scroll-padding-top:24px; }
body{
  margin:0; background:var(--oo-paper); color:var(--oo-ink-body);
  font-family:var(--oo-sans);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
.serif{ font-family:var(--oo-serif); letter-spacing:-0.2px; }
a{ color:var(--oo-terracotta-dark); text-decoration:none; }
a:hover{ color:var(--oo-terracotta-dark); }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
*:focus-visible{ outline:2px solid var(--oo-cobalt); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

.wrap{ max-width:var(--oo-max); margin:0 auto; padding-left:var(--oo-pad); padding-right:var(--oo-pad); }
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:2.4px; color:var(--oo-terracotta-dark); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ---------- 타이포 ---------- */
.h1-page{
  font-size:clamp(34px,4vw,52px); line-height:1.3; font-weight:600;
  letter-spacing:-1.2px; color:var(--oo-ink); margin:16px 0 18px;
  word-break:keep-all; text-wrap:balance;
}
.h2-sec{
  font-size:clamp(28px,3vw,42px); font-weight:600; letter-spacing:-0.8px;
  color:var(--oo-ink); margin:14px 0 0; line-height:1.32;
  word-break:keep-all; text-wrap:balance;
}
.lead{
  font-size:16px; line-height:1.85; color:var(--oo-ink-muted);
  margin:0; max-width:540px; word-break:keep-all;
}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-block; border-radius:99px; font-size:14.5px; font-weight:700;
  padding:16px 30px; white-space:nowrap; cursor:pointer; border:none;
  transition:background .2s ease, color .2s ease;
}
.btn--terra{ background:var(--oo-terracotta); color:#fff; }
.btn--terra:hover{ background:var(--oo-terracotta-dark); color:#fff; }
.btn--ink{ background:var(--oo-ink); color:#fff; }
.btn--ink:hover{ background:#1B1611; color:#fff; }
.btn--outline{ border:2px solid var(--oo-ink); color:var(--oo-ink); background:transparent; }
.btn--outline:hover{ background:var(--oo-ink); color:#fff; }
.btn--white{ background:#fff; color:var(--oo-terracotta-dark); }
.btn--white:hover{ background:#FFF4EE; color:var(--oo-terracotta-dark); }

/* ---------- 자리표시자 ---------- */
.ph{
  background:var(--oo-peach); display:flex; align-items:center; justify-content:center;
  color:#736044; font-family:ui-monospace,monospace; font-size:12px; text-align:center;
  overflow:hidden;
}
.ph img{ width:100%; height:100%; object-fit:cover; }

/* ---------- 칩 / 태그 ---------- */
.chip{
  font-size:12.5px; font-weight:600; padding:9px 17px; border-radius:99px;
  cursor:pointer; white-space:nowrap; background:#fff; color:#5C5348;
  border:1px solid var(--oo-border);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover{ border-color:var(--oo-terracotta); color:var(--oo-terracotta-dark); }
.chip.is-on,.chip[aria-pressed="true"]{
  background:var(--oo-terracotta); color:#fff; border-color:var(--oo-terracotta);
}
.tag{
  font-size:11.5px; font-weight:700; padding:7px 14px; border-radius:99px;
  background:var(--oo-cobalt-bg); color:var(--oo-cobalt-text); white-space:nowrap;
}

/* ---------- 카드 ---------- */
.card{
  background:var(--oo-paper-card); border:1px solid var(--oo-border);
  border-radius:14px; box-shadow:var(--oo-shadow-card); min-width:0;
}

/* ---------- 섹션 ---------- */
.section{ padding-top:clamp(60px, 7.5vh, 104px); }
.section__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-bottom:40px; flex-wrap:wrap;
}
.more-link{ font-size:14px; font-weight:700; white-space:nowrap; }
.band{ background:var(--oo-cream); margin-top:clamp(60px, 7.5vh, 104px); padding:clamp(60px, 7.5vh, 104px) 0; }
.band .section{ padding-top:0; }
.band .eyebrow{ color:#B0451F; }

/* ---------- SiteNav ---------- */
.oo-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px 36px;
  background:rgba(247,242,233,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--oo-border);
}
.oo-nav__brand{ display:flex; align-items:baseline; gap:10px; color:var(--oo-ink); flex-shrink:0; white-space:nowrap; }
.oo-nav__brand:hover{ color:var(--oo-ink); }
.oo-nav__logo{ font-size:18px; font-weight:700; letter-spacing:-0.4px; }
.oo-nav__tag{ font-size:10px; letter-spacing:1.6px; color:var(--oo-ink-faint); }
.oo-nav__right{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.oo-nav__menu{
  display:flex; align-items:center; gap:4px; padding:4px;
  border-radius:99px; background:var(--oo-menu-bg);
  font-size:13.5px; font-weight:600; white-space:nowrap;
}
.oo-nav__menu a{
  color:#5F564C; padding:8px 15px; border-radius:99px; white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
.oo-nav__menu a:hover{ color:var(--oo-ink); }
.oo-nav__menu a[aria-current="page"]{ background:var(--oo-terracotta); color:#fff; }
.oo-nav__cta{
  padding:12px 22px; border-radius:99px;
  background:var(--oo-terracotta); color:#fff; font-weight:700; font-size:13px;
  white-space:nowrap; flex-shrink:0;
}
.oo-nav__cta:hover{ background:var(--oo-terracotta-dark); color:#fff; }

/* 모바일 네비 — 기존 menuBtn / mobilePanel 스크립트를 그대로 씁니다 */
.menu-btn{
  display:none; flex-direction:column; gap:5px; background:none; border:none;
  cursor:pointer; padding:8px; flex-shrink:0;
}
.menu-btn span{
  width:22px; height:1.5px; background:var(--oo-ink); display:block;
  transition:transform .25s ease, opacity .2s;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.mobile-panel{
  display:none; flex-direction:column;
  border-bottom:1px solid var(--oo-border); background:rgba(247,242,233,0.98);
  position:sticky; top:68px; z-index:49;
}
.mobile-panel a{
  padding:15px var(--oo-pad); border-bottom:1px solid var(--oo-border);
  font-size:15px; color:var(--oo-ink);
}
.mobile-panel a[aria-current="page"]{ color:var(--oo-terracotta-dark); font-weight:600; }
.mobile-panel.open{ display:flex; }
@media (max-width:820px){
  .oo-nav__menu{ display:none; }
  .menu-btn{ display:flex; }
  .oo-nav{ padding:14px var(--oo-pad); }
  .oo-nav__tag{ display:none; }
}
@media (min-width:821px){ .menu-btn,.mobile-panel{ display:none !important; } }

/* ── 모바일 상단바 CTA ──
   로고 + "드로잉 제안 받기" 버튼 + 햄버거가 375px 폭 안에서 서로 밀어내며
   버튼만 화면 절반을 차지했습니다. 좁은 화면에서는 문구를 접고 아이콘만
   남겨 상단바를 가볍게 만듭니다. 같은 문구는 접힌 메뉴 맨 위에 강조 링크로
   그대로 살려둡니다 (마크업에 .oo-nav__cta-label / .mobile-panel__cta 필요). */
@media (max-width:820px){
  .oo-nav__cta{
    padding:10px; width:40px; height:40px; display:flex;
    align-items:center; justify-content:center; font-size:17px;
  }
  .oo-nav__cta-label{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
  }
}
.mobile-panel__cta{
  color:var(--oo-terracotta-dark) !important; font-weight:700 !important;
}

/* ---------- SiteFooter ---------- */
/* 푸터 — 어두운 갈색 판이 무겁고 칙칙해서, 본문과 같은 계열의
   밝은 모래빛으로 바꿉니다. 위쪽 구독 띠와 붙어 보이지 않도록
   한 단계 진한 톤 + 윗선으로 경계를 만듭니다. */
/* 푸터 — 세로로 길고 항목이 많아 무거웠습니다.
   세 칸을 한 줄로 눕히고 여백을 줄여 두 줄로 압축합니다.
   설명 문장은 히어로에 이미 있는 말이라 접었습니다. */
.oo-footer{
  margin-top:clamp(48px, 6vh, 80px); padding:32px 56px 30px;
  background:#EFE6D8; color:var(--oo-ink-body);
  border-top:1px solid #E0D5C3;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 36px;
}
.oo-footer__logo{ font-size:18px; font-weight:700; letter-spacing:-0.4px; margin:0 auto 0 0; color:var(--oo-ink); }
.oo-footer__desc{ display:none; }
.oo-footer__col{ display:flex; align-items:baseline; gap:8px 14px; flex-wrap:wrap; min-width:0; }
.oo-footer__label{ font-size:10px; letter-spacing:1.6px; color:var(--oo-ink-faint); margin:0; }
.oo-footer__col span{ font-size:13px; word-break:break-all; color:var(--oo-ink-body); }
.oo-footer__col span.dim{ color:var(--oo-ink-muted); }
.oo-footer__col a{ font-size:13px; color:var(--oo-ink-body); text-decoration:none; }
.oo-footer__col a:hover{ color:var(--oo-terracotta-dark); }
@media (max-width:820px){
  .oo-footer{ padding:26px 24px 24px; gap:12px 20px; }
  .oo-footer__logo{ margin-right:0; flex:0 0 100%; }
}
.oo-footer__bar{
  flex:0 0 100%; padding-top:16px; margin-top:2px; border-top:1px solid #E2D8C7;
  font-size:12px; color:var(--oo-ink-faint);
}
@media (max-width:900px){
  .oo-footer{ grid-template-columns:1fr; padding:40px var(--oo-pad); }
  .oo-footer__bar{ grid-column:span 1; }
}

/* ---------- 채팅 버블 (기존 chat 스크립트 ID 유지) ---------- */
.chat-widget{
  position:fixed; right:28px; bottom:28px; z-index:200;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}
.chat-panel{
  width:300px; border-radius:12px; overflow:hidden;
  box-shadow:0 12px 36px rgba(60,48,38,0.28);
  transform-origin:bottom right;
  opacity:0; transform:scale(0.9) translateY(10px); pointer-events:none;
  transition:opacity .2s ease, transform .22s ease;
}
.chat-panel.open,.chat-panel[style*="flex"]{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }
.chat-panel__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 20px; background:var(--oo-terracotta); color:#fff;
}
.chat-panel__head strong{ font-size:14.5px; font-weight:700; display:block; }
.chat-panel__head small{ font-size:11.5px; opacity:.9; display:block; margin-top:3px; }
.chat-panel__close{ font-size:18px; cursor:pointer; line-height:1; padding:4px; background:none; border:none; color:#fff; }
.chat-panel__body{ padding:20px; background:var(--oo-paper-card); }
.chat-messages{ max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.chat-msg{
  background:var(--oo-cream); padding:14px 16px; border-radius:16px 16px 16px 4px;
  font-size:13.5px; line-height:1.7; color:var(--oo-ink-body); word-break:keep-all;
}
.chat-msg--admin{ background:var(--oo-cream); color:var(--oo-ink-body); border-radius:16px 16px 16px 4px; align-self:flex-start; }
.chat-msg--visitor{ background:var(--oo-cobalt-bg); color:var(--oo-cobalt-text); border-radius:16px 16px 4px 16px; align-self:flex-end; }
.chat-fields{ display:grid; gap:8px; margin-top:14px; }
.chat-fields input{
  height:40px; border:1.5px solid var(--oo-border); border-radius:99px;
  padding:0 16px; font-size:13px; background:#fff; color:var(--oo-ink-body);
}
.chat-row{ display:flex; gap:8px; margin-top:10px; }
.chat-row input{
  flex:1; height:42px; border:1.5px solid var(--oo-border); border-radius:99px;
  padding:0 16px; font-size:13px; background:#fff; color:var(--oo-ink-body);
}
.chat-send{
  width:42px; height:42px; border-radius:50%; background:var(--oo-ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  cursor:pointer; border:none; flex-shrink:0;
}
.chat-fab{
  width:62px; height:62px; border-radius:50%; background:var(--oo-terracotta); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  cursor:pointer; box-shadow:var(--oo-shadow-chat); border:3px solid #FBF7EF;
  position:relative;
}
.chat-callout{
  background:#fff; border:1px solid var(--oo-border); border-radius:16px;
  padding:12px 16px; font-size:13px; color:var(--oo-ink-body);
  box-shadow:var(--oo-shadow-card); display:flex; align-items:center; gap:10px;
  white-space:nowrap;
}
.chat-callout button{ background:none; border:none; cursor:pointer; color:var(--oo-ink-faint); font-size:14px; }
.chat-unread{
  position:absolute; top:2px; right:2px; width:12px; height:12px;
  border-radius:50%; background:var(--oo-lime); border:2px solid #fff;
}
@media (max-width:560px){
  .chat-widget{ right:16px; bottom:16px; }
  .chat-panel{ width:calc(100vw - 32px); }
}


/* ========================================================================
   OBJECT OBJECT — 2026.08 visual cleanup
   부드러운 한글 본문 + 정보량을 한눈에 읽는 컴팩트한 스케일
   ======================================================================== */
html, body{ scroll-behavior:auto !important; }
body{
  font-family:'Gowun Dodum','Apple SD Gothic Neo','Noto Sans KR',sans-serif !important;
  font-size:15px;
  line-height:1.65;
  text-rendering:optimizeLegibility;
}
/* 예전엔 여기에 폰트 이름을 직접 박아 두고 !important 까지 붙여서,
   --oo-serif 를 바꿔도 contact·drawing 처럼 뒤에 덮는 규칙이 없는 페이지는
   제목 서체가 안 바뀌었습니다. 토큰 하나로 관리되도록 바꿉니다. */
.serif,
.h1-page,.h2-sec,
.page-head h1,
.faq-q span:first-child,
.st-card h3,.st-step h3,
.pf-title,.pd-hero h2{
  font-family:var(--oo-serif) !important;
}
.h1-page{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.7px;line-height:1.28;}
.h2-sec{font-size:clamp(25px,2.7vw,36px);letter-spacing:-.5px;line-height:1.32;}
.lead{font-size:15px;line-height:1.75;}
.page-head h1{font-size:clamp(28px,3.4vw,42px) !important;line-height:1.3;}
.page-head p{font-size:15px !important;line-height:1.7;}
.btn{font-size:14px;padding:14px 26px;}
@media (max-width:560px){
  body{font-size:15px;}
  .h1-page,.page-head h1{font-size:clamp(27px,7vw,34px) !important;}
  .h2-sec{font-size:clamp(23px,6vw,30px);}
}


/* ── 타이포 통일 (리디자인 v7) ──
   본문·UI = --oo-sans / 제목 = --oo-serif */
body,button,input,select,textarea{ font-family:var(--oo-sans); }
h1,h2,h3,h4,
.h1-page,.h2-sec,
.serif{ font-family:var(--oo-serif); font-weight:700; }
.eyebrow,.oo-nav__logo,.oo-nav__tag,.oo-footer__logo,.oo-footer__label{
  font-family:var(--oo-sans);
}
/* 명조는 굵기 대비가 커서 본문 크기에서는 자간을 살짝 조입니다 */
h1,.h1-page{ letter-spacing:-0.6px; }
h2,.h2-sec{ letter-spacing:-0.4px; }



.chat-widget{ pointer-events:none; }
.chat-fab,
.chat-callout,
.chat-panel.open{ pointer-events:auto; }

@media (max-width:820px){
  /* 좁은 화면에서는 말풍선이 폼 입력칸을 덮습니다. 동그란 버튼만 남깁니다. */
  .chat-callout{ display:none; }
}

/* ── 공유 버튼 (oo-share.js) ──────────────────────────────
   글·프로젝트 아래에 붙습니다. 폰에서는 '공유' 가 기기 공유 시트를 열고
   거기에 카카오톡이 들어 있습니다. */
.oo-share{
  max-width:760px; margin:56px auto 0; padding-top:26px;
  border-top:1px solid var(--oo-line, rgba(31,28,24,.12));
}
.oo-share__label{
  display:block; font-size:12px; font-weight:700; letter-spacing:.12em;
  color:var(--oo-ink-faint, #6E6458); margin-bottom:12px;
}
.oo-share__row{display:flex; flex-wrap:wrap; gap:8px;}
.oo-share__btn{
  display:inline-flex; align-items:center; gap:7px;
  min-height:42px; padding:0 16px; border-radius:99px;
  border:1px solid var(--oo-line, rgba(31,28,24,.16));
  background:transparent; color:var(--oo-ink-body, #3A342C);
  font-family:inherit; font-size:13.5px; font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.oo-share__btn svg{width:16px; height:16px; flex:none;}
.oo-share__btn:hover{border-color:var(--oo-ink, #2B241E); color:var(--oo-ink, #2B241E);}
.oo-share__btn--main{
  background:var(--oo-ink, #2B241E); border-color:var(--oo-ink, #2B241E);
  color:var(--oo-paper, #FAF5E8);
}
.oo-share__btn--main:hover{color:var(--oo-paper, #FAF5E8); opacity:.9;}
.oo-share__btn.is-done{
  border-color:#2E6B3E; color:#2E6B3E; background:rgba(46,107,62,.08);
}
@media (max-width:560px){
  .oo-share{margin-top:44px;}
  .oo-share__btn{min-height:44px;}   /* 폰에서 누르기 좋게 */
}

/* ══════════════════════════════════════════════════════════
   해시태그 — 글과 포트폴리오 아래
   meta keywords 만으로는 구글이 거의 보지 않습니다. 페이지에 실제로 적힌
   글자라야 검색어로 잡히므로, 눈에 보이게 답니다.
   ══════════════════════════════════════════════════════════ */
.pd-tags, .pf-tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:34px 0 8px; padding-top:22px;
  border-top:1px solid var(--oo-hairline, #EFE9E0);
}
.pd-tag, .pf-tag{
  display:inline-block;
  background:var(--oo-cream, #F5E7CF);
  color:var(--oo-ink, #2B241E);
  border-radius:100px; padding:6px 13px;
  font-size:13px; font-weight:500; letter-spacing:-.01em;
}
@media (max-width:560px){
  .pd-tags, .pf-tags{margin-top:26px; padding-top:18px; gap:6px}
  .pd-tag, .pf-tag{font-size:12.5px; padding:5px 11px}
}