/* 양평닷케이알 움직임 — motion v3 (2026-09-13 사장님 승인 "컬러판으로 해서 진행합니다", 원본 = 목업_motion_v3.css 그대로) — 브런치 실측 명세(03.사장님자료\브런치_움직임_명세_2026-09-13.md)에 맞춘 판.
   동작과 수치만 옮겼다. 브런치의 코드·그림·글꼴·글은 쓰지 않았다.
   v2 대비: 머리가 숨지 않음(표지 끝에서 투명→흰색) · 컴퓨터 글 표지 '커튼' · 시차·제목 흐림 없앰 · 떠오름 30px 시차 없음
            · 사진 1.1 확대 0.3s · 덮개 .4→.6 · 표지 슬라이드 1:1 끌기(50% 넘기면 넘김) · 위쪽 소식 띠(10초 세로 넘김)
   어르신·검색 규칙(명세 7장)이 이긴다: 본문 18px · #555 이상 · 누를 곳 44px · JS 꺼짐에도 내용 · 움직임 줄이기 전부 끔 · 멈춤 단추.
   ★ 모든 시간·곡선·거리 값은 아래 :root 한 곳. JS 쪽 값은 목업_motion_v3.js 맨 위 M. */

:root{
  /* 곡선(명세 0장 공통값) */
  --m-ease: ease;
  --m-ease-out: ease-out;
  --m-ease-in: ease-in;
  --m-ease-io: ease-in-out;
  --m-ease-std: cubic-bezier(.4,0,.2,1);            /* 기본 전환 0.15s */
  /* 표지 슬라이드 멈춤 — 명세 궤적에 맞춰 계산한 곡선 */
  --m-dur-settle-m: .8s;  --m-ease-settle-m: cubic-bezier(.18,.62,.29,1);  /* 휴대폰: 0.4초 90% · 0.8초 멈춤 */
  --m-dur-settle-d: .9s;  --m-ease-settle-d: cubic-bezier(.2,.9,.29,1);    /* 컴퓨터: 0.3초 86% · 0.5초 97% · 0.9초 멈춤 */
  /* 떠오름 */
  --m-rise: 30px;
  --m-dur-rise-short: .2s;    /* 카드 */
  --m-dur-rise-long: .5s;     /* 섹션·표지 글자 */
  --m-dur-rise-fade: .2s;     /* 투명도는 둘 다 0.2s */
  /* 사진 확대·덮개(hover) */
  --m-dur-zoom: .3s;  --m-ease-zoom: ease-in-out;  --m-zoom-scale: 1.1;
  --m-shade: 51,51,51;  --m-shade-a: .4;  --m-shade-a-hover: .6;
  /* 머리 */
  --m-hd-h: 80px;  --m-hd-h-solid: 60px;  --m-hd-h-m: 56px;  --m-menu-h: 48px;
  --m-hd-bg-solid: rgba(255,255,255,.95);        /* 글·동네 */
  --m-hd-bg-solid-home: rgba(255,255,255,.9);    /* 홈 */
  --m-hd-line: #ddd;
  --m-dur-hd: .2s;       --m-ease-hd: ease-out;       /* 글·동네(컴퓨터) */
  --m-dur-hd-home: .3s;  --m-ease-hd-home: ease-in;   /* 홈(컴퓨터) */
  --m-dur-hd-m: .1s;     --m-ease-hd-m: ease-out;     /* 휴대폰 */
  --m-dur-hd-title: .2s; --m-dur-menu: .2s;
  /* 읽기 진행선 */
  --m-bar-h: 2px;  --m-bar-color: #333;  --m-dur-bar: .2s;  --m-ease-bar: ease-out;
  /* 위쪽 소식 띠 */
  --m-tick-h: 60px;  --m-dur-tick: .5s;  --m-ease-tick: ease-in-out;
  /* 대표 표지(v9b) — 전체 화면 배경 사진이라 브런치 카드(3초)보다 느리게. 한 장 머무는 시간은 JS M.BC_HOLD_MS */
  --m-dur-bc-fade: 1.6s;  --m-ease-bc-fade: ease-in-out;
  --m-bc-kb-scale: 1.05;  --m-dur-bc-kb: 7.1s;        /* 느린 확대(머무는 시간 + 겹침) */
  /* 브런치에 없는 것(측정 못 함) — v8 값을 조용하게 */
  --m-dur-press: .12s;  --m-press-opacity: .85;
  --m-dur-page: .2s;
  --m-dur-line: .3s;    /* 슬라이드 위치선 */
}

/* ── 공통 ── */
html{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible, button:focus-visible{outline:3px solid #121212;outline-offset:3px}

/* 누르는 순간 옅어짐(브런치는 없음 — 어르신 확인용으로 둠) */
.card > a{display:block}
.card > a, .news a, .dongs a, .cur > a, .catlist a, .chips a, .rel a, .cs-ctrl button, .snap-ctl button, .tick-btn, .obtn, .more, .menu a{
  transition:opacity var(--m-dur-press) var(--m-ease-out)}
.card > a:active, .news a:active, .dongs a:active, .cur > a:active, .catlist a:active, .chips a:active, .rel a:active,
.cs-ctrl button:active, .snap-ctl button:active, .tick-btn:active, .obtn:active, .more:active, .menu a:active{opacity:var(--m-press-opacity)}

/* 페이지 이동(브런치는 없음) — 0.2초 옅게만 */
@view-transition{navigation:auto}
::view-transition-old(root), ::view-transition-new(root){animation-duration:var(--m-dur-page)}
.js .hd{view-transition-name:site-header}
@supports not (view-transition-name:a){ .js body{animation:m-fade-in var(--m-dur-page) var(--m-ease-out) both} }
@keyframes m-fade-in{from{opacity:0}to{opacity:1}}
@keyframes m-rise-in{from{opacity:0;transform:translate3d(0,var(--m-rise),0)}to{opacity:1;transform:none}}

/* ── 사진 확대 1→1.1 · 덮개 .4→.6 (0.3s ease-in-out) ── */
.ph{overflow:hidden}
.ph img{transition:transform var(--m-dur-zoom) var(--m-ease-zoom)}
@media (hover:hover){
  a:hover .ph img{transform:scale(var(--m-zoom-scale))}
  a:hover h3, a:hover h4, .dongs a:hover > b, .news a:hover b{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
  .js .feat a:hover .ph::after, .js .cur a:hover .ph::after{background:rgba(var(--m-shade),var(--m-shade-a-hover))}
}
a:focus-visible .ph img{transform:scale(var(--m-zoom-scale))}
a:focus-visible h3, a:focus-visible h4{text-decoration:underline;text-underline-offset:5px}
.js .feat .ph::after, .js .cur .ph::after{background:rgba(var(--m-shade),var(--m-shade-a));transition:background-color var(--m-dur-zoom) var(--m-ease-zoom)}

/* ── 머리: 숨지 않는다. 표지(또는 윗부분) 끝에서 투명 → 흰색 + 아래 1px 선, 컴퓨터는 80→60px ──
   높이 변화는 transform 으로(자리 밀림 없음). body[data-hd] = over(표지 위에 겹침) · flow(흐름 속, 홈) · reserve(자리 비워 둠) */
.js .hd{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--m-hd-h);background-color:transparent;
  transition:background-color var(--m-dur-hd) var(--m-ease-hd), box-shadow var(--m-dur-hd) var(--m-ease-hd), transform var(--m-dur-hd) var(--m-ease-hd)}
.js body[data-hd="flow"] .hd{position:sticky;left:auto;right:auto;transition-duration:var(--m-dur-hd-home);transition-timing-function:var(--m-ease-hd-home)}
.js body[data-hd="reserve"]{padding-top:var(--m-hd-h)}
.js .hd .wrap, .js .hd .in{height:100%;position:relative;transition:transform var(--m-dur-hd) var(--m-ease-hd)}
.js .hd.hd-solid{background-color:var(--m-hd-bg-solid);box-shadow:inset 0 -1px 0 var(--m-hd-line);
  transform:translate3d(0,calc(var(--m-hd-h-solid) - var(--m-hd-h)),0)}
.js body[data-hd="flow"] .hd.hd-solid{background-color:var(--m-hd-bg-solid-home)}
.js .hd.hd-solid .wrap, .js .hd.hd-solid .in{transform:translate3d(0,calc((var(--m-hd-h) - var(--m-hd-h-solid)) / 2),0)}
/* 표지 위: 흰 글씨 + 위쪽 그라데이션(밝은 사진에서도 4.5:1) */
/* data-hd-over = 흐름 속 머리(홈)가 대표 표지 위에 겹칠 때도 같은 흰 글씨 */
.js body[data-hd="over"] .hd::before, .js body[data-hd-over] .hd::before{content:"";position:absolute;left:0;right:0;top:0;height:200%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));transition:opacity var(--m-dur-hd) var(--m-ease-hd)}
.js body[data-hd="over"] .hd.hd-solid::before, .js body[data-hd-over] .hd.hd-solid::before{opacity:0}
.js .hd .logo, .js .hd .menu a{transition:color var(--m-dur-hd) var(--m-ease-hd), opacity var(--m-dur-press) var(--m-ease-out)}
.js body[data-hd="over"] .hd:not(.hd-solid) .logo, .js body[data-hd="over"] .hd:not(.hd-solid) .menu a,
.js body[data-hd-over] .hd:not(.hd-solid) .logo, .js body[data-hd-over] .hd:not(.hd-solid) .menu a{color:#fff}
.js body[data-hd="over"] .hd:not(.hd-solid) .srch svg, .js body[data-hd-over] .hd:not(.hd-solid) .srch svg{stroke:#fff}

/* ── 대표 표지(v9b): 사진만 겹쳐 바뀜(새 사진이 위에서 나타나고, 다 나타난 뒤 옛 사진을 치움 → 밝기 출렁임 없음) ── */
.bc-ph{opacity:0;transition:opacity var(--m-dur-bc-fade) var(--m-ease-bc-fade)}
.bc-ph.is-on{opacity:1}
.bc-ph img{transform:scale(1)}
.js .bc-ph.kb img{transform:scale(var(--m-bc-kb-scale));transition:transform var(--m-dur-bc-kb) linear}
.bc-ctrl{position:absolute;z-index:3;bottom:22px;left:max(24px, calc((100% - 1180px) / 2 + 24px));display:flex;align-items:center;gap:2px}
.bc-ctrl .bc-play{appearance:none;width:44px;height:44px;margin-right:6px;border:1px solid rgba(255,255,255,.8);background:rgba(0,0,0,.3);color:#fff;font:inherit;font-size:14px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.bc-dots{display:flex}
.bc-dots button{appearance:none;width:26px;height:44px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.bc-dots button::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid #fff;background:transparent;transition:background-color var(--m-dur-line) var(--m-ease-std)}
.bc-dots button[aria-current="true"]::before{background:#fff}
@media (max-width:600px){ .bc-ctrl{left:14px;bottom:58px} .bc-dots button{width:25px} }
.hd-title{display:none}

/* 읽기 진행선: 흰 머리 바로 아래 2px, 흰색이 된 뒤에만 */
.hd .readbar{position:absolute;left:0;right:0;bottom:calc(-1 * var(--m-bar-h));height:var(--m-bar-h);background:var(--m-bar-color);
  transform-origin:0 50%;transform:scaleX(0);opacity:0;pointer-events:none;
  transition:transform var(--m-dur-bar) var(--m-ease-bar), opacity var(--m-dur-bar) var(--m-ease-bar)}
.hd.hd-solid .readbar{opacity:1}

/* ── 떠오름: 30px + 옅게 → 또렷. 카드 0.2s · 섹션 0.5s · 차례 늦춤 없음 ── */
.js .rv-l, .js .rv-s{opacity:0;transform:translate3d(0,var(--m-rise),0)}
.js .rv-l{transition:opacity var(--m-dur-rise-fade) var(--m-ease-out), transform var(--m-dur-rise-long) var(--m-ease-out)}
.js .rv-s{transition:opacity var(--m-dur-rise-fade) var(--m-ease-out), transform var(--m-dur-rise-short) var(--m-ease-out)}
.js .rv-l.in, .js .rv-s.in{opacity:1;transform:none}
/* 글 표지 글자: 불러올 때 한 번 떠오름(0.5s) */
.js .cover .ov{animation:m-rise-in var(--m-dur-rise-long) var(--m-ease-out) both}

/* ── 위쪽 소식 띠: 10초마다 세로로 60px 넘김(0.5s ease-in-out). JS 없음 = 항목이 모두 보임 ── */
.tick{background:#f6f6f6;border-bottom:1px solid #e6e6e6}
.tick-in{display:flex;align-items:center;gap:14px;min-height:var(--m-tick-h)}
.tick-k{flex-shrink:0;font-size:16px;font-weight:700;color:#121212}
.tick-list{list-style:none;flex:1;min-width:0}
.tick-list a{display:flex;align-items:center;min-height:44px;font-size:17px;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tick-list a span{color:#555;margin-left:8px;font-size:16px}
.tick-btn{appearance:none;flex-shrink:0;width:44px;height:44px;border:1px solid #bdbdbd;background:#fff;color:#121212;font:inherit;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.js .tick-list{position:relative;height:var(--m-tick-h);overflow:hidden}
.js .tick-list li{position:absolute;left:0;right:0;top:0;height:var(--m-tick-h);display:flex;align-items:center;
  transform:translate3d(0,100%,0);transition:transform var(--m-dur-tick) var(--m-ease-tick)}
.js .tick:not(.tk-on) .tick-list li:first-child, .js .tick-list li.is-cur{transform:none}
.js .tick-list li.is-out{transform:translate3d(0,-100%,0)}
.js .tick-list li.no-tr{transition:none}

/* ── 표지 슬라이드: 화면 폭 1장, 손가락·마우스를 1:1로 따라감, 끝에서 처음으로 이어짐 ──
   JS 없음: 네 장이 위아래로 모두 보임. JS 있음: 가로 한 줄(처음부터 CSS로 → 자리 밀림 없음) */
.cs{position:relative}
.cs-slide + .cs-slide{margin-top:12px}
.js .cs{overflow:hidden}
.js .cs-track{position:relative;display:flex;touch-action:pan-y;will-change:transform;
  transition:transform var(--m-dur-settle-d) var(--m-ease-settle-d)}
.js .cs-track.no-tr, .js .cs.cs-dragging .cs-track{transition:none}
.js .cs-slide{flex:0 0 100%;min-width:0;margin:0}
/* 앞쪽 복제 칸은 흐름 밖(왼쪽 한 칸 자리)에 둔다. 페이지 CSS(.cs-slide.hero{position:relative})가 이기지 못하게 !important */
.js .cs-track > .cs-clone-pre{position:absolute !important;top:0;left:0;width:100%;height:100%;margin:0 !important;transform:translate3d(-100%,0,0)}
.js .cs-track img{-webkit-user-drag:none;user-select:none}
.js .cs.cs-dragging{cursor:grabbing;user-select:none}
.js .cs-slide .tx{padding-bottom:96px}
.cs-ctrl{position:absolute;left:30px;bottom:22px;z-index:5;display:flex;align-items:center;gap:6px;color:#fff}
.cs-ctrl button{appearance:none;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.25);color:#fff;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:16px;cursor:pointer}
.cs-count{font-size:16px;margin-left:8px;color:#f0f0f0;min-width:3.2em}
.cs-line{display:block;width:90px;height:2px;background:rgba(255,255,255,.35);overflow:hidden}
.cs-line i{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(.25);transition:transform var(--m-dur-line) var(--m-ease-std)}

[data-parallax] img{will-change:auto}

.snap-ctl{display:none}
.swipe-cue{display:none}
.cover-down{display:none}

/* ================= 휴대폰(600px 이하) ================= */
@media (max-width:600px){
  :root{--m-hd-h: var(--m-hd-h-m); --m-hd-h-solid: var(--m-hd-h-m)}   /* 휴대폰 머리는 줄어들지 않음 */
  html{scroll-behavior:smooth}

  /* 머리 56px · 흰색 전환 0.1s · 메뉴 네 단어 띠는 맨 위에서만 */
  .js .hd, .js body[data-hd="flow"] .hd{transition-duration:var(--m-dur-hd-m);transition-timing-function:var(--m-ease-hd-m)}
  .js body[data-hd="flow"] .hd{margin-bottom:var(--m-menu-h)}
  .js body[data-hd="reserve"]{padding-top:calc(var(--m-hd-h-m) + var(--m-menu-h))}
  .js .hd .wrap, .js .hd .in{flex-wrap:nowrap;padding-top:0;gap:0}
  .js .logo{font-size:23px}
  .js .hd .menu{position:absolute;top:100%;left:0;right:0;height:var(--m-menu-h);margin:0;padding:0 8px;
    display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid #ececec;
    transition:opacity var(--m-dur-menu) var(--m-ease-out), visibility var(--m-dur-menu)}
  .js .hd.hd-scrolled .menu{opacity:0;visibility:hidden;pointer-events:none}
  .js .hd.hd-scrolled.hd-open .menu{opacity:1;visibility:visible;pointer-events:auto}
  .js body[data-hd="over"] .hd:not(.hd-solid) .menu, .js body[data-hd-over] .hd:not(.hd-solid) .menu{background:transparent;border-bottom-color:rgba(255,255,255,.3)}
  /* 흰색이 되면 머리 가운데에 페이지 이름(0.2s) */
  .js .hd-title{display:block;position:absolute;left:150px;right:64px;top:50%;transform:translateY(-50%);
    text-align:center;font-size:17px;font-weight:700;color:#121212;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    opacity:0;transition:opacity var(--m-dur-hd-title) var(--m-ease-out);pointer-events:none}
  .js .hd.hd-solid .hd-title{opacity:1}

  /* 표지 슬라이드: 화면 끝까지, 휴대폰 멈춤 곡선 */
  .js .cs{margin-inline:-16px}
  .js .cs-track{transition-duration:var(--m-dur-settle-m);transition-timing-function:var(--m-ease-settle-m)}
  .js .cs-slide .tx{padding-bottom:26px}
  .cs-ctrl{position:static;justify-content:center;color:#121212;padding:12px 16px 0;gap:6px}
  .cs-ctrl button{border-color:#bdbdbd;background:#fff;color:#121212}
  .cs-count{color:#333}
  .cs-line{background:#ddd}
  .cs-line i{background:#121212}

  /* 가로로 넘기는 줄(스크롤 스냅 = 손가락 1:1) */
  .snap{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;
    margin-inline:-16px;padding:2px 16px 12px;scroll-padding-inline:16px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;list-style:none}
  .snap::-webkit-scrollbar{display:none}
  .snap > *{flex:0 0 82%;scroll-snap-align:start;min-width:0}
  .dongs.snap > *{flex-basis:70%}
  .news.snap a{grid-template-columns:1fr !important;gap:10px}
  .news.snap .th{height:170px}
  .swipe-cue{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:16px;font-weight:500;color:#333;margin:-12px 0 8px}
  .snap-ctl{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px}
  .snap-ctl button{appearance:none;width:44px;height:44px;border:1px solid #bdbdbd;background:#fff;color:#121212;font:inherit;font-size:18px;display:inline-flex;align-items:center;justify-content:center}
  .snap-ctl button:disabled{opacity:.35}
  .snap-ctl .n{font-size:16px;color:#333;min-width:4.2em;text-align:center}

  /* 소식 띠: 휴대폰은 "양평 소식" 글자 없이 */
  .tick-k{display:none}
  .tick-list a{font-size:16px}

  /* 글 표지 "↓" (움직이지 않음 — 브런치에 없는 요소라 조용히) */
  .cover-down{display:flex;position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
    width:48px;height:48px;align-items:center;justify-content:center;border-radius:50%;
    border:1px solid rgba(255,255,255,.75);color:#fff;font-size:22px;background:rgba(0,0,0,.25)}
}

/* ── 움직임 줄이기: 전부 끔(명세 7-4). 커튼도 일반 스크롤로 ── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  html{scroll-behavior:auto}
  .js .rv-l, .js .rv-s{opacity:1 !important;transform:none !important}
  a:hover .ph img, a:focus-visible .ph img{transform:none}
  .cover, .js .bc{position:relative !important}
  @view-transition{navigation:none}
}