/*
  [생성일] 2026-08-02
  [경위] 미르종합환경 전체 페이지 시안 v2 공통 스타일 — 사장님 지시(디자인 개선·AI티 제거·전 페이지·실사 적용)
  [변경이력]
    - 2026-08-02: 최초 생성
  [아임웹 대응] 이 CSS는 아임웹 "코드 삽입(head)"에 넣는 것을 전제로 작성.
    클래스 접두사 .mr- 로 격리, 전역 선택자는 시안 파일 안에서만 사용(body 기본값은 아임웹 반영 시 제거).
*/

/* ── 폰트: G마켓 산스(제목) + Pretendard(본문) — 로드 실패 시 맑은고딕 폴백 ── */
@font-face {
  font-family: 'GmarketSans';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GmarketSans';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root{
  --mr-ink:       #0B2B3C;
  --mr-ink-soft:  #46626F;
  --mr-teal:      #0E7C86;
  --mr-teal-deep: #0A5A62;
  --mr-aqua:      #DCEEF0;
  --mr-aqua-soft: #F2F8F9;
  --mr-paper:     #FFFFFF;
  --mr-line:      rgba(11,43,60,.14);
  --mr-kakao:     #FEE500;
  --mr-star:      #F5A524;
  --mr-disp: 'GmarketSans', 'Pretendard Variable', 'Malgun Gothic', sans-serif;
  --mr-sans: 'Pretendard Variable', 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;
  --mr-pad: clamp(20px, 5vw, 60px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--mr-sans);
  background:var(--mr-paper);
  color:var(--mr-ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  word-break:keep-all; overflow-wrap:break-word;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--mr-teal); outline-offset:3px; }

.mr-container{ max-width:1200px; margin:0 auto; padding-left:var(--mr-pad); padding-right:var(--mr-pad); }

/* 제목 체계 — 디스플레이는 G마켓 산스 */
.mr-disp{ font-family:var(--mr-disp); font-weight:700; letter-spacing:-.01em; }
.mr-h2{ font-family:var(--mr-disp); font-weight:700; font-size:clamp(23px, 3vw, 34px); line-height:1.4; }
.mr-sub{ margin-top:12px; color:var(--mr-ink-soft); font-size:15px; max-width:56ch; }
.mr-sec{ padding:clamp(56px,7vw,96px) 0; }
.mr-sec-head{ margin-bottom:clamp(28px,3.5vw,44px); }
.mr-ex{ font-size:12.5px; color:var(--mr-ink-soft); background:var(--mr-aqua-soft); border:1px solid var(--mr-line); border-radius:6px; padding:6px 12px; display:inline-block; margin-top:12px; }

/* ── 헤더 ── */
.mr-header{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--mr-line);
}
.mr-header-in{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px var(--mr-pad);
}
.mr-logo{ display:flex; align-items:center; gap:9px; flex:none; }
.mr-logo-mark{
  width:32px; height:32px; border-radius:8px; flex:none;
  background:linear-gradient(150deg, var(--mr-teal) 0%, var(--mr-ink) 100%);
  display:flex; align-items:center; justify-content:center;
}
.mr-logo-text strong{ font-family:var(--mr-disp); font-size:16.5px; font-weight:700; display:block; line-height:1.2; }
.mr-logo-text span{ font-size:10.5px; color:var(--mr-ink-soft); letter-spacing:.08em; }
.mr-nav{ display:flex; gap:4px; align-items:center; }
.mr-nav a{ font-size:14px; color:var(--mr-ink-soft); font-weight:500; padding:8px 11px; border-radius:8px; transition:color .15s, background .15s; }
.mr-nav a:hover{ color:var(--mr-teal); background:var(--mr-aqua-soft); }
.mr-nav a.is-here{ color:var(--mr-teal); font-weight:700; }
.mr-head-call{ display:flex; align-items:center; gap:12px; flex:none; }
.mr-head-num{ text-align:right; line-height:1.3; }
.mr-head-num strong{ font-family:var(--mr-disp); font-size:17px; font-weight:700; letter-spacing:.01em; display:block; }
.mr-head-num span{ font-size:11px; color:var(--mr-ink-soft); }
.mr-head-kakao{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--mr-kakao); color:#191600; font-weight:700; font-size:13.5px;
  padding:10px 16px; border-radius:10px; transition:filter .15s;
}
.mr-head-kakao:hover{ filter:brightness(.95); }
.mr-burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.mr-burger span{ display:block; width:22px; height:2px; background:var(--mr-ink); margin:5px 0; border-radius:2px; }

/* 모바일 메뉴 */
.mr-mmenu{ position:fixed; inset:0; z-index:50; background:var(--mr-paper); display:none; flex-direction:column; justify-content:center; padding:0 var(--mr-pad); }
.mr-mmenu.is-open{ display:flex; }
.mr-mmenu a{ font-family:var(--mr-disp); font-size:22px; font-weight:700; padding:15px 0; border-bottom:1px solid var(--mr-line); }
.mr-mmenu a.is-here{ color:var(--mr-teal); }
.mr-mmenu-close{ position:absolute; top:18px; right:var(--mr-pad); background:none; border:none; font-size:15px; cursor:pointer; color:var(--mr-ink-soft); font-family:inherit; }
.mr-mmenu-tel{ margin-top:28px; text-align:center; font-size:14px; color:var(--mr-ink-soft); }

/* ── 버튼 ── */
.mr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:15px; font-weight:700; padding:14px 26px; border-radius:12px;
  border:1.5px solid transparent; cursor:pointer; font-family:inherit;
  transition:transform .18s, background .18s, color .18s;
}
.mr-btn:hover{ transform:translateY(-2px); }
.mr-btn--tel{ background:var(--mr-ink); color:var(--mr-paper); }
.mr-btn--tel:hover{ background:var(--mr-teal); }
.mr-btn--kakao{ background:var(--mr-kakao); color:#191600; }
.mr-btn--teal{ background:var(--mr-teal); color:var(--mr-paper); }
.mr-btn--teal:hover{ background:var(--mr-teal-deep); }
.mr-btn--line{ background:var(--mr-paper); color:var(--mr-ink); border-color:var(--mr-line); }
.mr-btn--line:hover{ border-color:var(--mr-teal); color:var(--mr-teal); }
.mr-btn svg{ flex:none; }

/* ── 사진 ── */
/* span으로 써도 aspect-ratio가 먹도록 block 고정 (인라인이면 비율이 무시돼 제목이 겹침) */
.mr-photo{ display:block; border-radius:10px; overflow:hidden; background:var(--mr-aqua); }
.mr-photo img{ width:100%; height:100%; object-fit:cover; }

/* ── 게시판 공통 (아임웹 게시판 스킨을 모사 — 실제 구현은 아임웹 게시판+CSS) ── */
.mr-board-note{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--mr-aqua-soft); border:1px solid var(--mr-line); border-radius:10px;
  padding:16px 18px; font-size:13.5px; color:var(--mr-ink-soft); margin-bottom:26px;
}
.mr-board-note svg{ flex:none; margin-top:2px; }
.mr-board-head{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding-bottom:14px; border-bottom:2px solid var(--mr-ink); margin-bottom:0;
}
.mr-board-count{ font-size:13.5px; color:var(--mr-ink-soft); }
.mr-board-count b{ color:var(--mr-teal); }
.mr-write-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--mr-teal); color:#fff; font-size:13.5px; font-weight:700;
  padding:9px 16px; border-radius:8px;
}
.mr-row{
  display:flex; align-items:center; gap:14px;
  padding:16px 6px; border-bottom:1px solid var(--mr-line); font-size:14.5px;
}
.mr-row-no{ width:40px; flex:none; color:var(--mr-ink-soft); font-size:13px; text-align:center; }
.mr-row-title{ flex:1; display:flex; align-items:center; gap:8px; min-width:0; }
.mr-row-title .t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mr-row-title .lock{ color:var(--mr-ink-soft); flex:none; display:inline-flex; }
.mr-badge{
  flex:none; font-size:11.5px; font-weight:700; border-radius:6px; padding:3px 8px;
}
.mr-badge--done{ background:var(--mr-aqua); color:var(--mr-teal-deep); }
.mr-badge--wait{ background:#FFF3DC; color:#8A6210; }
.mr-row-meta{ flex:none; display:flex; gap:14px; color:var(--mr-ink-soft); font-size:12.5px; }
.mr-pager{ display:flex; justify-content:center; gap:6px; margin-top:26px; }
.mr-pager a{
  min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--mr-line); border-radius:8px; font-size:13px; color:var(--mr-ink-soft);
}
.mr-pager a.on{ background:var(--mr-ink); color:#fff; border-color:var(--mr-ink); }

/* ── 폼 공통 ── */
.mr-form{ background:var(--mr-paper); border:1px solid var(--mr-line); border-radius:14px; padding:clamp(22px,3vw,34px); }
.mr-field{ margin-bottom:16px; }
.mr-field > label{ display:block; font-size:13px; font-weight:700; margin-bottom:7px; }
.mr-field > label .req{ color:#C0392B; }
.mr-input{
  width:100%; border:1px solid var(--mr-line); border-radius:9px;
  padding:12px 14px; font-size:14.5px; font-family:inherit; color:var(--mr-ink);
  background:#fff;
}
.mr-input::placeholder{ color:#9DB2BB; }
.mr-input:focus{ outline:2px solid var(--mr-teal); outline-offset:-1px; }
textarea.mr-input{ min-height:110px; resize:vertical; }
.mr-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mr-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.mr-chip{
  font-size:13px; padding:9px 15px; border-radius:999px;
  border:1px solid var(--mr-line); color:var(--mr-ink-soft); cursor:pointer; background:#fff;
  font-family:inherit;
}
.mr-chip.on{ background:var(--mr-teal); color:#fff; border-color:var(--mr-teal); font-weight:700; }
.mr-file{
  border:1.5px dashed var(--mr-line); border-radius:10px; padding:22px;
  text-align:center; color:var(--mr-ink-soft); font-size:13.5px; background:var(--mr-aqua-soft);
}
.mr-form-privacy{
  display:flex; gap:8px; align-items:flex-start;
  font-size:12.5px; color:var(--mr-ink-soft); margin:18px 0 14px;
}
.mr-submit{ width:100%; padding:15px; font-size:15.5px; }

/* ── 푸터 ── */
.mr-footer{ background:var(--mr-ink); color:rgba(255,255,255,.72); margin-top:0; }
.mr-footer-in{ max-width:1200px; margin:0 auto; padding:clamp(36px,4.5vw,54px) var(--mr-pad) 30px; }
.mr-footer-top{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.mr-footer .mr-logo-text strong{ color:#fff; }
.mr-footer .mr-logo-text span{ color:rgba(255,255,255,.45); }
.mr-footer-col h4{ font-size:13px; font-weight:700; color:#fff; margin-bottom:10px; }
.mr-footer-col a, .mr-footer-col p{ display:block; font-size:13px; line-height:1.9; }
.mr-footer-col a:hover{ color:#fff; }
.mr-footer-note{
  margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14);
  font-size:12px; color:rgba(255,255,255,.45); line-height:1.7;
}

/* ── 모바일 하단 고정 바 (의뢰 요구: 전화·카톡 바로연결) ── */
.mr-fixbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--mr-paper); border-top:1px solid var(--mr-line);
  box-shadow:0 -4px 16px rgba(11,43,60,.1);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom, 0px)); gap:8px;
}
.mr-fixbar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:13px 0; border-radius:11px; font-size:14.5px; font-weight:700;
}
.mr-fixbar .tel{ background:var(--mr-ink); color:#fff; }
.mr-fixbar .kakao{ background:var(--mr-kakao); color:#191600; }

/* ── 페이지 타이틀 밴드 (서브 페이지 공통) — 메인 히어로와 같은 톤 ── */
.mr-pagehead{
  background:linear-gradient(168deg, var(--mr-aqua-soft) 0%, var(--mr-aqua) 100%);
  border-bottom:1px solid var(--mr-line);
}
.mr-pagehead-in{ max-width:1200px; margin:0 auto; padding:clamp(38px,5vw,68px) var(--mr-pad); }
.mr-pagehead h1{
  font-family:var(--mr-disp); font-weight:700;
  font-size:clamp(28px,4vw,46px); line-height:1.2; letter-spacing:-.022em;
}
.mr-pagehead p{ margin-top:12px; color:var(--mr-ink-soft); font-size:clamp(14.5px,1.1vw,16px); max-width:52ch; line-height:1.7; }
.mr-crumb{ font-size:12px; color:var(--mr-ink-soft); margin-bottom:12px; }
.mr-crumb b{ color:var(--mr-teal); font-weight:600; }

/* ── 모션: 절제 ── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .mr-btn:hover{ transform:none; }
  *{ animation:none !important; transition:none !important; }
}

/* ── 반응형 ── */
@media (max-width: 1023px){
  .mr-nav{ display:none; }
  .mr-burger{ display:block; }
  .mr-head-num{ display:none; }
}
@media (max-width: 767px){
  body{ padding-bottom:72px; }
  .mr-fixbar{ display:flex; }
  .mr-head-kakao{ display:none; }
  .mr-field-row{ grid-template-columns:1fr; }
  .mr-row-meta .hide-m{ display:none; }
}