/* =============================================================
   iOS Core — styles.css 위에 얹는 한 겹. 이 파일과 index.html 의
   <link> 한 줄만 빼면 원래 Minimalism 으로 완전히 돌아간다.

   레퍼런스에서 가져온 것은 **문법**뿐이다(레이아웃·구조는 손대지 않는다):
     ① OS 의 UI 를 디자인 재료로 쓴다 — 텍스트 선택 하이라이트, 선택 상자, 핸들
     ② 시스템 그레이 캔버스 + 흰 그룹 카드 (설정 앱의 inset grouped list)
     ③ 시스템 블루 단색 하나로만 강조. 그라디언트·틴트 배경 없음

   손대지 않은 것: 히어로·기능 그리드·쇼케이스 사진·워크플로 표·풋터.
   사진에 액자를 두르지 않는다는 원칙(STYLE_LOCK.forced_rules.D)은 그대로다.
   ============================================================= */

:root{
  /* iOS systemGray6 / separator / secondaryLabel — 따뜻한 베이지에서 시스템 회색으로 */
  --alt-bg:#F2F2F7;
  --rule:rgba(60,60,67,.16);
  --muted:rgba(60,60,67,.62);

  /* 아래 값들은 이 겹에서만 쓴다 */
  --ios-radius:14px;          /* 그룹 카드 */
  --ios-inset:20px;           /* 행 좌우 여백 = 구분선이 들어가는 지점 */
  --ios-sep:rgba(60,60,67,.2);
}

/* ── ① 텍스트 선택 하이라이트 ─────────────────────────────
   레퍼런스 전부에 나오는 그 문법. 굵게·색으로 강조하는 대신
   "방금 그 낱말을 드래그해 잡아 둔" 상태로 보이게 한다.
   양 끝의 막대와 구슬이 iOS 선택 손잡이다. 페이지에 딱 두 군데만 쓴다. */
.sel{
  position:relative;
  background:color-mix(in srgb,var(--accent) 20%,transparent);
  border-radius:3px;
  padding:0 .04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.sel::before,.sel::after{
  content:"";position:absolute;width:10px;pointer-events:none;
  background-repeat:no-repeat;
}
/* 왼쪽 위 — 구슬이 위에, 막대가 아래로 */
.sel::before{
  left:-5px;top:-5px;height:calc(100% + 5px);
  background-image:
    radial-gradient(circle at 5px 5px,var(--accent) 0 4.2px,transparent 4.6px),
    linear-gradient(var(--accent),var(--accent));
  background-size:10px 10px,2px calc(100% - 5px);
  background-position:0 0,4px 5px;
}
/* 오른쪽 아래 — 막대가 위에서 내려와 구슬로 끝난다 */
.sel::after{
  right:-5px;bottom:-5px;height:calc(100% + 5px);
  background-image:
    radial-gradient(circle at 5px calc(100% - 5px),var(--accent) 0 4.2px,transparent 4.6px),
    linear-gradient(var(--accent),var(--accent));
  background-size:10px 100%,2px calc(100% - 5px);
  background-position:0 0,4px 0;
}

/* 실제 드래그 선택 색도 같은 파랑으로 맞춘다 */
::selection{background:color-mix(in srgb,var(--accent) 26%,transparent);color:var(--text)}

/* ── ② 비교 무대를 '선택된 오브젝트'로 ─────────────────────
   원래는 회색 헤어라인 한 줄이었다. 같은 일(스크린샷의 경계 표시)을
   하면서 편집 도구의 선택 상자 문법으로 바꾼다 — 모서리 핸들 4개.
   손잡이를 넘어간 쪽은 그려지지 않는 동작은 그대로다. */
.ba-frame{
  border-color:var(--accent);
  border-radius:4px;
  background-image:
    radial-gradient(circle at 4.5px 4.5px,var(--bg) 0 2.2px,var(--accent) 2.6px 4px,transparent 4.4px),
    radial-gradient(circle at 4.5px 4.5px,var(--bg) 0 2.2px,var(--accent) 2.6px 4px,transparent 4.4px),
    radial-gradient(circle at 4.5px 4.5px,var(--bg) 0 2.2px,var(--accent) 2.6px 4px,transparent 4.4px),
    radial-gradient(circle at 4.5px 4.5px,var(--bg) 0 2.2px,var(--accent) 2.6px 4px,transparent 4.4px);
  background-size:9px 9px;
  background-repeat:no-repeat;
  background-position:left top,right top,left bottom,right bottom;
  background-origin:border-box;
}
/* 손잡이 자체도 시스템 파랑 원반으로 — 검은 알약보다 iOS 답다 */
.ba-grip{
  background:var(--accent);
  box-shadow:0 1px 3px rgba(0,0,0,.18),0 6px 16px rgba(0,0,0,.14);
}
.ba-grip::before{border-right-color:var(--on-accent)}
.ba-grip::after{border-left-color:var(--on-accent)}

/* ── ③ FAQ = 설정 앱의 inset grouped list ─────────────────
   회색 캔버스 위에 흰 카드 하나, 행 사이 구분선은 왼쪽 여백만큼 들어간다.
   그 '들여쓴 구분선'이 iOS 목록의 서명이다. */
#faq{background:var(--alt-bg);border-block:1px solid var(--rule)}
.qa{
  border-top:0;
  background:var(--bg);
  border-radius:var(--ios-radius);
  overflow:hidden;
}
.qa details{border-bottom:0}
.qa details + details{
  background-image:linear-gradient(var(--ios-sep),var(--ios-sep));
  background-size:calc(100% - var(--ios-inset)) 1px;
  background-position:var(--ios-inset) 0;
  background-repeat:no-repeat;
}
.qa summary{padding:18px var(--ios-inset)}
.qa summary::after{
  width:9px;height:9px;border-width:2px;border-radius:1px;
  margin-top:.5em;color:var(--muted);opacity:.7}
.qa details p{padding:0 var(--ios-inset) 20px}
.qa details[open]{background-color:color-mix(in srgb,var(--accent) 4%,transparent)}

/* ── 방침 3항도 같은 카드 문법으로 ────────────────────────── */
.policy > div{
  background:var(--bg);
  border-radius:var(--ios-radius);
  padding:20px var(--ios-inset);
}
.policy dt{border-bottom:0;padding-bottom:8px}
.policy dd{margin-top:0}

/* ── ④ 시스템 블루의 자리 ─────────────────────────────────
   iOS 는 '누를 수 있는 글자'를 전부 파랗게 쓴다. 밑줄 와이프는 그대로 둔다. */
.hero-actions .link,.policy dd .link,.footer-links .link,.fineprint .link{color:var(--accent)}

/* 헤더 유리를 iOS 재질 값에 맞춘다 (styles.css 의 @supports 블록보다 뒤에 온다) */
@supports (backdrop-filter:blur(1px)){
  .site-header{
    background:color-mix(in srgb,var(--bg) 78%,transparent);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px)}
}

@media (max-width:880px){
  .policy > div{padding:18px}
}