/* ==========================================================
   C.O.V.E.R.T — shared stylesheet
   모든 페이지가 이 파일 하나를 참조합니다.
   페이지 고유 스타일은 각 HTML 안에 둡니다.

   팔레트·서체·모서리는 whalelandkr.com/covert/ 의 것을 그대로 씁니다.
   두 사이트가 한 브랜드로 읽혀야 하기 때문입니다.
   ========================================================== */

:root{
  /* ---------- 크림 팔레트 ---------- */
  --cream:#fff5d0;              /* 본문 배경 */
  --cream-soft:#fff9e6;         /* 카드 표면 */
  --orange:#f19a45;             /* 액센트 — 배지 배경, 광채, 밑줄 등 장식용 */
  /* 글자로 쓰는 오렌지. #f19a45 는 크림 배경에서 대비가 2.03 밖에 안 나와
     12px 라벨이 읽히지 않는다. 같은 색조를 진하게 잡아 4.7 로 올린 값이다. */
  --orange-ink:#a2611f;
  --brown:#61412b;              /* 제목 · 강조 텍스트 */
  --ink:#1f2228;                /* 본문 텍스트 */
  --muted:#72706c;              /* 보조 텍스트 */
  --line:rgba(70,49,31,.12);    /* 구분선 */
  --navy:#07111f;               /* 어두운 카드 */
  --red:#aa2525;
  --green:#54be78;
  --shadow:0 26px 70px rgba(39,28,18,.14);

  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans KR','Noto Sans JP','Noto Sans SC',sans-serif;
  --w:1120px;

  /* ---------- 예전 변수 이름 별칭 ----------
     아직 크림 팔레트로 옮기지 않은 페이지가 깨지지 않도록 남겨둡니다.
     28페이지 전환이 끝나면 이 블록을 지웁니다. */
  --paper:#fff5d0;
  --paper-hi:#fff9e6;
  --paper-lo:rgba(97,65,43,.10);
  --paper-deep:rgba(97,65,43,.16);
  --paper-edge:rgba(97,65,43,.20);
  --ink-soft:#72706c;
  --ink-faint:#72706c;   /* 크림 배경에서 #9a978f 는 대비 2.92 로 부족했다 */
  --mono:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans KR','Noto Sans JP','Noto Sans SC',sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;overflow-x:hidden;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75;
  background:
    url("cream-bg.png") center / cover fixed,
    linear-gradient(180deg, var(--cream) 0%, #fffdf3 100%);
  -webkit-font-smoothing:antialiased;
}
/* height:auto 가 없으면 img 의 height 속성값이 그대로 남아 세로만 고정된다.
   width="340" height="421" 이 붙은 범이 이미지가 170x421 로 눌렸던 원인이다. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--brown);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:800}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--w);margin:0 auto;padding:0 max(20px,4vw);position:relative}
.wrap-narrow{max-width:820px}

/* ---------- type ---------- */
.kicker{color:var(--orange-ink);font-size:0.75rem;font-weight:950;letter-spacing:.20em;text-transform:uppercase;margin:0 0 16px}
.kicker-dim{color:var(--muted)}
.head{color:var(--brown);font-weight:800;font-size:clamp(30px,4.4vw,46px);line-height:1.24;letter-spacing:-.02em;margin:0 0 18px}
.say{font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.82;color:var(--muted);margin:0 0 26px;max-width:54ch}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- header : 로고 + 언어 전환만 ---------- */
.topbar{
  position:sticky;top:0;z-index:60;min-height:70px;
  background:rgba(255,245,208,.82);border-bottom:1px solid rgba(97,65,43,.10);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.topbar-in{max-width:var(--w);margin:0 auto;padding:16px max(20px,4vw);display:flex;align-items:center;justify-content:space-between;gap:18px}
.mark{color:var(--brown);font-weight:950;font-size:0.94rem;letter-spacing:.16em}
.mark i{font-style:normal;color:var(--orange)}
.langsel{position:relative}
.langsel select{
  appearance:none;-webkit-appearance:none;
  background:rgba(255,255,255,.5);border:1px solid rgba(97,65,43,.16);
  font-family:inherit;font-size:0.78rem;font-weight:800;letter-spacing:.04em;color:var(--brown);
  padding:9px 32px 9px 15px;border-radius:999px;cursor:pointer
}
.langsel select:hover{background:rgba(255,255,255,.78)}
.langsel::after{content:"▾";position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--brown);pointer-events:none}

/* ---------- buttons ---------- */
.cta{
  min-height:52px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-weight:950;font-size:0.92rem;
  border-radius:999px;border:1px solid transparent;cursor:pointer;
  color:#fff;background:linear-gradient(135deg, var(--brown), #2b1a11);
  box-shadow:0 18px 42px rgba(97,65,43,.20);
  transition:transform .18s ease, box-shadow .18s ease
}
.cta:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(97,65,43,.26)}
.cta-2{color:var(--brown);background:rgba(255,255,255,.44);border-color:rgba(97,65,43,.16);box-shadow:none}
.cta-2:hover{background:rgba(255,255,255,.72);box-shadow:none}
/* 아직 주소가 정해지지 않은 버튼. 링크처럼 보이되 눌리지 않습니다.
   주소가 생기면 마크업을 <a class="cta"> 로 되돌리고 이 규칙을 지웁니다. */
.cta-off{
  color:var(--muted);background:rgba(97,65,43,.07);border-color:rgba(97,65,43,.12);
  box-shadow:none;cursor:default;pointer-events:none
}
.cta-off:hover{transform:none;box-shadow:none;background:rgba(97,65,43,.07)}
.linkarrow{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--brown);font-weight:900;font-size:0.94rem;
  border-bottom:2px solid rgba(241,154,69,.55);padding-bottom:3px;
  transition:border-color .18s ease
}
.linkarrow:hover{border-bottom-color:var(--orange)}

/* ---------- cards ---------- */
.sheet{
  background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.6);
  border-radius:38px;box-shadow:var(--shadow);position:relative
}
.badge{
  display:inline-flex;align-items:center;
  padding:6px 14px;border-radius:999px;
  background:rgba(241,154,69,.18);color:var(--orange-ink);
  font-size:0.7rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase
}

/* ---------- footer : 이 사이트의 유일한 내비게이션 ---------- */
.foot{border-top:1px solid var(--line);margin-top:40px;padding:60px 0 46px;background:rgba(255,249,230,.5)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.4fr;gap:38px}
.foot-h{color:var(--orange-ink);font-size:0.72rem;font-weight:950;letter-spacing:.20em;text-transform:uppercase;margin:0 0 16px}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-list a{font-size:0.94rem;font-weight:700;color:var(--muted)}
.foot-list a:hover{color:var(--brown)}
.foot-mark{color:var(--brown);font-weight:950;font-size:0.98rem;letter-spacing:.16em;margin:0 0 12px}
.foot-tag{font-size:0.9rem;color:var(--muted);line-height:1.7;margin:0 0 18px;max-width:30ch}
.sns{display:flex;gap:14px;font-size:0.7rem;font-weight:900;letter-spacing:.10em;color:var(--muted);flex-wrap:wrap}
.sns a:hover{color:var(--brown)}
/* 주소가 없는 채널은 링크가 아니라 글자로 둡니다. */
.sns span{opacity:.45;cursor:default}
.news p{font-size:0.9rem;color:var(--muted);line-height:1.68;margin:0 0 14px}
.news-soon{font-size:0.84rem;color:var(--orange-ink);line-height:1.6;margin:10px 0 0}
.legal{border-top:1px solid var(--line);margin-top:42px;padding-top:28px;font-size:0.8rem;line-height:1.95;color:var(--muted)}
.legal-links{display:flex;gap:18px;flex-wrap:wrap;font-size:0.78rem;font-weight:800;margin-bottom:14px}
.legal-links a{color:var(--muted)}
.legal-links a:hover{color:var(--brown)}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .sheet{border-radius:30px}
}
@media (max-width:600px){
  .foot-grid{grid-template-columns:1fr}
  .sheet{border-radius:24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}