/* =====================================================================
   오늘의 연인 — 우측 고정 상담 메뉴 + 간편 상담 패널 + 대표전화 팝업 (2026-10 리뉴얼)
   · main_footer.inc.php 에서 전 페이지 로드 (filemtime 캐시버스터)
   · 토큰(--gold/--dark/--ink …)은 main.css :root 를 그대로 사용, 없을 때 대비값 병기
   ===================================================================== */

/* ---------- 옛 퀵메뉴 무력화 (마크업은 주석 처리됨, 다른 템플릿에 남아 있을 경우 대비) ---------- */
.side-quick,.mbar{display:none !important}
@media (max-width:860px){
  html body{padding-bottom:0}                    /* 옛 하단바(58px) 여백 해제 (상단이동 버튼은 main.css 에서 모바일 숨김) */
}

/* =====================================================================
   1) 플로팅 메뉴 — PC : 세로 카드형 (폭 156px)
   ===================================================================== */
.oyf{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:270;
  width:156px;padding:18px 11px 16px;display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(180deg,#1f1c16 0%,#15140f 100%);
  border:1px solid rgba(201,169,106,.38);border-radius:16px;
  box-shadow:0 18px 44px rgba(10,8,4,.32);
  font-family:var(--sans,'Pretendard',sans-serif);
  transition:opacity .25s,transform .25s;
}
.oyf-logo{display:block;width:104px;height:auto;margin:0 auto 6px;opacity:.95}
.oyf-item{
  display:flex;align-items:center;gap:9px;width:100%;padding:10px 8px;margin:0;
  background:rgba(255,255,255,.035);border:1px solid rgba(201,169,106,.26);border-radius:12px;
  color:var(--on-dark,#f3efe6);text-align:left;cursor:pointer;font:inherit;text-decoration:none;
  transition:border-color .2s,background .2s,transform .2s;
}
.oyf-item:hover,.oyf-item:focus-visible{border-color:var(--gold,#c9a96a);background:rgba(201,169,106,.12);color:#fff}
.oyf-item:focus-visible{outline:2px solid var(--gold,#c9a96a);outline-offset:2px}
.oyf-ico{
  flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#f2e2bd 0%,#d4b67d 45%,#a8884c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 8px rgba(0,0,0,.35);
}
.oyf-ico svg{width:19px;height:19px;fill:#2a2216}
.oyf-ico--talk{font-size:9.5px;font-weight:800;letter-spacing:.02em;color:#2a2216}
.oyf-txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.oyf-txt b{font-size:13px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.oyf-txt small{font-size:11px;color:var(--sub-dark,#a59d90);white-space:nowrap}
.oyf-m{display:none}
.oyf-tag{margin-top:6px;padding-top:12px;border-top:1px solid rgba(201,169,106,.22);
  text-align:center;font-size:11.5px;line-height:1.6;color:var(--sub-dark,#a59d90);word-break:keep-all}
.oyf.is-hidden{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(12px)}

/* 낮은 화면(노트북 등) : 로고·문구 생략 */
@media (max-height:620px) and (min-width:1600px){
  .oyf-logo,.oyf-tag{display:none}
}

/* =====================================================================
   1-b) 1599px 이하 PC · 모바일 : 아이콘 + 짧은 문구의 슬림 세로형
   본문 폭(1200px)+156px 메뉴가 겹치지 않으려면 화면이 1600px 이상이어야 한다.
   그보다 좁으면 본문(4박스 등)을 가리지 않도록 비율만 축소, 구성은 동일
   ===================================================================== */
@media (max-width:1599px){
  .oyf{width:64px;padding:12px 6px 10px;gap:6px;border-radius:32px;right:10px}
  .oyf-logo,.oyf-tag,.oyf-txt{display:none}
  .oyf-item{flex-direction:column;gap:4px;padding:6px 0;border:0;background:none;text-align:center}
  .oyf-item:hover,.oyf-item:focus-visible{background:none}
  .oyf-item:hover .oyf-ico{transform:scale(1.06)}
  .oyf-ico{flex-basis:auto;width:40px;height:40px;transition:transform .2s}
  .oyf-m{display:block;font-size:11px;font-weight:600;color:var(--on-dark,#f3efe6);letter-spacing:-.01em}
}
@media (max-width:860px){
  .oyf{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none;width:58px;right:8px;padding:9px 5px 8px}
  .oyf.is-hidden{transform:translateX(12px)}
  .oyf-ico{width:38px;height:38px}
  .oyf-ico svg{width:18px;height:18px}
}

/* =====================================================================
   2) 대표전화 팝업 (PC — 위치는 JS 가 버튼 옆으로 잡음)
   ===================================================================== */
.oyf-telpop{
  position:fixed;z-index:275;width:236px;padding:20px 20px 16px;
  background:#fbf8f2;border:1px solid var(--gold,#c9a96a);border-radius:14px;
  box-shadow:0 18px 40px rgba(20,16,8,.22);text-align:center;color:var(--ink,#1b1813);
}
.oyf-telpop[hidden]{display:none}
.oyf-telpop-x{position:absolute;top:6px;right:10px;border:0;background:none;font-size:22px;line-height:1;color:#9c9384;cursor:pointer}
.oyf-telpop-k{display:block;font-size:12.5px;color:var(--sub,#756f64)}
.oyf-telpop-n{display:block;margin:4px 0 6px;font-size:28px;font-weight:700;letter-spacing:.02em;color:var(--ink,#1b1813)}
.oyf-telpop-h{display:block;font-size:11.5px;color:var(--sub,#756f64);line-height:1.5}
.oyf-telpop-copy{margin-top:12px;width:100%;height:38px;border-radius:999px;cursor:pointer;
  border:1px solid var(--ink,#1b1813);background:#fff;font:inherit;font-size:13px;font-weight:600;color:var(--ink,#1b1813);transition:.2s}
.oyf-telpop-copy:hover{background:var(--ink,#1b1813);color:#fff}

/* =====================================================================
   3) 간편 상담 슬라이드 패널
   ===================================================================== */
.oyqp-bg{position:fixed;inset:0;z-index:399;background:rgba(10,9,6,.48);opacity:0;transition:opacity .35s}
.oyqp-bg.on{opacity:1}
.oyqp-bg[hidden]{display:none}
.oyqp{
  position:fixed;top:0;right:0;bottom:0;z-index:400;width:min(440px,100%);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  background:#fbf9f5;color:var(--ink,#1b1813);box-shadow:-20px 0 50px rgba(10,8,4,.25);
  transform:translateX(102%);visibility:hidden;
  transition:transform .42s cubic-bezier(.2,.75,.2,1),visibility 0s linear .42s;
  font-family:var(--sans,'Pretendard',sans-serif);
}
.oyqp.on{transform:none;visibility:visible;transition:transform .42s cubic-bezier(.2,.75,.2,1),visibility 0s}
.oyqp-head{
  position:relative;padding:30px 28px 26px;color:#fff;
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(201,169,106,.28) 0%,rgba(201,169,106,0) 55%),
    linear-gradient(160deg,#2a251c 0%,#15140f 70%);
}
.oyqp-logo{width:112px;height:auto;margin-bottom:18px}
.oyqp-head h2{font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.oyqp-head p{margin-top:10px;font-size:14px;line-height:1.65;color:rgba(243,239,230,.82);word-break:keep-all}
.oyqp-x{position:absolute;top:14px;right:16px;width:36px;height:36px;border:0;background:none;
  color:rgba(255,255,255,.75);font-size:30px;line-height:1;cursor:pointer}
.oyqp-x:hover{color:#fff}

.oyqp-form{padding:22px 28px 30px}
.oyqp-row{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px 12px;margin-bottom:12px}
.oyqp-lb{font-size:13.5px;font-weight:600;color:var(--ink,#1b1813);line-height:1.35;word-break:keep-all}
.oyqp-lb em{font-style:normal;color:#b5523b}
.oyqp-lb small{display:block;font-size:11.5px;font-weight:400;color:var(--sub,#756f64)}
.oyqp-in{width:100%;height:44px;padding:0 13px;border:1px solid #ddd5c6;border-radius:8px;background:#fff;
  font:inherit;font-size:14.5px;color:var(--ink,#1b1813);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
select.oyqp-in{padding-right:34px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23756f64' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center}
.oyqp-in:focus{outline:none;border-color:var(--gold,#c9a96a);box-shadow:0 0 0 3px rgba(201,169,106,.2)}
.oyqp-in.is-err{border-color:#c0392b}

.oyqp-chips{display:grid;gap:6px}
.oyqp-chips--2{grid-template-columns:repeat(2,1fr)}
.oyqp-chips--3{grid-template-columns:repeat(3,1fr)}
.oyqp-chips--4{grid-template-columns:repeat(4,1fr)}
.oyqp-chips label{position:relative;cursor:pointer}
.oyqp-chips input{position:absolute;opacity:0;width:1px;height:1px}
.oyqp-chips span{display:flex;align-items:center;justify-content:center;height:42px;padding:0 4px;
  border:1px solid #ddd5c6;border-radius:8px;background:#fff;font-size:13.5px;color:#4a443a;transition:.18s;white-space:nowrap}
.oyqp-chips label:hover span{border-color:var(--gold,#c9a96a)}
.oyqp-chips input:checked + span{border-color:var(--gold-deep,#a8884c);background:#f5ecda;color:var(--ink,#1b1813);font-weight:700;
  box-shadow:inset 0 0 0 1px var(--gold-deep,#a8884c)}
.oyqp-chips input:focus-visible + span{outline:2px solid var(--gold,#c9a96a);outline-offset:2px}
.oyqp-chips.is-err span{border-color:#c0392b}

.oyqp-agree{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 6px;
  padding:13px 14px;border:1px solid #e6dfd1;border-radius:8px;background:#fff}
.oyqp-agree label{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;color:#4a443a;cursor:pointer}
.oyqp-agree input{margin-top:2px;width:17px;height:17px;flex:0 0 17px;accent-color:var(--gold-deep,#a8884c)}
.oyqp-agree em{font-style:normal;color:var(--sub,#756f64)}
.oyqp-agree a{flex-shrink:0;font-size:12px;padding:4px 10px;border:1px solid #d9d1c2;border-radius:6px;color:var(--sub,#756f64)}
.oyqp-agree a:hover{border-color:var(--ink,#1b1813);color:var(--ink,#1b1813)}
.oyqp-agree.is-err{border-color:#c0392b}

.oyqp-err{margin:8px 0 0;font-size:13px;color:#c0392b}
.oyqp-err[hidden]{display:none}
.oyqp-submit{margin-top:16px;width:100%;height:56px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#3a3125 0%,#1d1912 100%);color:#f6ecd6;font:inherit;font-size:16px;font-weight:700;
  letter-spacing:.01em;box-shadow:0 10px 24px rgba(20,16,8,.22);transition:filter .2s,transform .2s}
.oyqp-submit i{font-style:normal;margin-left:6px;color:var(--gold,#c9a96a)}
.oyqp-submit:hover{filter:brightness(1.15)}
.oyqp-submit:disabled{opacity:.6;cursor:wait}
.oyqp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 완료 화면 */
.oyqp-done{padding:44px 30px 40px;text-align:center}
.oyqp-done[hidden],.oyqp-form[hidden]{display:none}
.oyqp-check{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 22px;border-radius:50%;
  border:1.5px solid var(--gold-deep,#a8884c)}
.oyqp-check svg{width:34px;height:34px;fill:none;stroke:var(--gold-deep,#a8884c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.oyqp-done h3{font-size:25px;font-weight:700;line-height:1.35;color:var(--ink,#1b1813)}
.oyqp-done p{margin-top:14px;font-size:14.5px;line-height:1.7;color:#5d574c;word-break:keep-all}
.oyqp-done .oyqp-dup{margin-top:12px;padding:10px 12px;border-radius:8px;background:#f5ecda;font-size:13px;color:#7a5d26}
.oyqp-dup[hidden]{display:none}
.oyqp-kakao,.oyqp-continue{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:54px;
  margin-top:12px;border-radius:12px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;transition:.2s}
.oyqp-kakao{margin-top:28px;border:0;color:#2a2216;
  background:linear-gradient(180deg,#ead6aa 0%,#c9a96a 100%);box-shadow:0 8px 20px rgba(168,136,76,.28)}
.oyqp-kakao span{display:inline-grid;place-items:center;width:34px;height:22px;border-radius:11px;background:#2a2216;
  color:#f3d97a;font-size:9px;font-weight:800;letter-spacing:.02em}
.oyqp-kakao:hover{filter:brightness(1.05)}
.oyqp-continue{border:1px solid var(--ink,#1b1813);background:#fff;color:var(--ink,#1b1813)}
.oyqp-continue:hover{background:var(--ink,#1b1813);color:#fff}

body.oyqp-open{overflow:hidden}

@media (max-width:440px){
  .oyqp-head{padding:26px 20px 22px}
  .oyqp-head h2{font-size:23px}
  .oyqp-form{padding:18px 20px 26px}
  .oyqp-row{grid-template-columns:1fr;gap:7px;margin-bottom:14px}
  .oyqp-done{padding:38px 22px 34px}
}
@media (prefers-reduced-motion:reduce){
  .oyqp,.oyqp.on,.oyqp-bg{transition:none}
}