@charset "utf-8";
/* ==========================================================================
   우리의집 테마 — 레이아웃 (헤더 · GNB · 드로어 · 본문 · 푸터 · 탭바)
   ========================================================================== */

body.oh-locked { overflow: hidden; }

/* ============================================================== 헤더 셸 */
.oh-header {
  position: sticky;
  top: 0;
  z-index: var(--oh-z-header);
  background: var(--oh-bg);
  border-bottom: 1px solid var(--oh-border);
  transition: box-shadow var(--oh-t-base);
}
.oh-header.is-scrolled { box-shadow: var(--oh-shadow-1); }

/* ---- 유틸바 ---- */
.oh-utilbar {
  border-bottom: 1px solid var(--oh-divider);
  font-size: var(--oh-fs-12);
  color: var(--oh-text-2);
}
.oh-utilbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
}
.oh-utilbar__tabs { display: flex; gap: var(--oh-sp-5); }
.oh-utilbar__tabs a { display: block; padding: var(--oh-sp-2) 0; font-weight: var(--oh-fw-medium); }
.oh-utilbar__tabs .is-active a { color: var(--oh-text-1); font-weight: var(--oh-fw-bold); }
.oh-utilbar__links { display: flex; gap: var(--oh-sp-5); }
.oh-utilbar__links strong { color: var(--oh-primary); font-weight: var(--oh-fw-semibold); }

/* ---- 메인바 ---- */
.oh-hd__inner {
  display: flex;
  align-items: center;
  gap: var(--oh-sp-6);
  height: var(--oh-header-h);
  min-width: 0;
}
.oh-logo { flex: 0 0 auto; display: block; color: var(--oh-text-1); }
.oh-logo__svg { height: 30px; width: auto; }
.oh-logo__svg text { font-family: var(--oh-font-sans); }

/* ---- 검색 ---- */
/* min-width:0 이 없으면 안의 input 때문에 min-content 폭이 커져서
   태블릿 폭에서 헤더가 뷰포트를 밀어낸다. */
.oh-search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 520px; }
.oh-search__form {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--oh-sp-2);
  height: 42px;
  padding: 0 var(--oh-sp-2) 0 var(--oh-sp-4);
  background: var(--oh-surface);
  border: 1px solid transparent;
  border-radius: var(--oh-r-full);
  transition: border-color var(--oh-t-fast), background var(--oh-t-fast);
}
.oh-search__form:focus-within {
  background: var(--oh-bg);
  border-color: var(--oh-primary);
}
.oh-search__ico { color: var(--oh-text-3); }
.oh-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: var(--oh-fs-14);
}
.oh-search__input::placeholder { color: var(--oh-text-3); }
.oh-search__submit {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--oh-r-full);
  background: var(--oh-primary-strong);
  color: var(--oh-text-inverse);
  transition: background var(--oh-t-fast);
}
.oh-search__submit:hover { background: var(--oh-primary-hover); }

.oh-search__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  padding: var(--oh-sp-4);
  background: var(--oh-elevated);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-r-lg);
  box-shadow: var(--oh-shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--oh-t-fast), transform var(--oh-t-fast), visibility var(--oh-t-fast);
}
.oh-search.is-open .oh-search__panel { opacity: 1; visibility: visible; transform: none; }
.oh-search__panel-title {
  margin-bottom: var(--oh-sp-3);
  font-size: var(--oh-fs-12);
  font-weight: var(--oh-fw-bold);
  color: var(--oh-text-2);
}

/* ---- 헤더 액션 ---- */
.oh-hd-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--oh-sp-1);
  margin-left: auto;
}
.oh-hd-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--oh-r-md);
  color: var(--oh-text-1);
  transition: background var(--oh-t-fast), color var(--oh-t-fast);
}
.oh-hd-btn:hover { background: var(--oh-surface); color: var(--oh-primary); }

/* 다크토글: 모드에 따라 아이콘 하나만 보인다 */
.oh-theme-toggle .oh-ico--dark { display: none; }
[data-theme="dark"] .oh-theme-toggle .oh-ico--light { display: none; }
[data-theme="dark"] .oh-theme-toggle .oh-ico--dark { display: block; }

.oh-hd-write { flex: 0 0 auto; margin-left: var(--oh-sp-2); gap: var(--oh-sp-1); }

/* 로그인 팝오버 */
.oh-hd-user { position: relative; }
.oh-hd-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  padding: var(--oh-sp-4);
  background: var(--oh-elevated);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-r-lg);
  box-shadow: var(--oh-shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--oh-t-fast), transform var(--oh-t-fast), visibility var(--oh-t-fast);
}
.oh-hd-user:hover .oh-hd-pop,
.oh-hd-user:focus-within .oh-hd-pop { opacity: 1; visibility: visible; transform: none; }

/* ============================================================== GNB */
.oh-gnb { background: var(--oh-bg); }
.oh-gnb__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oh-sp-4);
}
.oh-gnb__list {
  display: flex;
  align-items: center;
  gap: var(--oh-sp-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.oh-gnb__list::-webkit-scrollbar { display: none; }
.oh-gnb__item { position: relative; flex: 0 0 auto; }
.oh-gnb__link {
  display: flex;
  align-items: center;
  gap: var(--oh-sp-1);
  height: var(--oh-gnb-h);
  padding-inline: var(--oh-sp-3);
  font-size: var(--oh-fs-15);
  font-weight: var(--oh-fw-semibold);
  color: var(--oh-text-1);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.oh-gnb__item:hover > .oh-gnb__link { color: var(--oh-primary); }
.oh-gnb__item.is-active > .oh-gnb__link {
  color: var(--oh-primary);
  border-bottom-color: var(--oh-primary);
}
.oh-gnb__caret { color: var(--oh-text-3); transition: transform var(--oh-t-fast); }
.oh-gnb__item:hover .oh-gnb__caret { transform: rotate(180deg); }

.oh-mega {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: var(--oh-sp-2);
  background: var(--oh-elevated);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-r-md);
  box-shadow: var(--oh-shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--oh-t-fast), transform var(--oh-t-fast), visibility var(--oh-t-fast);
}
.oh-gnb__item:hover .oh-mega,
.oh-gnb__item:focus-within .oh-mega { opacity: 1; visibility: visible; transform: none; }
.oh-mega__list a {
  display: block;
  padding: var(--oh-sp-2) var(--oh-sp-3);
  border-radius: var(--oh-r-sm);
  font-size: var(--oh-fs-14);
  white-space: nowrap;
}
.oh-mega__list a:hover { background: var(--oh-surface); color: var(--oh-primary); }

.oh-gnb__aside { display: flex; gap: var(--oh-sp-4); font-size: var(--oh-fs-13); color: var(--oh-text-2); }

/* ============================================================== 드로어 */
.oh-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--oh-z-drawer);
  visibility: hidden;
}
.oh-drawer.is-open { visibility: visible; }
.oh-drawer__dim {
  position: absolute;
  inset: 0;
  background: var(--oh-overlay);
  opacity: 0;
  transition: opacity var(--oh-t-base);
}
.oh-drawer.is-open .oh-drawer__dim { opacity: 1; }
.oh-drawer__panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: min(320px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--oh-bg);
  transform: translateX(-100%);
  transition: transform var(--oh-t-slow);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.oh-drawer.is-open .oh-drawer__panel { transform: none; }
.oh-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--oh-header-h);
  padding-inline: var(--oh-sp-4);
  border-bottom: 1px solid var(--oh-border);
}
.oh-drawer__me {
  display: flex;
  align-items: center;
  gap: var(--oh-sp-3);
  padding: var(--oh-sp-4);
  background: var(--oh-surface);
}
.oh-drawer__me > div { flex: 1 1 auto; min-width: 0; }
.oh-drawer__me p { font-size: var(--oh-fs-12); }
.oh-drawer__nav { flex: 1 1 auto; padding: var(--oh-sp-2) 0; }
.oh-drawer__group { padding: var(--oh-sp-2) 0; border-bottom: 1px solid var(--oh-divider); }
.oh-drawer__1d {
  display: block;
  padding: var(--oh-sp-3) var(--oh-sp-4);
  font-size: var(--oh-fs-16);
  font-weight: var(--oh-fw-bold);
}
.oh-drawer__2d a {
  display: block;
  padding: var(--oh-sp-2) var(--oh-sp-4) var(--oh-sp-2) var(--oh-sp-7);
  font-size: var(--oh-fs-14);
  color: var(--oh-text-2);
}
.oh-drawer__2d a:hover { color: var(--oh-primary); }
.oh-drawer__foot {
  display: flex;
  flex-direction: column;
  gap: var(--oh-sp-1);
  padding: var(--oh-sp-4);
  border-top: 1px solid var(--oh-border);
}
.oh-drawer__foot a {
  display: flex;
  align-items: center;
  gap: var(--oh-sp-2);
  padding: var(--oh-sp-2);
  font-size: var(--oh-fs-14);
  color: var(--oh-text-2);
}

/* ============================================================== 본문 */
.oh-main {
  display: block;
  min-height: 50vh;
  padding-bottom: var(--oh-sp-12);
}
.oh-page-title {
  padding: var(--oh-sp-8) 0 var(--oh-sp-5);
  font-size: var(--oh-fs-24);
}

/* ============================================================== 푸터 */
.oh-footer {
  margin-top: var(--oh-sp-12);
  padding: var(--oh-sp-11) 0 var(--oh-sp-8);
  background: var(--oh-surface);
  border-top: 1px solid var(--oh-border);
  font-size: var(--oh-fs-13);
  color: var(--oh-text-2);
}
.oh-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 2fr 1fr;
  gap: var(--oh-sp-8);
  padding-bottom: var(--oh-sp-8);
  border-bottom: 1px solid var(--oh-border);
}
.oh-footer__brand p { margin-top: var(--oh-sp-3); line-height: var(--oh-lh-loose); }
.oh-footer__sns { display: flex; gap: var(--oh-sp-2); margin-top: var(--oh-sp-4); }
.oh-footer__sns a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--oh-border-strong);
  border-radius: var(--oh-r-full);
  color: var(--oh-text-2);
}
.oh-footer__sns a:hover { border-color: var(--oh-primary); color: var(--oh-primary); }

.oh-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--oh-sp-6); }
.oh-footer h3 {
  margin-bottom: var(--oh-sp-3);
  font-size: var(--oh-fs-14);
  color: var(--oh-text-1);
}
.oh-footer__nav li + li { margin-top: var(--oh-sp-2); }

.oh-footer__tel {
  margin: var(--oh-sp-1) 0 var(--oh-sp-2);
  font-size: var(--oh-fs-24);
  font-weight: var(--oh-fw-bold);
  color: var(--oh-text-1);
  letter-spacing: -.02em;
}
.oh-footer__cs .oh-btn { margin-top: var(--oh-sp-4); }

.oh-footer__legal { padding-top: var(--oh-sp-6); }
.oh-footer__policy { display: flex; flex-wrap: wrap; gap: var(--oh-sp-5); margin-bottom: var(--oh-sp-4); }
.oh-footer__policy strong { color: var(--oh-text-1); font-weight: var(--oh-fw-bold); }

.oh-footer__biz { margin-bottom: var(--oh-sp-4); }
.oh-footer__biz summary {
  display: inline-flex;
  align-items: center;
  gap: var(--oh-sp-1);
  cursor: pointer;
  list-style: none;
  font-weight: var(--oh-fw-medium);
  color: var(--oh-text-1);
}
.oh-footer__biz summary::-webkit-details-marker { display: none; }
.oh-footer__biz[open] summary .oh-ico { transform: rotate(180deg); }
.oh-footer__biz p { margin-top: var(--oh-sp-3); line-height: var(--oh-lh-loose); }

.oh-footer__copy { font-size: var(--oh-fs-12); }
.oh-footer__notice {
  margin-top: var(--oh-sp-2);
  padding-top: var(--oh-sp-3);
  border-top: 1px dashed var(--oh-border);
  font-size: var(--oh-fs-11);
  color: var(--oh-text-3);
}

/* ============================================================== 맨위로 */
.oh-topbtn {
  position: fixed;
  right: var(--oh-sp-6);
  bottom: var(--oh-sp-6);
  z-index: var(--oh-z-tabbar);
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: var(--oh-elevated);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-r-full);
  box-shadow: var(--oh-shadow-2);
  color: var(--oh-text-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--oh-t-base), transform var(--oh-t-base), visibility var(--oh-t-base);
}
.oh-topbtn.is-show { opacity: 1; visibility: visible; transform: none; }
.oh-topbtn:hover { color: var(--oh-primary); border-color: var(--oh-primary); }

/* ============================================================== 탭바 */
.oh-tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--oh-z-tabbar);
  display: none;
  background: var(--oh-bg);
  border-top: 1px solid var(--oh-border);
  padding-bottom: env(safe-area-inset-bottom);
}
.oh-tabbar__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: var(--oh-tabbar-h);
  font-size: var(--oh-fs-11);
  color: var(--oh-text-2);
}
.oh-tabbar__item:hover, .oh-tabbar__item.is-active { color: var(--oh-primary); }

/* ============================================================== 반응형 */
@media (max-width: 1023px) {
  .oh-hd__inner { gap: var(--oh-sp-3); }
  .oh-footer__top { grid-template-columns: 1fr 1fr; }
  .oh-footer__cs { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .oh-hd__inner { gap: var(--oh-sp-2); }
  .oh-logo__svg { height: 26px; }
  .oh-search {
    position: static;
    order: 3;
    /* flex-basis:100% 는 브라우저에 따라 컨테이너 패딩을 잘못 계산해
       헤더가 뷰포트를 밀어냈다. 폭을 명시해 모호함을 없앤다. */
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .oh-hd { padding-bottom: var(--oh-sp-3); }
  .oh-hd__inner { flex-wrap: wrap; height: auto; padding-top: var(--oh-sp-2); }
  .oh-search__form { height: 38px; }
  .oh-search__panel { left: var(--oh-gutter); right: var(--oh-gutter); }

  .oh-gnb__inner { padding-inline: 0; }
  .oh-gnb__list { padding-inline: var(--oh-gutter); }
  .oh-gnb__link { height: 44px; font-size: var(--oh-fs-14); }
  .oh-mega { display: none; }

  .oh-tabbar { display: flex; }
  .oh-main { padding-bottom: calc(var(--oh-tabbar-h) + var(--oh-sp-6)); }
  .oh-topbtn {
    right: var(--oh-sp-4);
    bottom: calc(var(--oh-tabbar-h) + var(--oh-sp-4) + env(safe-area-inset-bottom));
    width: 42px; height: 42px;
  }

  .oh-footer { margin-top: var(--oh-sp-8); padding: var(--oh-sp-8) 0 calc(var(--oh-tabbar-h) + var(--oh-sp-6)); }
  .oh-footer__top { grid-template-columns: 1fr; gap: var(--oh-sp-6); }
  .oh-footer__nav { grid-template-columns: repeat(2, 1fr); }
  .oh-page-title { padding: var(--oh-sp-6) 0 var(--oh-sp-4); font-size: var(--oh-fs-20); }
}

@media (max-width: 479px) {
  .oh-footer__nav { grid-template-columns: 1fr; }
}