/*
Theme Name: WOOAZ
Theme URI: https://www.wooaz.com/
Author: (주)우아즈
Description: (주)우아즈 공식 홈페이지 테마. 4개 브랜드(우아클·모두안·우아띵프렌즈·우아띵) 소개, 소식 게시판, IR 페이지를 포함한다. SEO·AEO·GEO 구조화 데이터 내장.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: 사내 전용
Text Domain: wooaz
*/

/* 실제 스타일은 assets/css/ 안에 페이지별로 분리되어 있고
   functions.php가 조건에 맞게 큐에 넣는다.
   아래는 정적 시안에는 없던, 워드프레스에서만 생기는 상황을 위한 보정이다. */

/* ------------------------------------------------------------
   대표 이미지가 없는 글의 기본 썸네일
   그냥 로고를 넣으면 카드 크기에 맞춰 확대돼 흉하다.
   딥그린 바탕 위에 로고를 작게 얹는다.
   ------------------------------------------------------------ */
/* 페이지별 CSS(.post .ph img 등)가 뒤에 실리므로 !important 로 확정한다.
   대표 이미지가 없을 때만 붙는 클래스라 다른 곳에 영향이 없다. */
.wooaz-thumb-fallback{
  background:#0B4A32 !important;
  display:grid !important;
  place-items:center !important;
}
.wooaz-thumb-fallback img{
  width:44% !important;
  max-width:190px !important;
  height:auto !important;
  object-fit:contain !important;
  opacity:.88;
  transform:none !important;
}

/* ------------------------------------------------------------
   헤더·푸터 로고 — W 만 확정 로고의 벡터, 나머지는 GmarketSans

   W 는 왼쪽 획이 낮고 오른쪽으로 갈수록 올라가는 형태라 상승감이 있다.
   글자보다 키우고 아래로 3px 내려서 밑에서 솟아오르는 것처럼 보이게 했다.

   구조: .logo > .lmk( img.wmark + span"OOAZ" ) + b"(주)우아즈"
   .lmk 로 한 번 묶는 이유 — .logo 의 gap(9px)이 W 와 OOAZ 사이까지 벌리기 때문.
   W 와 OOAZ 는 2px 로 붙이고, 회사명과의 간격만 .logo 의 gap 을 쓴다.

   되돌리려면 header.php · footer.php 의 .lmk 묶음을 WOOAZ 글자로 되돌리면 된다.

   assets/img/wooaz_logo.svg 는 글자 다섯 개가 다 있는 확정 로고다(원본 색 유지).
   assets/img/wooaz_logo_web.png 은 옛 로고이므로 쓰지 않는다.
     · 배경이 투명이 아니라 연회색이다. 딥그린 위에 회색 박스가 생긴다.
     · A 자가 평범한 삼각형이다.
   (소식 목록 대체 썸네일·OG 공유 이미지에 아직 옛 PNG 가 남아 있다)

   .logo 규칙은 페이지별 CSS 12곳에 흩어져 있고 이 파일보다 뒤에 실리므로
   !important 로 확정한다. (파일 12개를 고치는 대신)
   ------------------------------------------------------------ */
.logo .lmk{
  display:flex !important;
  align-items:baseline !important;
  gap:2px !important;
}
/* 크기를 px 로 박지 않고 글자 크기(em)에 묶는다.
   헤더·푸터·모바일에 각각 px 예외를 두었더니 W 만 18/20/23px 로 갈라져
   같은 로고가 자리마다 달라 보였다. em 이면 글자를 따라가므로 저절로 같아진다. */
.logo .wmark{
  height:1em !important;
  width:auto !important;
  display:block !important;
  position:relative !important;
  top:.15em !important;
}

/* ------------------------------------------------------------
   푸터 — 개인정보처리방침은 다른 항목과 구분되게 표시한다.
   개인정보 보호법 제30조는 정보주체가 쉽게 확인할 수 있도록 공개하라고 정한다.
   ------------------------------------------------------------ */
footer nav a.privacy{
  font-weight:700;
  color:var(--on-dark-1);
}

/* ------------------------------------------------------------
   아직 주소를 넣지 않은 버튼
   눌러도 아무 일이 없으면 고장 난 것처럼 보이므로 상태를 드러낸다.
   사용자 정의하기에서 주소를 넣으면 자동으로 평소 모습으로 돌아온다.
   ------------------------------------------------------------ */
a[aria-disabled="true"]{
  opacity:.42;
  cursor:not-allowed;
  pointer-events:none;
}

/* ------------------------------------------------------------
   약관·방침 같은 본문 전용 페이지의 보조 스타일
   .a-body 에는 h3 와 번호 목록 규칙이 없어 여기서 채운다.
   ------------------------------------------------------------ */
.a-body h3{
  font-size:clamp(1.02rem,1.6vw,1.15rem);
  font-weight:600;
  color:var(--text-1);
  margin-block:26px 10px;
}
.a-body ol{
  margin:0 0 20px;
  padding-left:22px;
}
.a-body ol li{
  color:var(--text-2);
  font-size:1.02rem;
  margin-bottom:9px;
  padding-left:2px;
}
.a-body ol li::marker{color:var(--text-3);font-weight:600}
.a-body ul li::marker{color:var(--text-3)}

/* 문서 첫머리 요약 문단 */
.a-body .wz-lead{
  font-size:1.1rem;
  color:var(--text-1);
  line-height:1.75;
  padding:20px 22px;
  background:var(--surface-3);
  border-radius:12px;
  margin-bottom:34px;
}

/* 회사 정보·책임자 정보처럼 따로 떼어 보여줄 상자 */
.a-body .wz-note{
  margin-block:22px;
  padding:18px 22px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2);
}
.a-body .wz-note p{
  margin-bottom:0;
  font-size:.96rem;
  line-height:1.85;
}
.a-body .wz-note p + p{margin-top:12px}

/* ------------------------------------------------------------
   저자 정보(이름·소개)가 비어 있을 때
   빈 상자가 그대로 노출되지 않도록 감춘다.
   프로필에 이름과 소개를 넣으면 자동으로 다시 나타난다.
   ------------------------------------------------------------ */
.authorbox.is-empty{display:none}
.au.is-empty .ph{display:none}


/* ------------------------------------------------------------
   언어 전환 (국기). 헤더 오른쪽과 모바일 메뉴 하단에 쓴다.
   이모지 국기는 윈도우에서 글자로 깨지므로 SVG를 인라인으로 그린다.
   ------------------------------------------------------------ */
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.08)}
.lang a{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px 5px 6px;border-radius:999px;
  color:var(--on-dark-2,#cfd8d2);font-size:.74rem;font-weight:600;letter-spacing:.04em;line-height:1;
  opacity:.72;transition:opacity .2s,background .2s;white-space:nowrap;
}
.lang a svg{width:27px;height:18px;border-radius:2px;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.28);shape-rendering:geometricPrecision}
.lang a:hover,.lang a:focus-visible{opacity:1;background:rgba(255,255,255,.1)}
.lang a[aria-current="true"]{opacity:1;background:rgba(255,255,255,.16);color:#fff}
.lang-hdr{margin-left:4px}
@media(max-width:920px){
  .lang-hdr{margin-left:auto;margin-right:2px}
  .lang-hdr a span{display:none}
  .lang-hdr a{padding:5px 6px}
}
/* 좁은 화면: 로고 + 국기 + 햄버거만 남긴다. 문의 버튼은 풀스크린 메뉴 안에 있다 */
@media(max-width:600px){
  #hdr nav > .btn{display:none}
  .lang-hdr{margin-right:0}
  .lang-hdr a svg{width:24px;height:16px}
}
.mnav-contact{margin-top:18px;display:flex}
.mnav-lang{border-bottom:0;padding-top:14px}
.mnav-lang .lang{background:rgba(255,255,255,.06)}
.mnav-lang .lang a{font-size:.9rem;padding:9px 14px 9px 10px}
.mnav-lang .lang a svg{width:33px;height:22px}