/* ==========================================================================
   Classic Corner Frame  (cf)  — v1.0
   오목(inverted-round) 모서리 + 이중 테두리 클래식 박스
   --------------------------------------------------------------------------
   Pure CSS · 의존성 없음 · 모든 프레임워크(HTML/React/Vue/Svelte/Next) 공용
   구조:  .cf  >  .cf__body  >  (content)
   레이어(바깥→안쪽, 모두 같은 모서리 중심을 공유하는 동심원):
     1. .cf            = 바깥 굵은 선  (stroke)
     2. .cf::before    = 흰 여백 띠     (gap)
     3. .cf::after     = 안쪽 가는 선   (line)
     4. .cf__body      = 콘텐츠 영역    (body)
   ========================================================================== */

.cf {
  /* ---- 디자인 토큰 (이 값만 바꿔서 사용) ---- */
  --cf-radius: 28px;          /* 오목 모서리 반지름 */
  --cf-stroke-w: 3px;         /* 바깥 굵은 선 두께 */
  --cf-gap-w: 7px;            /* 선 사이 여백 */
  --cf-line-w: 1.5px;         /* 안쪽 가는 선 두께 */
  --cf-stroke: #A88D70;       /* 바깥 선 색 */
  --cf-gap: #FBF9F4;          /* 여백 색 */
  --cf-line: #E0D2C0;         /* 안쪽 선 색 */
  --cf-bg: #FFFFFF;           /* 콘텐츠 배경 */
  --cf-pad: 0px;              /* 콘텐츠 안쪽 패딩 */

  /* ---- 내부 계산값 (수정 금지) ---- */
  --cf-k1: var(--cf-stroke-w);
  --cf-k2: calc(var(--cf-stroke-w) + var(--cf-gap-w));
  --cf-k3: calc(var(--cf-stroke-w) + var(--cf-gap-w) + var(--cf-line-w));

  --k: 0px;
  position: relative;
  display: block;
  isolation: isolate;
  background: var(--cf-stroke);
  box-sizing: border-box;
}

/* 공통 마스크: 바깥 박스 네 꼭짓점을 중심으로 반지름 (radius + k) 만큼 파냄 */
.cf,
.cf::before,
.cf::after,
.cf > .cf__body {
  --cf-r: calc(var(--cf-radius) + var(--k));
  --cf-o: calc(-1 * var(--k));
  --cf-e: calc(100% + var(--k));
  -webkit-mask:
    radial-gradient(circle at var(--cf-o) var(--cf-o), #0000 var(--cf-r), #000 calc(var(--cf-r) + .5px)),
    radial-gradient(circle at var(--cf-e) var(--cf-o), #0000 var(--cf-r), #000 calc(var(--cf-r) + .5px)),
    radial-gradient(circle at var(--cf-o) var(--cf-e), #0000 var(--cf-r), #000 calc(var(--cf-r) + .5px)),
    radial-gradient(circle at var(--cf-e) var(--cf-e), #0000 var(--cf-r), #000 calc(var(--cf-r) + .5px));
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at var(--cf-o) var(--cf-o), #0000 var(--cf-r), #000 calc(var(--cf-r) + .5px)),
    radial-gradient(circle at var(--cf-e) var(--cf-o), #0000 var(--cf-r), #000 calc(var(--cf-r) + .5px)),
    radial-gradient(circle at var(--cf-o) var(--cf-e), #0000 var(--cf-r), #000 calc(var(--cf-r) + .5px)),
    radial-gradient(circle at var(--cf-e) var(--cf-e), #0000 var(--cf-r), #000 calc(var(--cf-r) + .5px));
  mask-composite: intersect;
}

.cf::before,
.cf::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.cf::before { --k: var(--cf-k1); inset: var(--cf-k1); background: var(--cf-gap); }
.cf::after  { --k: var(--cf-k2); inset: var(--cf-k2); background: var(--cf-line); }

.cf > .cf__body {
  --k: var(--cf-k3);
  position: relative;
  margin: var(--cf-k3);
  padding: var(--cf-pad);
  background: var(--cf-bg);
  overflow: hidden;
  box-sizing: border-box;
  min-height: calc(2 * var(--cf-radius));
}

/* 미디어(지도/이미지/iframe)를 꽉 채울 때 */
.cf--media > .cf__body > img,
.cf--media > .cf__body > video,
.cf--media > .cf__body > iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* ---- 사이즈 프리셋 ---- */
.cf--sm { --cf-radius: 14px; --cf-stroke-w: 2px; --cf-gap-w: 4px; --cf-line-w: 1px; }
.cf--lg { --cf-radius: 40px; --cf-stroke-w: 4px; --cf-gap-w: 10px; --cf-line-w: 2px; }

/* ---- 컬러 테마 ---- */
.cf--bronze { /* 기본값 (레퍼런스) */ }
.cf--ink    { --cf-stroke: #2B2724; --cf-gap: #F4F0E8; --cf-line: #8C8378; --cf-bg: #FFFDF8; }
.cf--sage   { --cf-stroke: #6F8468; --cf-gap: #F6F8F2; --cf-line: #C7D3BE; --cf-bg: #FFFFFF; }
.cf--night  { --cf-stroke: #C9A96E; --cf-gap: #1C1A17; --cf-line: #6A5A3E; --cf-bg: #24211D; }

/* 인쇄/고대비 대응 */
@media (forced-colors: active) {
  .cf, .cf::before, .cf::after, .cf > .cf__body { -webkit-mask: none; mask: none; }
  .cf > .cf__body { outline: 2px solid CanvasText; }
}