@charset "utf-8";

/* ============================================================
   콘텐츠 (about · mission · archive)
   ------------------------------------------------------------
   전에는 화면마다 CSS 를 따로 뒀는데(2.0_archive_list · 2.0_archive_view ·
   2.0_archive_v2) 콘텐츠 화면이 한 갈래로 묶이면서 한 파일로 합쳤다.
   합치면서 규칙은 한 줄도 바꾸지 않았다 — 파일 경계만 없앤 것이다.

   이름 앞머리로 어느 화면 것인지 가른다.
   · ab_  : about (브랜드 이야기)
   · ms_  : mission (여덟 마디 스크롤 화면)
   · ar_  : 아카이브 목록
   · av_  : 아카이브 상세
   · mg_  : 매거진 목록      · mgv_ : 매거진 상세      · mga_ : 매거진 행동 상자
   겹치는 이름(is_on · is_show · is_next)은 모두 앞머리 있는 클래스에
   붙어서만 쓰이므로 합쳐도 서로 넘나들지 않는다.
   ============================================================ */


/* ============================================================
   아카이브 · 목록 (contents_archive_01list) — ar_
   (옮겨 온 파일: 2.0_archive_list.css)
   ============================================================ */

/* ============================================================
   아카이브 · 목록 (archive_01list.html)
   ------------------------------------------------------------
   읽는 화면이다. 고르는 화면(스토어)처럼 조건이 많지 않아
   사진과 제목에 자리를 크게 내주고, 나머지는 조용히 둔다.

   · ar_ : 아카이브 목록 화면 공용
   색은 스토어·마이페이지와 같은 결(파랑 #1b43c8, 글자 #1b1b1b, 선 #eee)이고
   글자·여백은 clamp() 로 폭에 따라 함께 자란다.
   ============================================================ */

/* ===== 틀 ===== */
.ar_wrap {padding-bottom:clamp(40px,8vw,64px); background:#ffffff;}
.ar_inner {width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(16px,4.4vw,24px); box-sizing:border-box;}

/* ===== 머리 ===== */
.ar_head {padding:clamp(18px,4.6vw,30px) 0 clamp(14px,3.4vw,20px); border-bottom:1px solid #eeeeee;}
/* 화면에는 두지 않고 읽어 주는 기기에만 남긴다 */
.ar_title {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap;}
.ar_lead {margin:0; color:#1b1b1b; font-size:clamp(15px,2.6vw,20px); font-weight:500; line-height:1.6; letter-spacing:-0.02em; word-break:keep-all;}

/* ===== 갈래 · 보기 방식 =====
   왼쪽은 좌우로 밀어 보는 갈래 줄, 오른쪽은 목록/카드 전환 */
.ar_bar {display:flex; align-items:center; gap:clamp(10px,2.6vw,18px); margin-top:clamp(14px,3.4vw,20px);}
.ar_tabs {flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:clamp(14px,3.4vw,22px); padding:0 0 2px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.ar_tabs::-webkit-scrollbar {display:none;}
.ar_tab {flex:0 0 auto; padding:0; border:0; background:transparent; color:#aaaaaa; font-family:inherit; font-size:clamp(13px,2.1vw,15px); font-weight:400; white-space:nowrap; cursor:pointer;}
.ar_tab:hover {color:#666666;}
.ar_tab.is_on {color:#1b1b1b; font-weight:700;}

.ar_views {flex:0 0 auto; display:flex; align-items:center; gap:2px;}
.ar_view {width:clamp(30px,6vw,34px); height:clamp(30px,6vw,34px); padding:0; border:0; border-radius:6px; background:transparent no-repeat center / clamp(16px,3.4vw,18px); cursor:pointer;}
.ar_view.is_list {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b6bac2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");}
.ar_view.is_card {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b6bac2' stroke-width='2'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.2'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.2'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.2'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.2'/%3E%3C/svg%3E");}
.ar_view:hover {background-color:#f4f4f2;}
.ar_view.is_on {background-color:#f2f5ff;}
.ar_view.is_on.is_list {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231b43c8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");}
.ar_view.is_on.is_card {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231b43c8' stroke-width='2'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.2'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.2'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.2'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.2'/%3E%3C/svg%3E");}

/* ===== 맨 위 한 건 =====
   무엇을 먼저 보여 주고 싶은지가 드러나야 한다 — 사진을 넓게 깔고 요약도 길게 */
.ar_hero {display:block; margin-top:clamp(18px,4.4vw,28px); color:inherit; text-decoration:none;}
.ar_hero .ar_thumb {order:0; aspect-ratio:16 / 9;}
.ar_hero_text {display:block; margin-top:clamp(12px,2.8vw,18px);}
.ar_hero_t {display:block; margin-top:clamp(7px,1.8vw,11px); color:#1b1b1b; font-size:clamp(21px,4.4vw,34px); font-weight:700; line-height:1.35; letter-spacing:-0.03em; word-break:keep-all;}
.ar_hero:hover .ar_hero_t {text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;}
.ar_hero_sum {display:block; margin-top:clamp(7px,1.8vw,11px); color:#666666; font-size:clamp(14px,2.2vw,17px); font-weight:300; line-height:1.7; word-break:keep-all;}
.ar_hero .ar_date {display:block; margin-top:clamp(9px,2.2vw,14px);}

/* ===== 기록 줄 =====
   상품 격자와 같은 짜임을 쓰지 않는다. 한 건이 한 줄이고,
   해가 바뀌는 자리에 연도를 세워 훑어 읽게 한다 */
.ar_list {margin:0; padding:0; list-style:none;}

.ar_year {display:flex; align-items:baseline; margin-top:clamp(30px,7vw,52px); padding-bottom:clamp(7px,1.8vw,11px); border-bottom:2px solid #1b1b1b;}
.ar_year:first-child {margin-top:clamp(16px,4vw,26px);}
.ar_year span {color:#1b1b1b; font-size:clamp(21px,4.6vw,32px); font-weight:700; letter-spacing:0.01em; line-height:1;}

.ar_row_link {display:flex; flex-direction:column; gap:clamp(10px,2.4vw,14px); padding:clamp(18px,4.2vw,26px) 0; border-bottom:1px solid #eeeeee; color:inherit; text-decoration:none;}
.ar_date {flex:0 0 auto; color:#b6bac2; font-size:clamp(12px,2vw,14px); font-weight:500; letter-spacing:0.02em;}
.ar_text {display:block; min-width:0;}
.ar_cat {display:inline-flex; align-items:center; height:clamp(21px,4.2vw,24px); padding:0 clamp(7px,1.8vw,10px); border-radius:4px; background:#f2f5ff; color:#1b43c8; font-size:clamp(11px,1.8vw,12.5px); font-weight:600;}
.ar_t {display:block; margin-top:clamp(6px,1.6vw,9px); color:#1b1b1b; font-size:clamp(17px,3.2vw,24px); font-weight:600; line-height:1.4; letter-spacing:-0.02em; word-break:keep-all;}
.ar_row_link:hover .ar_t {text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.ar_sum {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:clamp(5px,1.4vw,8px); color:#8a8f98; font-size:clamp(13px,2vw,15px); font-weight:300; line-height:1.65; word-break:keep-all;}

/* 사진 — 좁은 화면에서는 글 위로 올린다 */
.ar_thumb {order:-1; display:block; position:relative; width:100%; aspect-ratio:16 / 9; border-radius:4px; background:#f4f5f7; overflow:hidden;}
.ar_thumb .img_placeholder {display:block; width:100%; height:100%; background:#eef0f2 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23aab1ba' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='1.5'/><path d='M21 15l-4.5-4.5L6 21'/></svg>") no-repeat center / clamp(34px,7vw,46px); transition:transform .35s ease;}
.ar_row_link:hover .img_placeholder {transform:scale(1.03);}

/* ===== 좁은 화면에서의 층 나누기 =====
   맨 위 한 건과 나머지가 똑같이 큰 사진을 달고 있으면 층이 생기지 않는다.
   넓은 화면에서 첫 건이 남달라 보이는 만큼, 좁은 화면에서도 갈라 준다.
     · 첫 건 : 사진을 화면 끝까지 빼고 글자를 키운다
     · 나머지 : 작은 사진을 오른쪽에 두고 촘촘히 쌓는다 */
@media (max-width:767px) {
  .ar_hero .ar_thumb {width:100vw; margin-left:calc(50% - 50vw); border-radius:0; aspect-ratio:3 / 2;}
  .ar_hero .ar_cat {background:#1b43c8; color:#ffffff;}
  .ar_hero_t {font-size:clamp(23px,6.2vw,30px); letter-spacing:-0.035em;}
  .ar_hero_sum {font-size:clamp(14px,3.6vw,16px);}

  .ar_row_link {display:grid; grid-template-columns:minmax(0,1fr) clamp(88px,26vw,116px); grid-template-areas:"date thumb" "text thumb"; column-gap:clamp(12px,3.4vw,16px); row-gap:6px; align-items:start;}
  .ar_row_link .ar_date {grid-area:date;}
  .ar_row_link .ar_text {grid-area:text;}
  .ar_row_link .ar_thumb {grid-area:thumb; align-self:start; aspect-ratio:1 / 1;}
  .ar_row_link .ar_t {margin-top:clamp(4px,1.2vw,6px); font-size:clamp(15px,4vw,17px); font-weight:600;}
  .ar_row_link .ar_sum {margin-top:4px; font-size:clamp(12px,3.2vw,13px); line-height:1.55;}
  .ar_row_link .ar_cat {height:20px; padding:0 7px; font-size:11px;}
}

/* ===== 카드 보기 =====
   사진을 앞세워 나란히 놓는다. 목록과 달리 연도를 끼우지 않고 카드마다 날짜를 다 적는다 */
.ar_cards {display:grid; grid-template-columns:1fr; gap:clamp(26px,6vw,40px) clamp(16px,3vw,28px); margin:clamp(18px,4.4vw,28px) 0 0; padding:0; list-style:none;}
.ar_card {min-width:0;}
.ar_card_link {display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none;}
.ar_card .ar_thumb {order:0; aspect-ratio:4 / 3;}
.ar_card .ar_text {flex:1 1 auto; display:flex; flex-direction:column; align-items:flex-start; margin-top:clamp(11px,2.6vw,16px);}
.ar_card .ar_t {font-size:clamp(16px,2.6vw,19px);}
.ar_card .ar_date {margin-top:auto; padding-top:clamp(9px,2.2vw,14px);}

/* ===== 더 보기 · 끝 ===== */
.ar_more {margin-top:clamp(26px,6vw,40px); text-align:center;}
.btn_ar_more {min-width:clamp(160px,44vw,220px); height:clamp(48px,8vw,54px); padding:0 clamp(18px,4vw,26px); border:1px solid #d7d3cf; border-radius:8px; background:#ffffff; color:#333333; font-family:inherit; font-size:clamp(14px,2.2vw,16px); font-weight:600; cursor:pointer;}
.btn_ar_more:hover {border-color:#1b1b1b;}
/* 끝까지 봤다는 말 — 그 순간에만 필요하니 잠깐 떠올랐다 사라진다 */
.ar_toast {position:fixed; left:50%; top:clamp(64px,15vw,76px); z-index:1500; max-width:calc(100% - 40px); padding:13px 18px; border-radius:12px; background:rgba(27,27,27,.92); box-shadow:0 6px 20px rgba(20,30,60,.18); color:#ffffff; font-size:clamp(13px,2vw,15px); font-weight:500; line-height:1.45; text-align:center; word-break:keep-all; transform:translate(-50%,-10px); opacity:0; visibility:hidden; transition:opacity .2s, transform .2s, visibility .2s; pointer-events:none;}
.ar_toast.is_show {transform:translate(-50%,0); opacity:1; visibility:visible;}
.ar_sentinel {height:1px;}

/* ===== 결과 없음 ===== */
.ar_empty {padding:clamp(48px,12vw,80px) 0; text-align:center;}
.ar_empty_t {margin:0; color:#1b1b1b; font-size:clamp(16px,2.8vw,19px); font-weight:700;}
.ar_empty_d {margin:clamp(6px,1.6vw,9px) 0 clamp(18px,4vw,24px); color:#8a8f98; font-size:clamp(13px,2vw,15px); font-weight:300;}

/* ===== 넓은 화면 =====
   날짜 · 글 · 사진을 한 줄에 나란히 — 잡지의 목차처럼 훑게 한다 */
@media (min-width:640px) {
  .ar_cards {grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (min-width:768px) {
  .ar_row_link {display:grid; grid-template-columns:clamp(66px,6vw,92px) minmax(0,1fr) clamp(200px,26%,320px); column-gap:clamp(18px,3vw,40px); align-items:start; padding:clamp(22px,3vw,32px) 0;}
  .ar_date {padding-top:4px;}
  .ar_thumb {order:0;}
}
@media (min-width:1024px) {
  .ar_cards {grid-template-columns:repeat(3, minmax(0, 1fr));}
  .ar_hero {display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); column-gap:clamp(24px,3.4vw,48px); align-items:center;}
  .ar_hero_text {margin-top:0;}
}
@media (prefers-reduced-motion:reduce) {
  .ar_toast {transition:none;}
  .ar_thumb .img_placeholder {transition:none;}
  .ar_row_link:hover .img_placeholder {transform:none;}
}

@media (max-width:767px) {
  .ar_toast {top:60px; padding:12px 16px; max-width:calc(100% - 32px);}
}


/* ============================================================
   아카이브 · 상세 (contents_archive_02view_A/B/C) — av_
   (옮겨 온 파일: 2.0_archive_view.css)
   ============================================================ */

/* ============================================================
   아카이브 · 상세 (archive_02view.html)
   ------------------------------------------------------------
   기록마다 담기는 것이 달라 한 벌로는 감당이 안 된다.
   그래서 작업자가 고를 수 있게 세 가지 짜임을 함께 둔다.

     .av_doc.is_a  글 중심   — 한 칸으로 내려 읽는다
     .av_doc.is_b  좌우 엇갈림 — 사진과 글이 번갈아 놓인다
     .av_doc.is_c  몰입형    — 배경 사진 위에 글을 얹는다

   조각(문단·사진·영상·인용·갤러리)의 이름은 셋이 함께 쓰고,
   놓이는 자리와 크기만 타입마다 달라진다 — 그래야 타입을 갈아도
   본문 마크업을 다시 짜지 않는다.

   · av_ : 아카이브 상세 화면 공용
   ============================================================ */

/* ===== 틀 ===== */
.av_inner {width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(16px,4.4vw,24px); box-sizing:border-box;}
.av_doc {display:block; padding-bottom:clamp(40px,8vw,72px);}
/* display 를 정해 두면 hidden 이 먹지 않는다 — 감출 때는 확실히 감춘다 */
.av_doc[hidden] {display:none;}

/* 사진·영상이 들어갈 자리 — 실제 사진이 붙으면 이 자리표시자는 지운다 */
.av_ph {display:block; width:100%; height:100%; background:#eef0f2 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23aab1ba' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='1.5'/><path d='M21 15l-4.5-4.5L6 21'/></svg>") no-repeat center / clamp(34px,7vw,52px);}

/* ===== 작업자용 전환 줄 =====
   실제 적용 때는 이 줄과 CSS 를 함께 지운다 */
.av_pick {position:sticky; top:0; z-index:30; display:flex; align-items:center; flex-wrap:wrap; gap:clamp(8px,2vw,14px); padding:clamp(9px,2.2vw,12px) clamp(16px,4.4vw,24px); border-bottom:1px solid #e6e6e2; background:#faf9f6;}
.av_pick_l {flex:0 0 auto; color:#8a8f98; font-size:clamp(11px,1.8vw,12.5px); font-weight:600; letter-spacing:0.02em;}
.av_pick_btns {flex:0 0 auto; display:flex; gap:4px;}
.av_pick_b {height:clamp(30px,5.6vw,34px); padding:0 clamp(10px,2.4vw,14px); border:1px solid #dcdcd8; border-radius:999px; background:#ffffff; color:#666666; font-family:inherit; font-size:clamp(12px,1.9vw,13px); font-weight:600; white-space:nowrap; cursor:pointer;}
.av_pick_b:hover {border-color:#b6bac2;}
.av_pick_b.is_on {border-color:#1b43c8; background:#1b43c8; color:#ffffff;}
.av_pick_d {flex:1 1 240px; min-width:0; color:#8a8f98; font-size:clamp(11px,1.8vw,12.5px); font-weight:300; word-break:keep-all;}

/* ===== 조각 — 세 타입이 함께 쓴다 ===== */
.av_meta {display:flex; align-items:center; gap:10px; margin:0;}
.av_cat {display:inline-flex; align-items:center; height:clamp(22px,4.4vw,26px); padding:0 clamp(8px,2vw,11px); border-radius:4px; background:#f2f5ff; color:#1b43c8; font-size:clamp(11px,1.8vw,12.5px); font-weight:600;}
.av_meta time {color:#b6bac2; font-size:clamp(12px,1.9vw,13.5px); font-weight:400; letter-spacing:0.02em;}

.av_title {margin:clamp(12px,3vw,20px) 0 0; color:#1b1b1b; font-size:clamp(26px,5.4vw,48px); font-weight:700; line-height:1.3; letter-spacing:-0.035em; word-break:keep-all;}
.av_lead {margin:clamp(12px,3vw,20px) 0 0; color:#666666; font-size:clamp(15px,2.4vw,19px); font-weight:300; line-height:1.75; word-break:keep-all;}

.av_h {margin:clamp(28px,6vw,46px) 0 clamp(10px,2.4vw,14px); color:#1b1b1b; font-size:clamp(18px,3.2vw,26px); font-weight:700; line-height:1.4; letter-spacing:-0.02em; word-break:keep-all;}
.av_p {margin:0 0 clamp(14px,3vw,20px); color:#333333; font-size:clamp(15px,2.3vw,17px); font-weight:300; line-height:1.9; word-break:keep-all;}
.av_p b {font-weight:700; color:#1b1b1b;}
.av_p:last-child {margin-bottom:0;}

.av_fig {margin:clamp(24px,5.4vw,40px) 0;}
.av_fig .av_ph {aspect-ratio:3 / 2; border-radius:4px; overflow:hidden;}
.av_cap {margin:clamp(8px,2vw,12px) 0 0; color:#8a8f98; font-size:clamp(12px,1.9vw,13.5px); font-weight:300; line-height:1.65; word-break:keep-all;}
.av_cap.is_center {text-align:center;}

.av_video {position:relative; margin:clamp(24px,5.4vw,40px) 0;}
.av_play {display:block; position:relative; width:100%; padding:0; border:0; background:transparent; cursor:pointer;}
.av_play .av_ph {aspect-ratio:16 / 9; border-radius:4px; overflow:hidden;}
.av_play:after {content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:clamp(54px,11vw,74px); height:clamp(54px,11vw,74px); border-radius:50%; background:rgba(20,22,28,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5.6v12.8L19 12z'/%3E%3C/svg%3E") no-repeat 56% 50% / clamp(20px,4.4vw,26px);}
.av_play:hover:after {background-color:rgba(20,22,28,.78);}

.av_quote {margin:clamp(28px,6vw,48px) 0; padding:0 0 0 clamp(14px,3vw,20px); border-left:2px solid #1b1b1b;}
.av_quote p {margin:0; color:#1b1b1b; font-size:clamp(18px,3.2vw,24px); font-weight:600; line-height:1.6; letter-spacing:-0.02em; word-break:keep-all;}
.av_quote cite {display:block; margin-top:clamp(8px,2vw,12px); color:#8a8f98; font-size:clamp(12px,1.9vw,14px); font-style:normal; font-weight:400;}
.av_quote.is_big {padding:0; border:0; text-align:center;}
.av_quote.is_big p {font-size:clamp(22px,4.6vw,40px); font-weight:700; line-height:1.45; letter-spacing:-0.03em;}

.av_gallery {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(6px,1.6vw,10px); margin-top:clamp(24px,5.4vw,40px);}
.av_gallery.is_2 {grid-template-columns:repeat(2, minmax(0, 1fr));}
.av_gallery .av_ph {aspect-ratio:1 / 1; border-radius:4px; overflow:hidden;}

/* ============================================================
   타입 A · 글 중심
   본문은 좁게 두어 한 줄이 눈에 들어오게 하고,
   사진만 필요할 때 본문보다 넓게 뺀다.
   ============================================================ */
.is_a .av_head {max-width:680px; margin:0 auto; padding:clamp(28px,6vw,60px) 0 0;}
.is_a .av_body {max-width:680px; margin:0 auto;}
.is_a .av_body .av_fig {margin-left:0; margin-right:0;}
.is_a .av_fig.is_wide {max-width:1000px; margin-left:auto; margin-right:auto;}
.is_a .av_gallery {max-width:1000px; margin-left:auto; margin-right:auto;}
.is_a .av_cap.is_center {max-width:1000px; margin-left:auto; margin-right:auto;}

/* ============================================================
   타입 B · 좌우 엇갈림
   장면이 여럿인 기록에 맞다. 홀·짝으로 사진 자리가 저절로 뒤집힌다.
   ============================================================ */
.is_b .av_head {padding:clamp(28px,6vw,60px) 0 0;}
.is_b .av_head_l {min-width:0;}
.is_b .av_fig.is_full .av_ph {aspect-ratio:21 / 9;}
.is_b .av_split {margin-top:clamp(34px,7vw,72px);}
.is_b .av_split_img .av_ph {aspect-ratio:4 / 3; border-radius:4px; overflow:hidden;}
.is_b .av_split_img .av_play .av_ph {aspect-ratio:4 / 3;}
.is_b .av_split_txt {margin-top:clamp(14px,3.4vw,20px);}
.is_b .av_num {margin:0; color:#1b43c8; font-size:clamp(13px,2.2vw,15px); font-weight:800; letter-spacing:0.06em;}
.is_b .av_split_txt .av_h {margin-top:clamp(6px,1.6vw,10px);}
.is_b .av_gallery {margin-top:clamp(34px,7vw,72px);}

/* ============================================================
   타입 C · 몰입형
   배경 사진 위에 글을 얹는다. 사진 위 글은 대비가 모자라면 읽히지 않으니
   덮개(그라데이션)를 반드시 깐다.
   ============================================================ */
body.av_dark {background:#0e0f12;}
.is_c {background:#0e0f12; color:#ffffff;}
.is_c .av_title, .is_c .av_h {color:#ffffff;}
.is_c .av_lead, .is_c .av_p {color:#c8ccd3;}
.is_c .av_p b {color:#ffffff;}
.is_c .av_cat {background:rgba(255,255,255,.14); color:#ffffff;}
.is_c .av_meta time {color:rgba(255,255,255,.6);}
.is_c .av_cap {color:rgba(255,255,255,.55);}
.is_c .av_quote {border-color:rgba(255,255,255,.5);}
.is_c .av_quote p {color:#ffffff;}
.is_c .av_quote cite {color:rgba(255,255,255,.55);}
.is_c .av_ph {background-color:#1a1c21; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23484c55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='1.5'/><path d='M21 15l-4.5-4.5L6 21'/></svg>");}

/* 첫 화면 — 사진이 화면을 가득 채우고 글이 아래에 얹힌다 */
.av_cover {position:relative; display:flex; align-items:flex-end; min-height:min(88vh, 760px); overflow:hidden;}
.av_cover > .av_ph {position:absolute; inset:0; height:100%;}
.av_cover:after {content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,9,11,.88) 0%, rgba(8,9,11,.45) 45%, rgba(8,9,11,.15) 100%);}
.av_cover_in {position:relative; z-index:2; width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(16px,4.4vw,24px) clamp(48px,10vw,96px); box-sizing:border-box;}
.av_cover .av_title {max-width:16em; font-size:clamp(30px,7vw,68px); letter-spacing:-0.04em;}
.av_cover .av_lead {color:rgba(255,255,255,.72); font-size:clamp(13px,2.2vw,16px); letter-spacing:0.02em;}
.av_scroll {position:absolute; left:50%; bottom:clamp(14px,3vw,22px); z-index:2; width:1px; height:clamp(28px,6vw,44px); background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.7)); transform:translateX(-50%);}

/* 글만 있는 자리 — 가운데 좁게 */
.av_stage {width:100%; max-width:760px; margin:0 auto; padding:clamp(48px,10vw,110px) clamp(16px,4.4vw,24px); box-sizing:border-box;}
.av_big {margin:0 0 clamp(18px,4vw,30px); color:#ffffff; font-size:clamp(28px,6.4vw,58px); font-weight:700; line-height:1.32; letter-spacing:-0.035em; word-break:keep-all;}
.av_big em {font-style:normal; color:#7ea0ff;}

/* 띠 — 배경 사진 위에 소제목과 글을 얹는다 */
.av_band {position:relative; display:flex; align-items:flex-end; min-height:min(70vh, 620px); overflow:hidden;}
.av_band > .av_ph {position:absolute; inset:0; height:100%;}
.av_band:after {content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,9,11,.9) 0%, rgba(8,9,11,.35) 60%, rgba(8,9,11,.1) 100%);}
.av_band_in {position:relative; z-index:2; width:100%; max-width:760px; margin:0 auto; padding:0 clamp(16px,4.4vw,24px) clamp(36px,8vw,72px); box-sizing:border-box;}
.av_band_in .av_h {margin-top:0;}

.av_video.is_full {margin:0;}
.av_video.is_full .av_play .av_ph {aspect-ratio:16 / 9; border-radius:0;}
.av_video.is_full .av_cap {padding:0 clamp(16px,4.4vw,24px) clamp(8px,2vw,14px);}

/* ===== 아래 줄 — 세 타입이 함께 쓴다 ===== */
/* 아래로 더 갈 곳이 없다는 것이 여백으로도 보이게 — 페이징 밑을 넉넉히 둔다.
   여백은 margin 이 아니라 감싼 칸의 padding 으로 준다 — 문서 끝에서는 아래 margin 이
   바깥으로 빠져나가(마진 겹침) 화면에 남지 않기 때문이다 */
#contents > .av_inner {padding-bottom:clamp(80px,15vw,160px);}
/* 이전·다음은 나란히, 목록으로는 그 아래 한 줄 가득 —
   앞뒤로 옮겨 다니는 것과 목록으로 빠져나가는 것은 성격이 다르다 */
.av_nav {display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"prev next" "list list"; gap:clamp(10px,2.4vw,14px); margin:clamp(30px,7vw,56px) 0 0; padding-top:clamp(20px,4.4vw,30px); border-top:1px solid #eeeeee;}
.av_nav_a.is_prev {grid-area:prev;}
.av_nav_a.is_next {grid-area:next;}
.av_nav_c {grid-area:list;}
.av_nav_a {display:block; padding:clamp(13px,3vw,18px) clamp(14px,3.4vw,20px); border:1px solid #eeeeee; border-radius:8px; color:inherit; text-decoration:none;}
.av_nav_a:hover {border-color:#1b1b1b;}
.av_nav_a[hidden] {display:none;}
.av_nav_l {display:block; color:#b6bac2; font-size:clamp(11px,1.8vw,12.5px); font-weight:500;}
.av_nav_t {display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; margin-top:4px; color:#1b1b1b; font-size:clamp(14px,2.2vw,16px); font-weight:600; word-break:keep-all;}
.av_nav_a.is_prev {text-align:left;}
.av_nav_a.is_next {text-align:right;}
.av_nav_c {display:flex; align-items:center; justify-content:center; height:clamp(46px,8vw,52px); border:1px solid #d7d3cf; border-radius:8px; background:#ffffff; color:#333333; font-size:clamp(14px,2.2vw,16px); font-weight:600; text-decoration:none;}
.av_nav_c:hover {border-color:#1b1b1b;}

/* 알림 한 줄 */
.av_toast {position:fixed; left:50%; top:clamp(64px,15vw,76px); z-index:1500; max-width:calc(100% - 40px); padding:13px 18px; border-radius:12px; background:rgba(27,27,27,.92); box-shadow:0 6px 20px rgba(20,30,60,.18); color:#ffffff; font-size:clamp(13px,2vw,15px); font-weight:500; line-height:1.45; text-align:center; word-break:keep-all; transform:translate(-50%,-10px); opacity:0; visibility:hidden; transition:opacity .2s, transform .2s, visibility .2s; pointer-events:none;}
.av_toast.is_show {transform:translate(-50%,0); opacity:1; visibility:visible;}

/* ===== 넓은 화면 ===== */
@media (min-width:768px) {
  .is_b .av_head.is_split {display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); column-gap:clamp(24px,4vw,60px); align-items:end;}
  .is_b .av_head.is_split .av_lead {margin-top:0; padding-bottom:6px;}

  .is_b .av_split {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(24px,4vw,64px); align-items:center;}
  .is_b .av_split:nth-of-type(even) .av_split_img {order:2;}
  .is_b .av_split_txt {margin-top:0;}

  .av_nav {grid-template-columns:1fr auto 1fr; grid-template-areas:"prev list next"; align-items:center; gap:clamp(12px,2.4vw,20px);}
  .av_nav_c {padding:0 clamp(20px,4vw,32px);}
}
@media (min-width:1024px) {
  .is_b .av_split {column-gap:clamp(40px,5vw,88px);}
}
@media (prefers-reduced-motion:reduce) {
  .av_toast {transition:none;}
}

@media (max-width:767px) {
  .av_toast {top:60px; padding:12px 16px; max-width:calc(100% - 32px);}
}


/* ============================================================
   아카이브 매거진 · 목록과 상세 (contents_archive_03list, 04view_A/B/C) — mg_ · mgv_ · mga_
   (옮겨 온 파일: 2.0_archive_v2.css)
   ============================================================ */

/* ============================================================
   아카이브 v2 · 매거진 (archive_v2_01list / archive_v2_02view_*)
   ------------------------------------------------------------
   읽는 화면이되, 다 읽고 나면 다음 행동으로 이어지는 화면이다.
   글의 성격에 따라 마무리가 다르다 —
   제품 이야기는 사러 가고, 함께하기는 참여·기부로 가고,
   미션은 수행으로 간다.

   · mg_  : 매거진 공용(목록·상세)
   · mgv_ : 상세 본문
   · mga_ : 글 끝의 행동 블록(성격별로 색과 짜임이 다르다)

   색은 기존 화면과 같은 결이다 — 파랑 #1b43c8, 글자 #1b1b1b, 선 #eee.
   행동 블록만 성격별 색을 쓴다: 구매 파랑 / 참여 초록 / 미션 자주.
   글자·여백은 clamp() 로 폭에 따라 함께 자란다.
   ============================================================ */

/* ===== 틀 ===== */
/* 갈래를 바꾸면 목록 길이가 달라진다 — 그때 브라우저가 보던 자리를 붙잡아
   우리가 옮겨 놓은 스크롤을 도로 끌어당기므로 그 동작을 끈다 */
.mg_wrap {padding-bottom:clamp(48px,9vw,80px); background:#ffffff; overflow-anchor:none;}
.mg_inner {width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(16px,4.4vw,24px); box-sizing:border-box;}
.mg_narrow {width:100%; max-width:720px; margin:0 auto; padding:0 clamp(16px,4.4vw,24px); box-sizing:border-box;}

/* 읽어 주는 기기에만 남기는 제목 */
.mg_hide {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap;}

/* 그림 자리 — 실제 이미지가 붙기 전까지 */
.mg_ph {display:block; width:100%; height:100%; border-radius:inherit;
        background:linear-gradient(135deg,#eef1f6 0%,#e4e9f2 52%,#eaedf4 100%);}

/* ============================================================
   1. 목록 — 매거진 표지처럼 연다
   ============================================================ */

/* ----- 머리 ----- */
.mg_head {padding:clamp(22px,5.4vw,38px) 0 clamp(16px,3.6vw,22px);}
.mg_kicker {margin:0 0 clamp(6px,1.6vw,10px); color:#1b43c8; font-size:clamp(11px,1.9vw,13px); font-weight:700; letter-spacing:0.08em;}
.mg_lead {margin:0; color:#1b1b1b; font-size:clamp(20px,3.8vw,32px); font-weight:700; line-height:1.42; letter-spacing:-0.03em; word-break:keep-all;}
.mg_sub {margin:clamp(8px,2vw,12px) 0 0; color:#8a8f98; font-size:clamp(13px,2.1vw,15px); font-weight:400; line-height:1.6; word-break:keep-all;}

/* ----- 지금 참여할 수 있는 것 — 목록 맨 위 띠 ----- */
.mg_now {margin-top:clamp(16px,3.6vw,24px); padding:clamp(14px,3.2vw,20px) clamp(14px,3.4vw,22px);
         border:1px solid #e6e9ef; border-radius:14px; background:#fbfcfe;}
.mg_now_h {display:flex; align-items:center; gap:8px; margin:0 0 clamp(10px,2.4vw,14px);}
.mg_now_t {margin:0; color:#1b1b1b; font-size:clamp(13px,2.1vw,15px); font-weight:700; letter-spacing:-0.02em;}
.mg_now_c {display:inline-flex; align-items:center; height:19px; padding:0 7px; border-radius:10px; background:#1b43c8; color:#ffffff; font-size:11px; font-weight:700;}
.mg_now_list {display:flex; gap:clamp(8px,2vw,12px); margin:0; padding:0 0 2px; list-style:none; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.mg_now_list::-webkit-scrollbar {display:none;}
.mg_now_i {flex:0 0 auto; width:clamp(210px,54vw,268px);}
.mg_now_a {display:flex; align-items:center; gap:clamp(10px,2.4vw,13px); height:100%; padding:clamp(10px,2.4vw,13px);
           border:1px solid #eceef3; border-radius:12px; background:#ffffff; text-decoration:none;}
.mg_now_a:hover {border-color:#c9d4f2;}
.mg_now_th {flex:0 0 auto; width:clamp(44px,10vw,52px); height:clamp(44px,10vw,52px); border-radius:10px; overflow:hidden;}
.mg_now_x {min-width:0;}
.mg_now_n {display:block; color:#1b1b1b; font-size:clamp(13px,2.1vw,14.5px); font-weight:700; letter-spacing:-0.02em;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mg_now_d {display:block; margin-top:3px; color:#8a8f98; font-size:clamp(11px,1.9vw,12.5px); font-weight:400;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ----- 갈래 ----- */
/* 갈래 줄 — 스크롤해도 화면 위에 남는다. 목록을 내려 보다가도 갈래를 바꿀 수 있게 */
.mg_bar {position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:clamp(10px,2.6vw,18px);
         margin-top:clamp(18px,4vw,28px); padding-top:clamp(10px,2.4vw,14px); padding-bottom:clamp(10px,2.4vw,14px);
         border-bottom:1px solid #eeeeee; background:#ffffff;}
.mg_tabs {flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:clamp(14px,3.4vw,24px); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.mg_tabs::-webkit-scrollbar {display:none;}
.mg_tab {flex:0 0 auto; padding:0; border:0; background:transparent; color:#aaaaaa; font-family:inherit;
         font-size:clamp(14px,2.3vw,16px); font-weight:400; white-space:nowrap; cursor:pointer;}
.mg_tab:hover {color:#666666;}
.mg_tab.is_on {color:#1b1b1b; font-weight:700;}

/* ----- 대표 글 — 이번 호 표지처럼, 사진 위에 글을 얹는다 -----
   사진이 어떤 것이 오든 글이 읽혀야 해서 아래쪽에 어두운 층을 깐다.
   사진이 아직 없는 글도 같은 층 덕분에 글자가 뜨지 않는다. */
.mg_cover {position:relative; display:block; margin-top:clamp(18px,4vw,28px);
           border-radius:16px; overflow:hidden; text-decoration:none; background:#dfe3ec;}
.mg_cover_th {display:block; width:100%; aspect-ratio:16/9; max-height:clamp(260px,40vw,460px); border-radius:0;}
.mg_cover_sh {position:absolute; inset:0; pointer-events:none;
              background:linear-gradient(to top, rgba(14,17,24,0.82) 0%, rgba(14,17,24,0.62) 26%, rgba(14,17,24,0.18) 56%, rgba(14,17,24,0) 76%);}
.mg_cover_x {position:absolute; left:0; right:0; bottom:0; display:block;
             padding:clamp(18px,3.6vw,32px) clamp(18px,3.6vw,34px) clamp(18px,3.4vw,30px);}
.mg_cover_t {display:block; margin-top:clamp(8px,1.8vw,12px); color:#ffffff;
             font-size:clamp(20px,3.6vw,32px); font-weight:700; line-height:1.34; letter-spacing:-0.03em; word-break:keep-all;
             text-shadow:0 1px 12px rgba(10,12,18,0.34);}
/* 표지에서는 요약이 길어도 두 줄까지만 — 그보다 길면 사진을 다 덮는다 */
.mg_cover_s {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
             margin-top:clamp(6px,1.6vw,10px); color:rgba(255,255,255,0.84);
             font-size:clamp(13px,2.2vw,16px); font-weight:400; line-height:1.65; word-break:keep-all;
             text-shadow:0 1px 10px rgba(10,12,18,0.3);}
.mg_cover:hover .mg_cover_t {text-decoration:underline; text-underline-offset:4px;}
/* 사진 위에서도 읽히도록 배지·날짜를 바꿔 입힌다. 성격을 알리는 점 색만 그대로 남긴다 */
.mg_cover .mg_cat {background:rgba(255,255,255,0.2); color:#ffffff;}
.mg_cover .mg_date {color:rgba(255,255,255,0.72);}
.mg_cover .mg_act {background:rgba(255,255,255,0.2); color:#ffffff;}
.mg_cover .mg_act.is_buy::before {background:#9db6ff;}
.mg_cover .mg_act.is_join::before {background:#7ad3a6;}
.mg_cover .mg_act.is_mission::before {background:#c7a8f0;}

/* ----- 글 배지 · 날짜 ----- */
.mg_meta {display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.mg_cat {display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:11px;
         background:#f2f4f6; color:#666666; font-size:clamp(11px,1.9vw,12px); font-weight:600; white-space:nowrap;}
.mg_date {color:#b6bac2; font-size:clamp(11px,1.9vw,12.5px); font-weight:400; font-variant-numeric:tabular-nums;}

/* 성격 표시 — 이 글이 어디로 이어지는지 미리 알린다 */
.mg_act {display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 9px; border-radius:11px;
         font-size:clamp(11px,1.9vw,12px); font-weight:700; white-space:nowrap;}
.mg_act::before {content:''; width:5px; height:5px; border-radius:50%; background:currentColor;}
.mg_act.is_buy {background:#eef2fd; color:#1b43c8;}
.mg_act.is_join {background:#eaf5ef; color:#1f7a4d;}
.mg_act.is_mission {background:#f3eefb; color:#6b3fa0;}

/* ----- 목록 ----- */
.mg_grid {display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3.4vw,32px) clamp(16px,2.6vw,28px);
          margin:clamp(24px,5vw,40px) 0 0; padding:0; list-style:none;}
.mg_item {min-width:0;}
.mg_a {display:block; text-decoration:none;}
.mg_th {display:block; width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden;}
.mg_x {display:block; padding-top:clamp(10px,2.4vw,14px);}
.mg_t {display:block; margin-top:clamp(6px,1.6vw,9px); color:#1b1b1b;
       font-size:clamp(15px,2.4vw,18px); font-weight:700; line-height:1.45; letter-spacing:-0.02em; word-break:keep-all;}
.mg_s {display:block; margin-top:6px; color:#8a8f98; font-size:clamp(12px,2vw,14px); font-weight:400; line-height:1.6; word-break:keep-all;}
.mg_a:hover .mg_t {text-decoration:underline; text-underline-offset:3px;}

/* ----- 결과 없음 · 더 보기 · 알림 ----- */
.mg_empty {padding:clamp(48px,12vw,88px) 0; text-align:center;}
.mg_empty_t {margin:0; color:#1b1b1b; font-size:clamp(15px,2.6vw,18px); font-weight:700;}
.mg_empty_d {margin:8px 0 clamp(16px,3.4vw,20px); color:#8a8f98; font-size:clamp(13px,2.1vw,14px); font-weight:400;}
.mg_more {margin-top:clamp(28px,5.4vw,44px); text-align:center;}
.btn_mg_more {min-width:clamp(140px,38vw,180px); height:clamp(44px,9vw,50px); padding:0 20px;
              border:1px solid #dcdfe5; border-radius:25px; background:#ffffff; color:#1b1b1b;
              font-family:inherit; font-size:clamp(13px,2.1vw,14.5px); font-weight:600; cursor:pointer;}
.btn_mg_more:hover {border-color:#1b1b1b;}
.mg_sentinel {height:1px;}
.mg_toast {position:fixed; left:50%; bottom:clamp(20px,6vw,32px); z-index:60; transform:translate(-50%,10px);
           max-width:calc(100% - 32px); padding:11px 18px; border-radius:22px; background:rgba(27,27,27,0.92); color:#ffffff;
           font-size:clamp(12px,2vw,13.5px); font-weight:500; white-space:nowrap; opacity:0; visibility:hidden;
           transition:opacity .2s ease, transform .2s ease, visibility .2s;}
.mg_toast.is_show {opacity:1; visibility:visible; transform:translate(-50%,0);}

/* ============================================================
   2. 상세 — 읽는 자리
   ============================================================ */

/* 읽은 만큼 차오르는 줄 */
.mgv_prog {position:fixed; top:0; left:0; z-index:70; width:100%; height:3px; background:transparent; pointer-events:none;}
.mgv_prog_b {display:block; width:0; height:100%; background:#1b43c8; transition:width .1s linear;}

/* ----- 커버 ----- */
.mgv_cover {position:relative; width:100%; aspect-ratio:16/9; max-height:60vh; overflow:hidden; background:#eef1f6;}
.mgv_cover .mg_ph {height:100%; border-radius:0;}
.mgv_head {padding:clamp(24px,5.4vw,40px) 0 clamp(18px,4vw,26px);}
.mgv_meta {display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 clamp(10px,2.4vw,14px);}
.mgv_title {margin:0; color:#1b1b1b; font-size:clamp(24px,4.6vw,40px); font-weight:700; line-height:1.34; letter-spacing:-0.035em; word-break:keep-all;}
.mgv_lead {margin:clamp(12px,2.8vw,18px) 0 0; color:#666666; font-size:clamp(15px,2.4vw,18px); font-weight:400; line-height:1.7; word-break:keep-all;}
.mgv_byline {display:flex; align-items:center; gap:8px; margin:clamp(16px,3.4vw,22px) 0 0; padding-top:clamp(14px,3vw,18px); border-top:1px solid #eeeeee;
             color:#8a8f98; font-size:clamp(12px,2vw,13px); font-weight:400;}
.mgv_read {display:inline-flex; align-items:center; gap:4px;}
.mgv_read::before {content:''; width:3px; height:3px; border-radius:50%; background:#d5d8de;}

/* ----- 본문 ----- */
.mgv_body {padding-bottom:clamp(30px,6vw,48px);}
.mgv_p {margin:0 0 clamp(16px,3.2vw,22px); color:#333333; font-size:clamp(15px,2.4vw,17px); font-weight:400; line-height:1.85; letter-spacing:-0.01em; word-break:keep-all;}
.mgv_p b {font-weight:700; color:#1b1b1b;}
.mgv_h {margin:clamp(30px,6vw,46px) 0 clamp(12px,2.6vw,16px); color:#1b1b1b; font-size:clamp(18px,3vw,23px); font-weight:700; line-height:1.45; letter-spacing:-0.03em; word-break:keep-all;}
.mgv_fig {margin:clamp(24px,5vw,36px) 0;}
.mgv_fig .mg_ph {aspect-ratio:3/2; border-radius:12px;}
.mgv_cap {margin:clamp(8px,1.8vw,11px) 0 0; color:#a0a4ac; font-size:clamp(11px,1.9vw,12.5px); font-weight:400; line-height:1.6; word-break:keep-all;}
.mgv_quote {margin:clamp(28px,5.4vw,40px) 0; padding:0 0 0 clamp(14px,3vw,20px); border-left:3px solid #1b43c8;}
.mgv_quote p {margin:0; color:#1b1b1b; font-size:clamp(17px,2.9vw,22px); font-weight:700; line-height:1.6; letter-spacing:-0.03em; word-break:keep-all;}
.mgv_quote cite {display:block; margin-top:clamp(8px,1.8vw,11px); color:#8a8f98; font-size:clamp(12px,2vw,13px); font-style:normal; font-weight:400;}

/* 숫자를 세우는 자리 */
.mgv_stats {display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:clamp(24px,5vw,36px) 0;
            border:1px solid #eceef3; border-radius:14px; background:#eceef3; overflow:hidden;}
.mgv_stat {padding:clamp(16px,3.4vw,22px) clamp(10px,2.4vw,14px); background:#ffffff; text-align:center;}
.mgv_stat_n {display:block; color:#1b43c8; font-size:clamp(20px,3.8vw,28px); font-weight:700; letter-spacing:-0.03em; font-variant-numeric:tabular-nums;}
.mgv_stat_l {display:block; margin-top:5px; color:#8a8f98; font-size:clamp(11px,1.9vw,12.5px); font-weight:400; word-break:keep-all;}

/* ============================================================
   3. 글 끝의 행동 블록 — 성격에 따라 다르다
   ============================================================ */
.mga {margin-top:clamp(30px,6vw,48px); padding:clamp(20px,4.4vw,32px) clamp(18px,4vw,28px);
      border-radius:18px; box-sizing:border-box;}
.mga_k {margin:0 0 clamp(6px,1.6vw,9px); font-size:clamp(11px,1.9vw,12.5px); font-weight:700; letter-spacing:0.06em;}
.mga_t {margin:0; color:#1b1b1b; font-size:clamp(18px,3.2vw,25px); font-weight:700; line-height:1.42; letter-spacing:-0.03em; word-break:keep-all;}
.mga_d {margin:clamp(8px,2vw,12px) 0 0; color:#666666; font-size:clamp(13px,2.1vw,15px); font-weight:400; line-height:1.7; word-break:keep-all;}

.mga.is_buy {background:#f5f8ff; border:1px solid #dde5fa;}
.mga.is_buy .mga_k {color:#1b43c8;}
.mga.is_join {background:#f3faf6; border:1px solid #d9ece2;}
.mga.is_join .mga_k {color:#1f7a4d;}
.mga.is_mission {background:#f8f5fd; border:1px solid #e6dcf5;}
.mga.is_mission .mga_k {color:#6b3fa0;}

/* 버튼 */
.mga_btns {display:flex; gap:clamp(8px,2vw,10px); margin-top:clamp(16px,3.4vw,22px);}
.btn_mga {flex:1 1 0; min-width:0; height:clamp(50px,10vw,56px); padding:0 clamp(12px,3vw,18px);
          display:inline-flex; align-items:center; justify-content:center; gap:6px;
          border:0; border-radius:12px; font-family:inherit; font-size:clamp(14px,2.3vw,16px); font-weight:700;
          letter-spacing:-0.02em; white-space:nowrap; cursor:pointer; text-decoration:none;}
.btn_mga.is_key {color:#ffffff;}
.mga.is_buy .btn_mga.is_key {background:#1b43c8;}
.mga.is_buy .btn_mga.is_key:hover {background:#12309a;}
.mga.is_join .btn_mga.is_key {background:#1f7a4d;}
.mga.is_join .btn_mga.is_key:hover {background:#18613d;}
.mga.is_mission .btn_mga.is_key {background:#6b3fa0;}
.mga.is_mission .btn_mga.is_key:hover {background:#563180;}
.btn_mga.is_ghost {background:#ffffff; color:#1b1b1b; border:1px solid #dcdfe5;}
.btn_mga.is_ghost:hover {border-color:#1b1b1b;}
.btn_mga[disabled] {background:#e9ebef; color:#a0a4ac; cursor:default;}

/* ----- 구매: 이 글에 나온 제품 ----- */
.mga_prods {display:flex; flex-direction:column; gap:clamp(8px,2vw,10px); margin-top:clamp(16px,3.4vw,22px);}
.mga_prod {display:flex; align-items:center; gap:clamp(11px,2.6vw,14px); padding:clamp(11px,2.6vw,14px);
           border:1px solid #e4e9f5; border-radius:12px; background:#ffffff; text-decoration:none;}
.mga_prod:hover {border-color:#1b43c8;}
.mga_prod_th {flex:0 0 auto; width:clamp(56px,13vw,66px); height:clamp(56px,13vw,66px); border-radius:10px; overflow:hidden;}
.mga_prod_x {flex:1 1 auto; min-width:0;}
.mga_prod_n {display:block; color:#1b1b1b; font-size:clamp(13px,2.2vw,15px); font-weight:700; letter-spacing:-0.02em;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mga_prod_c {display:block; margin-top:3px; color:#8a8f98; font-size:clamp(11px,1.9vw,12.5px); font-weight:400;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mga_prod_p {display:flex; align-items:baseline; gap:6px; margin-top:6px;}
.mga_prod_now {color:#1b1b1b; font-size:clamp(14px,2.3vw,16px); font-weight:700; font-variant-numeric:tabular-nums;}
.mga_prod_was {color:#c0c4cc; font-size:clamp(11px,1.9vw,12.5px); font-weight:400; text-decoration:line-through;}
.mga_prod_off {color:#d8434e; font-size:clamp(11px,1.9vw,12.5px); font-weight:700;}
.mga_prod_go {flex:0 0 auto; color:#b6bac2; font-size:18px; line-height:1;}

/* 혜택 한 줄 */
.mga_gift {display:flex; align-items:center; gap:clamp(9px,2.2vw,12px); margin-top:clamp(14px,3vw,18px);
           padding:clamp(12px,2.8vw,15px) clamp(13px,3vw,16px); border-radius:12px; background:#ffffff; border:1px dashed #b9c8ee;}
.mga_gift_i {flex:0 0 auto; width:clamp(30px,7vw,36px); height:clamp(30px,7vw,36px); display:inline-flex; align-items:center; justify-content:center;
             border-radius:50%; background:#eef2fd; color:#1b43c8;}
.mga_gift_x {flex:1 1 auto; min-width:0;}
.mga_gift_t {display:block; color:#1b1b1b; font-size:clamp(13px,2.1vw,14.5px); font-weight:700; letter-spacing:-0.02em; word-break:keep-all;}
.mga_gift_d {display:block; margin-top:3px; color:#8a8f98; font-size:clamp(11px,1.9vw,12.5px); font-weight:400; word-break:keep-all;}
.btn_mga_gift {flex:0 0 auto; height:34px; padding:0 13px; border:1px solid #1b43c8; border-radius:17px;
               background:#ffffff; color:#1b43c8; font-family:inherit; font-size:clamp(12px,2vw,13px); font-weight:700; white-space:nowrap; cursor:pointer;}
.btn_mga_gift:hover {background:#1b43c8; color:#ffffff;}
.btn_mga_gift.is_got {border-color:#dcdfe5; background:#f4f5f7; color:#a0a4ac; cursor:default;}

/* ----- 참여·기부: 얼마나 모였는지 ----- */
.mga_bar {margin-top:clamp(16px,3.4vw,22px); padding:clamp(14px,3.2vw,19px) clamp(14px,3.2vw,18px);
          border-radius:14px; background:#ffffff; border:1px solid #dcece4;}
.mga_bar_h {display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.mga_bar_n {color:#1f7a4d; font-size:clamp(19px,3.4vw,26px); font-weight:700; letter-spacing:-0.03em; font-variant-numeric:tabular-nums;}
.mga_bar_g {color:#8a8f98; font-size:clamp(11px,1.9vw,13px); font-weight:400; font-variant-numeric:tabular-nums;}
.mga_bar_t {margin-top:clamp(9px,2.2vw,12px); height:8px; border-radius:4px; background:#eaf0ed; overflow:hidden;}
.mga_bar_f {display:block; height:100%; border-radius:4px; background:#1f7a4d; transition:width .5s ease;}
.mga_bar_d {margin:clamp(8px,2vw,11px) 0 0; color:#8a8f98; font-size:clamp(11px,1.9vw,12.5px); font-weight:400; word-break:keep-all;}

/* 기부 금액 고르기 */
.mga_amts {display:flex; gap:6px; margin-top:clamp(12px,2.8vw,16px); flex-wrap:wrap;}
.btn_mga_amt {flex:1 1 0; min-width:72px; height:clamp(42px,8.6vw,48px); padding:0 8px; border:1px solid #dcece4; border-radius:10px;
              background:#ffffff; color:#1b1b1b; font-family:inherit; font-size:clamp(13px,2.1vw,14.5px); font-weight:600;
              font-variant-numeric:tabular-nums; white-space:nowrap; cursor:pointer;}
.btn_mga_amt:hover {border-color:#1f7a4d;}
.btn_mga_amt.is_on {border-color:#1f7a4d; background:#1f7a4d; color:#ffffff; font-weight:700;}

/* ----- 미션: 무엇을 하면 되는지 ----- */
.mga_steps {margin:clamp(16px,3.4vw,22px) 0 0; padding:0; list-style:none; counter-reset:mgstep;}
.mga_step {position:relative; display:flex; align-items:flex-start; gap:clamp(11px,2.6vw,14px);
           padding:clamp(12px,2.8vw,15px) clamp(13px,3vw,16px); border-radius:12px; background:#ffffff; border:1px solid #e8dff7;}
.mga_step + .mga_step {margin-top:8px;}
.mga_step_n {flex:0 0 auto; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
             border-radius:50%; background:#f0e8fb; color:#6b3fa0; font-size:12px; font-weight:700; counter-increment:mgstep;}
.mga_step_n::before {content:counter(mgstep);}
.mga_step_x {flex:1 1 auto; min-width:0;}
.mga_step_t {display:block; color:#1b1b1b; font-size:clamp(13px,2.2vw,15px); font-weight:700; letter-spacing:-0.02em; word-break:keep-all;}
.mga_step_d {display:block; margin-top:4px; color:#8a8f98; font-size:clamp(11px,1.9vw,13px); font-weight:400; line-height:1.6; word-break:keep-all;}
.mga_step.is_done {background:#faf7ff; border-color:#ddd0f2;}
.mga_step.is_done .mga_step_n {background:#6b3fa0; color:#ffffff;}
.mga_step.is_done .mga_step_n::before {content:'✓'; font-size:13px;}
.mga_step.is_done .mga_step_t {color:#8a8f98; text-decoration:line-through;}

/* 남은 기간 */
.mga_when {display:inline-flex; align-items:center; gap:6px; margin-top:clamp(12px,2.8vw,16px);
           padding:7px 12px; border-radius:16px; background:#ffffff; border:1px solid #e8dff7;
           color:#6b3fa0; font-size:clamp(11px,1.9vw,12.5px); font-weight:700; font-variant-numeric:tabular-nums;}

/* ----- 함께 읽기 ----- */
.mgv_rel {margin-top:clamp(40px,8vw,64px); padding-top:clamp(24px,5vw,36px); border-top:1px solid #eeeeee;}
.mgv_rel_h {margin:0 0 clamp(14px,3.2vw,20px); color:#1b1b1b; font-size:clamp(15px,2.5vw,18px); font-weight:700; letter-spacing:-0.02em;}
.mgv_rel_l {display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.6vw,22px); margin:0; padding:0; list-style:none;}

/* ----- 이전·다음 ----- */
.mgv_nav {display:flex; align-items:stretch; gap:clamp(8px,2vw,12px); margin-top:clamp(30px,6vw,48px);
          padding-top:clamp(20px,4.4vw,28px); border-top:1px solid #eeeeee;}
.mgv_nav_a {flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:5px;
            padding:clamp(13px,3vw,17px) clamp(13px,3vw,16px); border:1px solid #eceef3; border-radius:12px; text-decoration:none;}
.mgv_nav_a:hover {border-color:#1b1b1b;}
.mgv_nav_a.is_next {text-align:right;}
.mgv_nav_l {color:#b6bac2; font-size:clamp(11px,1.9vw,12px); font-weight:600;}
.mgv_nav_t {color:#1b1b1b; font-size:clamp(13px,2.1vw,14.5px); font-weight:700; letter-spacing:-0.02em;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mgv_nav_c {flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:clamp(84px,20vw,104px);
            padding:0 14px; border:1px solid #eceef3; border-radius:12px; color:#666666;
            font-size:clamp(12px,2vw,13.5px); font-weight:600; text-decoration:none;}
.mgv_nav_c:hover {border-color:#1b1b1b; color:#1b1b1b;}

/* -------------------- tablet -------------------- */
@media all and (max-width:1024px) {
    .mg_grid {grid-template-columns:repeat(2,1fr);}
    .mgv_rel_l {grid-template-columns:repeat(2,1fr);}
}

/* -------------------- mobile -------------------- */
@media all and (max-width:767px) {
    .mg_grid {grid-template-columns:1fr; gap:clamp(18px,5vw,24px);}
    .mgv_rel_l {grid-template-columns:1fr;}
    .mgv_cover {aspect-ratio:4/3; max-height:none;}
    .mgv_stats {grid-template-columns:1fr;}
    .mga_btns {flex-direction:column;}
    .btn_mga {width:100%;}
    .mgv_nav {flex-wrap:wrap;}
    .mgv_nav_c {order:3; width:100%; height:44px;}
    /* 한 줄에 사진과 글을 나란히 — 좁을 때는 옆으로 붙인다 */
    .mg_a {display:flex; align-items:flex-start; gap:14px;}
    .mg_th {flex:0 0 auto; width:112px; aspect-ratio:1/1;}
    .mg_x {flex:1 1 auto; min-width:0; padding-top:2px;}
    .mg_cover_th {aspect-ratio:4/3; max-height:none;}
    .mg_cover_x {padding:clamp(16px,4.4vw,20px);}
}


/* ============================================================
   about (contents_about) — ab_
   ------------------------------------------------------------
   브랜드를 말하는 화면이라 다른 콘텐츠 화면과 결이 다르다 —
   검은 바탕에 큰 글자를 세우고, 스크롤이 곧 이야기의 진행이 된다.
   화면을 넘기는 장치는 세 가지뿐이다.
   · 붙여 두고(sticky) 그 안에서 단계만 바꾼다 — 피부·연구·농장
   · 숫자는 시간이 흐르는 대로 센다 — 연구소 인정일부터
   · 제품은 눌러서 분해하고 다시 합친다
   글과 숫자는 상태 JSON 한 곳에 두고 화면은 거기서 읽어 그린다.
   ============================================================ */

/* 옆으로 넘치는 것만 자른다 — overflow-x:hidden 을 쓰면 세로축이 auto 로 바뀌어
   이 안의 position:sticky 가 화면에 붙지 않는다(clip 은 그런 일이 없다) */
.ab_wrap {background:#070707; color:#ffffff; overflow-x:clip;}
.ab_wrap * {box-sizing:border-box;}
.ab_eyebrow {display:block; font-size:10px; font-weight:700; letter-spacing:0.22em;}
.ab_hide {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap;}
.ab_ph {display:block; width:100%; height:100%;
        background:#131417 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23555b66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='1.5'/><path d='M21 15l-4.5-4.5L6 21'/></svg>") no-repeat center / clamp(34px,7vw,46px);}
.ab_sticky {position:sticky; top:0; height:100svh; overflow:hidden;}

/* 01 선언 */
/* 첫 화면은 머리(배너+로고 줄)를 뺀 만큼만 차지한다 — 그러지 않으면 큰 글자가 첫눈에 잘린다.
   머리 높이는 화면이 켜질 때 재서 --ab-top 에 넣는다 */
.ab_hero {position:relative; height:calc(100svh - var(--ab-top, 0px)); min-height:520px; overflow:hidden;}
.ab_hero_s {position:absolute; inset:0; opacity:0; background-size:cover; background-position:center; animation:ab_loop 12s infinite;}
.ab_hero_s:nth-child(1) {background:radial-gradient(circle at 73% 27%,rgba(223,240,202,.32),transparent 18%),linear-gradient(150deg,#acb5a4 0 23%,#53644e 23% 49%,#19291d 49% 68%,#7c8d78 68%);}
.ab_hero_s:nth-child(2) {animation-delay:4s; background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(255,255,255,.08) 120px),linear-gradient(125deg,#030303,#1b315d 48%,#d8dcd7);}
.ab_hero_s:nth-child(3) {animation-delay:8s; background:radial-gradient(circle at 64% 55%,#315bea 0 7%,transparent 8%),linear-gradient(140deg,#e4e3dc,#747474 48%,#101010 49%);}
@keyframes ab_loop {0% {opacity:0; transform:scale(1.04);} 5%,28% {opacity:1;} 34%,100% {opacity:0; transform:scale(1);}}
.ab_hero_idx {position:absolute; z-index:5; left:5vw; top:clamp(18px,4vw,34px); display:flex; gap:5px;}
.ab_hero_idx i {width:34px; height:2px; background:rgba(255,255,255,.3); overflow:hidden;}
.ab_hero_idx i:after {content:''; display:block; height:100%; background:#ffffff; transform-origin:left; animation:ab_bar 12s infinite;}
.ab_hero_idx i:nth-child(2):after {animation-delay:4s;}
.ab_hero_idx i:nth-child(3):after {animation-delay:8s;}
@keyframes ab_bar {0% {transform:scaleX(0);} 31% {transform:scaleX(1);} 32%,100% {transform:scaleX(0);}}
.ab_hero_x {position:absolute; z-index:3; left:5vw; right:5vw; bottom:8vh;}
.ab_display {margin:18px 0 24px; font-size:clamp(3.4rem,13vw,13rem); line-height:0.78; letter-spacing:-0.085em;}
.ab_hero_d {margin:0; font-size:13px; letter-spacing:0.06em; color:#e4e4e4;}

/* 02 믿음 */
.ab_belief {min-height:100svh; padding:12vh 5vw; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.ab_quote {margin:7vh 0 4vh; font-size:clamp(1.9rem,6.4vw,7.2rem); line-height:1.06; letter-spacing:-0.06em; word-break:keep-all;}
.ab_quote b {font-weight:700;}
.ab_by {margin:0; font-size:9px; letter-spacing:0.18em; color:#aaaaaa;}

/* 03 한 사람의 피부에서 데이터로 — 세 단계 */
.ab_skin {height:300svh;}
.ab_skin .ab_sticky {background:#090909;}
.ab_sec_h {position:absolute; z-index:8; left:5vw; right:5vw; top:10vh;}
.ab_sec_t {margin:16px 0 0; font-size:clamp(2.4rem,8vw,9rem); line-height:0.82; letter-spacing:-0.08em;}
.ab_founder {position:absolute; left:5vw; right:55vw; top:32vh; height:56vh; overflow:hidden; border:1px solid #333333; transition:opacity .7s ease, transform .7s ease;}
.ab_actual {position:absolute; left:14px; bottom:14px; padding:7px 9px; border:1px solid rgba(255,255,255,.55); background:rgba(0,0,0,.45); font-size:7px; letter-spacing:0.14em;}
.ab_story {position:absolute; right:5vw; top:33vh; width:42vw; max-width:650px; transition:opacity .7s ease, transform .7s ease;}
.ab_story small {font-size:8px; letter-spacing:0.2em; color:#888888;}
.ab_story p {margin:13px 0; font-size:clamp(.78rem,1vw,1rem); line-height:1.75; color:#d1d1d1; word-break:keep-all;}
.ab_story b {font-size:9px; letter-spacing:0.04em;}
.ab_mosaic {position:absolute; inset:0; background:#080808; opacity:0; transform:scale(.9); transition:opacity .9s ease, transform .9s ease;}
.ab_tile {position:absolute; width:16vw; height:21vh; min-width:120px; box-shadow:0 20px 60px #000000; filter:saturate(.52);
          background:radial-gradient(circle at 50% 44%,#b58973 0 12%,#765247 29%,#302624 57%,#090909 75%);}
.ab_tile span {position:absolute; left:8px; bottom:8px; font-size:7px; letter-spacing:0.12em;}
.ab_tile:nth-child(1) {left:7%; top:18%;}
.ab_tile:nth-child(2) {left:31%; top:10%; width:12vw; height:16vh;}
.ab_tile:nth-child(3) {right:10%; top:15%; width:18vw; height:24vh;}
.ab_tile:nth-child(4) {left:18%; top:56%; width:13vw; height:18vh;}
.ab_tile:nth-child(5) {left:43%; top:43%; width:20vw; height:26vh;}
.ab_tile:nth-child(6) {right:7%; top:62%; width:12vw; height:17vh;}
.ab_tile:nth-child(7) {left:5%; bottom:5%; width:10vw; height:14vh;}
.ab_tile:nth-child(8) {right:31%; bottom:4%; width:14vw; height:19vh;}
.ab_total {position:absolute; z-index:7; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
           text-align:center; padding:0 5vw; background:rgba(5,5,5,.75); backdrop-filter:blur(8px); opacity:0; transition:opacity .8s ease;}
.ab_total small {font-size:9px; letter-spacing:0.22em;}
.ab_total strong {margin:4vh 0; font-size:clamp(5rem,22vw,22rem); line-height:0.8; letter-spacing:-0.1em; font-variant-numeric:tabular-nums;}
.ab_total p {margin:0; font-size:12px; line-height:1.7; word-break:keep-all;}
.ab_skin.step_1 .ab_founder, .ab_skin.step_2 .ab_founder,
.ab_skin.step_1 .ab_story, .ab_skin.step_2 .ab_story {opacity:0; transform:scale(1.04);}
.ab_skin.step_1 .ab_mosaic, .ab_skin.step_2 .ab_mosaic {opacity:1; transform:scale(1);}
.ab_skin.step_2 .ab_total {opacity:1;}
.ab_dots {position:absolute; z-index:10; left:5vw; bottom:5vh; display:flex; gap:7px;}
.ab_dots i {width:42px; height:2px; background:#444444;}
.ab_dots i.is_on {background:#ffffff;}

/* 04 가장 먼저 만든 것 */
.ab_built {min-height:100svh; padding:13vh 5vw; background:#1547ff; display:flex; flex-direction:column; justify-content:center;}
.ab_built .ab_sec_t {margin:3vh 0 6vh; font-size:clamp(2.8rem,11vw,12rem); line-height:0.8;}
.ab_pair {display:flex; align-items:center; gap:2vw; padding:24px 0; border-top:1px solid rgba(255,255,255,.55); border-bottom:1px solid rgba(255,255,255,.55);}
.ab_pair b {font-size:clamp(1.3rem,4vw,4.5rem); letter-spacing:-0.05em;}
.ab_pair i {font-style:normal; font-size:2rem;}
.ab_built p {max-width:680px; margin:28px 0 0; font-size:12px; line-height:1.8; word-break:keep-all;}

/* 05 멈추지 않는 연구 — 시간은 실제로 흐른다 */
.ab_research {height:320svh; background:#f0efe9; color:#080808;}
.ab_research .ab_sec_t {font-size:clamp(2.2rem,7.4vw,8rem);}
.ab_clock {position:absolute; left:5vw; bottom:9vh; width:49vw;}
.ab_clock_h {display:flex; align-items:center; justify-content:space-between; gap:12px;}
.ab_clock_h small {font-size:9px; letter-spacing:0.18em;}
.ab_clock_h em {font-style:normal; font-size:9px; color:#666666;}
.ab_clock_v {display:grid; grid-template-columns:1.6fr 1fr 1fr; margin:14px 0; border-top:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa;}
.ab_clock_v span {padding:16px 12px; border-right:1px solid #aaaaaa;}
.ab_clock_v span:first-child {padding-left:0;}
.ab_clock_v span:last-child {border-right:0;}
.ab_clock_v b {display:block; font-size:clamp(1.7rem,4vw,4.8rem); line-height:1; letter-spacing:-0.07em; font-variant-numeric:tabular-nums;}
.ab_clock_v i {display:block; margin-top:8px; font-style:normal; font-size:7px; letter-spacing:0.15em;}
.ab_clock p {margin:0; font-size:10px; line-height:1.6;}
.ab_time {position:absolute; right:6vw; top:20vh; width:min(38vw,560px); padding-left:28px;}
.ab_time:before {content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:#aaaaaa;}
.ab_time_bar {position:absolute; left:-1px; top:0; width:3px; height:20%; background:#1547ff; transition:height .5s ease;}
.ab_time_row {height:14vh; display:grid; grid-template-columns:38px 1fr 1.2fr; align-items:center; border-top:1px solid #c7c5bd; opacity:.18; transition:opacity .5s ease;}
.ab_time_row.is_on {opacity:1;}
.ab_time_row i {font-style:normal; font-size:9px;}
.ab_time_row b {font-size:clamp(.95rem,1.8vw,1.8rem);}
.ab_time_row span {font-size:10px;}

/* 06 심기 전에 보낸 4년 */
.ab_farm {height:330svh; background:#061006;}
.ab_sky {position:absolute; inset:0 0 38%; background:linear-gradient(#91a9b5,#e6c79a); transition:1s ease;}
.ab_land {position:absolute; inset:62% 0 0; background:repeating-linear-gradient(98deg,#1e1a10 0 7vw,#2c2517 7vw 12vw); transition:1s ease;}
.ab_soil {position:absolute; inset:66% 0 0; opacity:0; transition:opacity .8s ease;
          background-image:radial-gradient(#bde970 1px,transparent 2px); background-size:70px 55px;}
.ab_farm_x {position:absolute; left:5vw; right:5vw; top:12vh;}
.ab_farm_x .ab_sec_t {font-size:clamp(2.2rem,8vw,9rem);}
.ab_farm_x p {margin:18px 0 0; font-size:12px; letter-spacing:0.08em;}
.ab_years {position:absolute; left:5vw; bottom:7vh; display:flex; gap:8px;}
.ab_years i {width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.45); font-style:normal; font-size:9px;}
.ab_years i.is_on {background:#ffffff; color:#000000;}
.ab_farm.season_0 .ab_land {filter:grayscale(1) contrast(1.2);}
.ab_farm.season_1 .ab_land {filter:saturate(.2);}
.ab_farm.season_1 .ab_soil {opacity:.25;}
.ab_farm.season_2 .ab_land {filter:saturate(.55);}
.ab_farm.season_2 .ab_soil {opacity:.65;}
.ab_farm.season_3 .ab_land {filter:saturate(1); background:repeating-linear-gradient(98deg,#445c20 0 7vw,#668432 7vw 12vw);}
.ab_farm.season_3 .ab_soil {opacity:1;}

/* 07 땅에서 제품까지 */
.ab_flow {min-height:125svh; padding:13vh 5vw; background:#e9e8e1; color:#111111;}
.ab_flow .ab_sec_t {font-size:clamp(2.2rem,8vw,9rem);}
.ab_flow_d {margin:18px 0 0; font-size:13px; line-height:1.8; word-break:keep-all;}
.ab_flow_l {margin:10vh 0 0; padding:0; list-style:none; border-top:1px solid #111111;}
.ab_flow_r {height:13vh; min-height:88px; display:grid; grid-template-columns:56px 1fr 1fr 28px; align-items:center;
            border-bottom:1px solid #aaaaaa; transition:background-color .3s ease, color .3s ease, padding .3s ease;}
.ab_flow_r:hover {background:#111111; color:#ffffff; padding-left:18px; padding-right:18px;}
.ab_flow_r i, .ab_flow_r em {font-style:normal; font-size:9px;}
.ab_flow_r b {font-size:clamp(1.1rem,3vw,3.4rem); letter-spacing:-0.05em;}
.ab_flow_r span {font-size:11px; word-break:keep-all;}

/* 08 제품 — 눌러서 분해하고 다시 합친다 */
.ab_product {position:relative; min-height:130svh; padding:13vh 5vw; background:#090909;}
.ab_product .ab_sec_t {font-size:clamp(2.2rem,8vw,9rem);}
.ab_product_d {margin:18px 0 0; font-size:12px; line-height:1.8;}
.ab_asm {position:relative; height:65vh; margin-top:5vh; border-top:1px solid #333333; cursor:pointer;}
.ab_layer, .ab_bottle {position:absolute; left:50%; top:50%; transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s ease;}
.ab_layer {width:170px; height:230px; margin:-115px -85px; padding:14px; display:flex; justify-content:space-between;
           border:1px solid #555555; background:rgba(10,10,10,.8);}
.ab_layer b {writing-mode:vertical-rl; font-size:9px; letter-spacing:0.15em;}
.ab_layer i {font-style:normal; font-size:8px;}
.ab_layer:nth-child(1) {transform:translate(-420px,-35px) rotate(-8deg);}
.ab_layer:nth-child(2) {transform:translate(-250px,30px) rotate(5deg);}
.ab_layer:nth-child(3) {transform:translate(-85px,-25px) rotate(-3deg);}
.ab_layer:nth-child(4) {transform:translate(100px,18px) rotate(6deg);}
.ab_layer:nth-child(5) {transform:translate(265px,-38px) rotate(-5deg);}
.ab_bottle {z-index:4; width:128px; height:300px; margin:-150px -64px; padding:20px 15px; display:flex; flex-direction:column;
            background:#e5e4dc; color:#111111; box-shadow:0 30px 80px #000000;}
.ab_bottle span {font-weight:800;}
.ab_bottle b {margin-top:42px; font-size:13px;}
.ab_bottle i {margin-top:auto; font-style:normal; font-size:34px; font-weight:800;}
.ab_product.is_assembled .ab_layer {transform:translate(0,0); opacity:.08;}
.ab_product.is_assembled .ab_bottle {transform:scale(1.12);}
.btn_ab_asm {position:absolute; right:0; bottom:0; padding:15px 20px; border:1px solid #555555; background:none;
             color:#ffffff; font-family:inherit; font-size:9px; letter-spacing:0.14em; cursor:pointer;}
.btn_ab_asm:hover {border-color:#ffffff;}

/* 09 맺음 */
.ab_end {position:relative; min-height:110svh; padding:0 5vw; overflow:hidden; background:#1547ff;
         display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.ab_end .ab_display {position:relative; z-index:2;}
.ab_end p {position:relative; z-index:2; margin:0; font-size:11px; line-height:1.7;}
.ab_orbit {position:absolute; border:1px solid rgba(255,255,255,.35); border-radius:50%; animation:ab_orbit 14s linear infinite;}
.ab_orbit.is_1 {width:42vw; height:42vw;}
.ab_orbit.is_2 {width:68vw; height:25vw; transform:rotate(28deg);}
.ab_orbit.is_3 {width:27vw; height:70vw; transform:rotate(-32deg);}
@keyframes ab_orbit {to {rotate:360deg;}}

/* -------------------- tablet -------------------- */
@media all and (max-width:1024px) {
    .ab_founder {right:40vw;}
    .ab_story {width:34vw;}
    .ab_clock {width:56vw;}
}

/* -------------------- mobile -------------------- */
@media all and (max-width:640px) {
    .ab_founder {left:5vw; right:5vw; top:29vh; height:42vh; opacity:.22;}
    .ab_story {left:5vw; right:5vw; top:34vh; width:auto;}
    .ab_story p {margin:8px 0; font-size:10.5px; line-height:1.55;}
    .ab_tile {min-width:0; width:30vw; height:16vh;}
    .ab_tile:nth-child(2) {left:54%; width:24vw;}
    .ab_tile:nth-child(3) {right:4%; top:34%; width:33vw; height:19vh;}
    .ab_tile:nth-child(4) {left:7%; top:43%; width:25vw;}
    .ab_tile:nth-child(5) {left:37%; top:55%; width:35vw; height:20vh;}
    .ab_tile:nth-child(6) {right:5%; top:76%; width:27vw;}
    .ab_tile:nth-child(7) {left:4%; bottom:3%; width:22vw;}
    .ab_tile:nth-child(8) {right:36%; bottom:2%; width:25vw;}
    .ab_total strong {font-size:30vw;}
    .ab_pair {display:grid; grid-template-columns:1fr auto 1fr;}
    .ab_clock {left:5vw; right:5vw; top:28vh; bottom:auto; width:auto;}
    .ab_clock_h small {font-size:7px;}
    .ab_clock_v {grid-template-columns:1.55fr 1fr 1fr; margin:10px 0;}
    .ab_clock_v span {padding:11px 7px;}
    .ab_clock p {font-size:9px;}
    .ab_time {left:5vw; right:5vw; top:53vh; width:auto; padding-left:18px;}
    .ab_time_row {height:8vh; grid-template-columns:27px minmax(90px,.8fr) 1.2fr;}
    .ab_time_row b {font-size:12px;}
    .ab_time_row span {font-size:9px; line-height:1.35;}
    .ab_flow_r {grid-template-columns:30px 1fr 1fr 18px;}
    .ab_flow_r span {font-size:9px;}
    .ab_layer {width:115px; height:170px; margin:-85px -57px;}
    .ab_layer:nth-child(1) {transform:translate(-130px,-155px);}
    .ab_layer:nth-child(2) {transform:translate(20px,-145px);}
    .ab_layer:nth-child(3) {transform:translate(-140px,110px);}
    .ab_layer:nth-child(4) {transform:translate(25px,120px);}
    .ab_layer:nth-child(5) {transform:translate(0,-12px);}
}

/* 움직임을 줄이는 설정을 켜 둔 분께는 애니메이션을 멈춘다 */
@media (prefers-reduced-motion:reduce) {
    .ab_wrap *, .ab_wrap *:before, .ab_wrap *:after {animation:none !important; transition:none !important;}
    .ab_hero_s:nth-child(1) {opacity:1;}
}

/* ============================================================
   mission (contents_mission) — ms_
   ------------------------------------------------------------
   여덟 마디를 스크롤로 넘기는 화면이다. 담당자가 준 시안(독립 HTML)의
   규칙을 그대로 옮기고 이름만 ms_ 로 바꿨다 — .hero·.bar·.note 처럼
   흔한 이름이 다른 화면과 부딪히기 때문이다.
   시안이 문서 전체에 걸던 것(:root · * · html · body)은 걷어내고
   .ms_wrap 안에서만 쓰도록 좁혔다. 시안의 머리·꼬리(자체 nav·footer)는
   사이트 헤더·푸터가 있으니 빼고, 오른쪽 차례 줄(.ms_idx)만 남겼다.
   100vh 는 모바일 주소창에 잘리지 않게 100svh 로 바꿨다.

   마디: 01 믿음 · 02 제품 · 03 플로깅 · 04 다녀온 곳 · 05 생분해 어구
         06 제로웨이스트 · 07 참여(마일리지) · 08 맺음
   ============================================================ */

/* 이 화면 안에서만 쓰는 값과 자리 초기화 — 문서 전체는 건드리지 않는다 */
.ms_wrap {
  --ms-ink:#111111; --ms-paper:#ffffff; --ms-cobalt:#0033cc; --ms-mute:#8c8c8c;
  --ms-line:#e6e6e6; --ms-dark:#0d0d0d;
  background:var(--ms-paper); color:var(--ms-ink);
  /* hidden 이 아니라 clip — hidden 은 세로축을 auto 로 바꿔 sticky 를 깨뜨린다 */
  overflow-x:clip;
}
.ms_wrap *, .ms_wrap *:before, .ms_wrap *:after {box-sizing:border-box;}
.ms_wrap h1, .ms_wrap h2, .ms_wrap h3, .ms_wrap p, .ms_wrap ul, .ms_wrap li, .ms_wrap figure {margin:0; padding:0;}
.ms_wrap ul {list-style:none;}
.ms_wrap button {font-family:inherit;}
.ms_hide {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap;}

.ms_idx{position:fixed;right:34px;top:50%;transform:translateY(-50%);z-index:70;display:flex;
  flex-direction:column;gap:13px;mix-blend-mode:difference}
.ms_idx a{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;opacity:.4;transition:opacity .3s}
.ms_idx a.is_on{opacity:1}
.ms_idx_n{font-size:9.5px;letter-spacing:0.1em;width:16px}
.ms_idx_bar{width:20px;height:1px;background:currentColor;transition:width .3s}
.ms_idx a.is_on .ms_idx_bar{width:38px}

.ms_in{max-width:1440px;margin:0 auto;padding:0 60px}
/* index rail clearance */
@media (min-width:1025px){.ms_in{padding-right:112px}}
.ms_ov{font-size:10.5px;letter-spacing:0.22em;color:var(--ms-mute)}
.ms_note{font-size:11px;color:var(--ms-mute);letter-spacing:0.02em;line-height:1.7}
.ms_rise{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.ms_rise.is_in{opacity:1;transform:none}
.ms_d1{transition-delay:.12s}.ms_d2{transition-delay:.24s}.ms_d3{transition-delay:.36s}.ms_d4{transition-delay:.48s}

.ms_media{position:relative;background:#e9e9e9;overflow:hidden}
.ms_media::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 22% 18%,rgba(255,255,255,.8),transparent 60%),
   linear-gradient(148deg,#d9dcd8,#b3b9b6 62%,#9ea6a4)}
.ms_media.is_sea::before{background:radial-gradient(110% 85% at 62% 12%,rgba(90,150,190,.5),transparent 62%),
   linear-gradient(160deg,#14343f,#0d222b 52%,#060f14)}
.ms_media.is_trash::before{background:radial-gradient(110% 85% at 30% 22%,rgba(210,200,180,.4),transparent 58%),
   linear-gradient(155deg,#4a4740,#31302b 50%,#1b1a17)}
.ms_media.is_blue::before{background:radial-gradient(100% 80% at 30% 25%,rgba(80,130,255,.5),transparent 60%),
   linear-gradient(150deg,#14224a,#0e1836 55%,#080d1e)}
.ms_media .ms_tag{position:absolute;left:16px;bottom:14px;font-size:9.5px;letter-spacing:0.1em;color:rgba(255,255,255,.7);z-index:2}

/* ---------- M01 BELIEF ---------- */
#msM01{height:400vh;background:var(--ms-dark)}
.ms_pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;color:#fff}
.ms_flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;text-align:center;opacity:0;transition:opacity .45s ease}
.ms_flash.is_on{opacity:1}
.ms_flash .ms_fv{font-size:clamp(46px,10vw,150px);font-weight:700;letter-spacing:-0.045em;line-height:1}
.ms_flash .ms_fl{margin-top:22px;font-size:12px;letter-spacing:0.2em;color:rgba(255,255,255,.55)}
.ms_flash .ms_fs{margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.4)}
.ms_final{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;text-align:center;padding:0 24px;opacity:0;transition:opacity .8s ease}
.ms_final.is_on{opacity:1}
.ms_final .ms_q{font-size:11px;letter-spacing:0.28em;color:rgba(255,255,255,.5)}
.ms_final h1{margin-top:30px;font-size:clamp(32px,6.6vw,104px);font-weight:700;letter-spacing:-0.04em;line-height:1}
.ms_final .ms_kr{margin-top:40px;font-size:clamp(15px,1.9vw,24px);line-height:1.95;color:rgba(255,255,255,.9);letter-spacing:-0.012em}
.ms_final .ms_en{margin-top:36px;font-size:clamp(11px,1.2vw,15px);letter-spacing:0.13em;color:var(--ms-cobalt);font-weight:700;line-height:1.9}

/* ---------- M02 PRODUCT ---------- */
#msM02{padding:170px 0 150px}
.ms_lead{display:grid;grid-template-columns:1fr 1fr;gap:0 70px;align-items:start}
.ms_lead_a{font-size:clamp(20px,2.5vw,34px);font-weight:700;letter-spacing:-0.025em;line-height:1.5;color:#c2c2c2}
.ms_lead_b{font-size:clamp(20px,2.5vw,34px);font-weight:700;letter-spacing:-0.025em;line-height:1.5}

.ms_split{margin-top:90px}
.ms_row{display:grid;grid-template-columns:150px 1fr;gap:0 26px;align-items:center;margin-bottom:20px}
.ms_row .ms_k{font-size:12px;letter-spacing:0.06em;color:var(--ms-mute)}
.ms_row.is_us .ms_k{color:var(--ms-ink);font-weight:700}
.ms_bar{display:flex;height:58px;width:100%;overflow:hidden;background:#f2f2f2}
.ms_bar span{display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:0.08em;
  width:0;transition:width 1.3s cubic-bezier(.22,1,.36,1);white-space:nowrap;overflow:hidden}
.ms_bar .ms_pkg{background:#d8d8d8;color:#6a6a6a}
.ms_bar .ms_ing{background:var(--ms-ink);color:#fff}
.ms_row.is_us .ms_bar .ms_ing{background:var(--ms-cobalt)}
.ms_cap{margin-top:26px;font-size:14.5px;line-height:2;color:#4a4a4a;max-width:760px}
.ms_cap b{color:var(--ms-ink)}
.ms_claim{margin-top:80px;display:grid;grid-template-columns:1fr 1fr;gap:0 70px;align-items:end}
.ms_claim .ms_big{font-size:clamp(24px,3.2vw,46px);font-weight:700;letter-spacing:-0.03em;line-height:1.3}
.btn_ms_lnk{display:flex;width:max-content;max-width:100%;align-items:center;gap:10px;margin-top:34px;
  text-decoration:none;color:var(--ms-ink);border-bottom:1px solid var(--ms-ink);padding-bottom:8px;
  font-size:12px;letter-spacing:0.1em}
.btn_ms_lnk .ms_ar{color:var(--ms-cobalt);font-weight:700}

/* ---------- M03 PLOGGING ---------- */
#msM03{background:var(--ms-dark);color:#fff;padding:170px 0 150px}
.ms_q3{font-size:clamp(24px,3.4vw,52px);font-weight:700;letter-spacing:-0.032em;line-height:1.35}
.ms_q3 em{font-style:normal;color:rgba(255,255,255,.42)}
.ms_hero3{margin-top:110px;text-align:center}
.ms_hero3 .ms_num{font-size:clamp(40px,10vw,158px);font-weight:700;letter-spacing:-0.05em;line-height:1;
  color:var(--ms-cobalt);font-variant-numeric:tabular-nums}
.ms_hero3 .ms_unit{font-size:.34em;letter-spacing:0;margin-left:.1em;color:rgba(255,255,255,.75)}
.ms_hero3 .ms_kr{margin-top:34px;font-size:clamp(16px,2vw,26px);font-weight:700;letter-spacing:-0.02em}
.ms_hero3 .ms_sub{margin-top:22px;font-size:13px;letter-spacing:0.06em;color:rgba(255,255,255,.5);line-height:2}
/* --- volume scene --- */
.ms_vol{position:relative;height:480vh;margin-top:90px}
.ms_vol_pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ms-dark)}
.ms_bfield{position:absolute;inset:0;background-repeat:repeat;background-position:center center;
  will-change:background-size;opacity:0;transition:opacity .45s ease}
.ms_bsingle{position:absolute;inset:0;background-repeat:no-repeat;background-position:center 30%;
  background-size:172px 430px;transition:opacity .45s ease}
.ms_scrim{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,13,13,0) 0%,rgba(13,13,13,.78) 46%,rgba(13,13,13,.96) 100%)}
.ms_bglow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 46%,rgba(0,51,204,.22),transparent 70%)}
.ms_cube{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .7s ease;padding-bottom:60px}
.ms_cube svg{width:min(620px,68vw);height:auto;overflow:visible}
.ms_cface{fill:rgba(0,51,204,.10);stroke:#fff;stroke-width:1.4;
  stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1)}
.ms_cube.is_on .ms_cface{stroke-dashoffset:0}
.ms_cface.is_top{fill:rgba(0,51,204,.20)}
.ms_cface.is_side{fill:rgba(0,51,204,.06)}
.ms_cdim{stroke:#0033cc;stroke-width:1.2}
.ms_ctxt{fill:#0033cc;font-size:15px;font-weight:700;letter-spacing:0.02em}
.ms_cflr{stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:3 5}
.ms_cflr_t{fill:rgba(255,255,255,.42);font-size:10px;letter-spacing:0.12em}
.ms_chum{fill:rgba(255,255,255,.62)}
.ms_hud{position:absolute;left:0;right:0;bottom:52px;text-align:center;z-index:8;padding:0 24px}
.ms_hud_k{font-size:11px;letter-spacing:0.24em;color:rgba(255,255,255,.45)}
.ms_hud_n{margin-top:16px;font-size:clamp(34px,8.4vw,132px);font-weight:700;letter-spacing:-0.05em;
  line-height:1;color:var(--ms-cobalt);font-variant-numeric:tabular-nums}
.ms_hud_n small{font-size:.3em;letter-spacing:0;margin-left:.12em;color:rgba(255,255,255,.8);font-weight:400}
.ms_hud_d{margin-top:18px;font-size:clamp(14px,1.8vw,21px);font-weight:700;letter-spacing:-0.015em;
  color:rgba(255,255,255,.92)}
.ms_hud_s{margin-top:12px;font-size:11.5px;letter-spacing:0.06em;color:rgba(255,255,255,.4);line-height:1.9}
.ms_vol_steps{position:absolute;left:0;right:0;top:104px;display:flex;justify-content:center;gap:24px;
  z-index:8;font-size:9.5px;letter-spacing:0.16em;color:rgba(255,255,255,.28)}
.ms_vol_steps span.is_on{color:#fff}
.ms_every{margin-top:70px;display:grid;grid-template-columns:1fr 1fr;gap:0 70px;align-items:center}
.ms_every .ms_k{font-size:clamp(19px,2.3vw,30px);font-weight:700;letter-spacing:-0.022em;line-height:1.6}
.ms_shot3{aspect-ratio:16/10}

/* ---------- M04 ACTION MAP (scrollytelling) ---------- */
#msM04{background:#07090c;color:#fff;padding:150px 0 0}
.ms_plog{position:relative;margin-top:60px}
.ms_plog_g{display:grid;grid-template-columns:0.92fr 1.08fr;gap:0 64px;align-items:start}

.ms_plog_m{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding:96px 0 56px}
.ms_mapbox{position:relative;width:100%;max-width:460px}
.ms_mapbox svg{width:100%;height:auto;max-height:40vh;display:block;overflow:visible}
.ms_gset{opacity:0;transition:opacity .9s ease}
.ms_gset.is_on{opacity:1}
.ms_land{fill:rgba(255,255,255,.055);stroke:rgba(255,255,255,.38);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round}
.ms_land_d{fill:url(#msDots)}
.ms_mpin{fill:rgba(255,255,255,.22);transition:fill .4s,r .4s}
.ms_mpin.is_on{fill:var(--ms-cobalt)}
.ms_mring{fill:none;stroke:var(--ms-cobalt);stroke-width:1.2;opacity:0;transition:opacity .4s}
.ms_mring.is_on{opacity:1}
.ms_mlbl{fill:rgba(255,255,255,.75);font-size:9px;letter-spacing:0.1em;opacity:0;transition:opacity .4s}
.ms_mlbl.is_on{opacity:1}
.ms_mapmode{position:absolute;left:0;top:-34px;font-size:10px;letter-spacing:0.2em;color:rgba(255,255,255,.42)}

.ms_plog_l{margin-top:30px;max-width:460px}
.ms_plog_l li{list-style:none;display:grid;grid-template-columns:22px 1fr auto;gap:0 12px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);align-items:baseline;
  font-size:12px;letter-spacing:0.04em;color:rgba(255,255,255,.34);transition:color .3s}
.ms_plog_l li .ms_no{font-size:9.5px}
.ms_plog_l li .ms_pl{letter-spacing:0.12em}
.ms_plog_l li .ms_pd{font-size:10.5px}
.ms_plog_l li.is_on{color:#fff}
.ms_plog_l li.is_on .ms_pl{color:var(--ms-cobalt);font-weight:700}

.ms_feed{padding:14vh 0 30vh}
.ms_item{min-height:74vh;display:flex;flex-direction:column;justify-content:center;
  padding:40px 0;opacity:.28;transition:opacity .6s ease}
.ms_item.is_on{opacity:1}
.ms_item .ms_pm{aspect-ratio:4/3;width:100%}
.ms_item .ms_pmeta{margin-top:20px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.ms_item .ms_pno{font-size:10px;letter-spacing:0.16em;color:rgba(255,255,255,.35)}
.ms_item .ms_ploc{font-size:clamp(20px,2.4vw,32px);font-weight:700;letter-spacing:-0.02em}
.ms_item .ms_ptag{font-size:10.5px;letter-spacing:0.14em;color:var(--ms-cobalt);border:1px solid var(--ms-cobalt);
  padding:3px 9px}
.ms_item .ms_p.ms_item .ms_pbody b{color:#fff;font-weight:700}
.ms_item .ms_pnote{margin-top:10px;font-size:10.5px;color:rgba(255,255,255,.3);letter-spacing:0.03em}

.ms_arch{background:#07090c;color:#fff;padding:110px 0 130px;text-align:center}
.ms_arch a{display:inline-flex;gap:12px;align-items:center;text-decoration:none;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:9px;font-size:12px;letter-spacing:0.12em}
.ms_arch .ms_ar{color:var(--ms-cobalt);font-weight:700}

/* ---------- M05 GEAR ---------- */
#msM05{background:#07141a;color:#fff;padding:170px 0 160px}
.ms_gear_l{font-size:clamp(22px,3vw,44px);font-weight:700;letter-spacing:-0.03em;line-height:1.4}
.ms_gear_l em{font-style:normal;color:var(--ms-cobalt)}
.ms_compare{margin-top:90px;display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.ms_ccard{border:1px solid rgba(255,255,255,.16);padding:0 0 26px}
.ms_ccard .ms_ccard_m{aspect-ratio:16/10}
.ms_ccard .ms_t{padding:22px 24px 0;font-size:15px;font-weight:700;letter-spacing:0.02em}
.ms_ccard .ms_d{padding:10px 24px 0;font-size:13.5px;line-height:1.9;color:rgba(255,255,255,.62)}
.ms_ccard.is_good{border-color:var(--ms-cobalt)}
.ms_ccard.is_good .ms_t{color:var(--ms-cobalt)}

.ms_fact{margin-top:104px;max-width:900px}
.ms_fact_k{font-size:10.5px;letter-spacing:0.2em;color:rgba(255,255,255,.42)}
.ms_fact_t{margin-top:18px;font-size:clamp(17px,2.1vw,27px);font-weight:700;letter-spacing:-0.02em;
  line-height:1.62;color:rgba(255,255,255,.95)}
.ms_fact_t em{font-style:normal;color:var(--ms-cobalt)}
.ms_ton{margin-top:34px}
.ms_ton_t{height:44px;display:flex;background:rgba(255,255,255,.07);overflow:hidden}
.ms_ton_t span{display:flex;align-items:center;padding:0 16px;font-size:11.5px;letter-spacing:0.06em;
  width:0;white-space:nowrap;overflow:hidden;transition:width 1.4s cubic-bezier(.22,1,.36,1)}
.ms_ton_t .ms_gearbar{background:var(--ms-cobalt);color:#fff;font-weight:700}
.ms_ton_t .ms_rest{background:rgba(255,255,255,.13);color:rgba(255,255,255,.6)}
.ms_ton_a{margin-top:10px;display:flex;justify-content:space-between;font-size:10.5px;
  letter-spacing:0.06em;color:rgba(255,255,255,.35)}
.ms_fact_s{margin-top:16px;font-size:11px;line-height:1.8;color:rgba(255,255,255,.34);letter-spacing:0.02em}
.ms_fact_s a{color:rgba(255,255,255,.55)}
.ms_sup{margin-top:80px;padding-top:36px;border-top:1px solid rgba(255,255,255,.14);
  display:grid;grid-template-columns:1fr 1fr;gap:0 70px;align-items:end}
.ms_sup .ms_lab{font-size:11px;letter-spacing:0.2em;color:rgba(255,255,255,.45)}
.ms_sup .ms_famt{margin-top:14px;font-size:clamp(34px,6.6vw,104px);font-weight:700;letter-spacing:-0.035em;
  color:var(--ms-cobalt);font-variant-numeric:tabular-nums}
.ms_sup .ms_famt small{font-size:.34em;margin-left:.16em;color:rgba(255,255,255,.7);font-weight:400}
.ms_sup .ms_rt{font-size:14.5px;line-height:2;color:rgba(255,255,255,.72)}

/* ---------- M06 ZERO WASTE ---------- */
#msM06{padding:160px 0}
.ms_zw{display:grid;grid-template-columns:1.05fr .95fr;gap:0 70px;align-items:center}
.ms_zw h2{font-size:clamp(24px,3.2vw,46px);font-weight:700;letter-spacing:-0.03em;line-height:1.35}
.ms_zw .ms_cup{font-size:clamp(17px,2vw,26px);line-height:1.85;color:#4a4a4a;margin-top:26px}
.ms_zw_c{border:1px solid var(--ms-line);padding:34px 36px;text-decoration:none;color:var(--ms-ink);display:block;
  transition:border-color .3s,transform .3s}
.ms_zw_c:hover{border-color:var(--ms-ink);transform:translateY(-3px)}
.ms_zw_c .ms_t{font-size:11px;letter-spacing:0.2em;color:var(--ms-mute)}
.ms_zw_c .ms_n{margin-top:16px;font-size:22px;font-weight:700;letter-spacing:-0.02em}
.ms_zw_c .ms_g{margin-top:12px;font-size:13px;color:#6a6a6a;line-height:1.85}
.ms_zw_c .ms_go{margin-top:26px;font-size:12px;letter-spacing:0.1em;color:var(--ms-cobalt);font-weight:700}
.ms_ladder{margin-top:90px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 30px}
.ms_ladder > div{border-top:2px solid var(--ms-line);padding-top:16px}
.ms_ladder > div.is_on{border-top-color:var(--ms-cobalt)}
.ms_ladder .ms_lk{font-size:12px;font-weight:700;letter-spacing:0.14em}
.ms_ladder > div.is_on .ms_lk{color:var(--ms-cobalt)}
.ms_ladder .ms_lv{margin-top:10px;font-size:13px;line-height:1.85;color:#6a6a6a}

/* ---------- M07 DONATION ---------- */
#msM07{background:var(--ms-dark);color:#fff;padding:160px 0}
.ms_don_h{display:grid;grid-template-columns:1.15fr .85fr;gap:0 70px;align-items:end}
.ms_don_h h2{font-size:clamp(22px,3vw,42px);font-weight:700;letter-spacing:-0.03em;line-height:1.42}
.ms_bal{text-align:right}
.ms_bal .ms_bl{font-size:10.5px;letter-spacing:0.2em;color:rgba(255,255,255,.42)}
.ms_bal .ms_bv{margin-top:12px;font-size:clamp(30px,4.4vw,60px);font-weight:700;letter-spacing:-0.035em;
  color:var(--ms-cobalt);font-variant-numeric:tabular-nums;line-height:1}
.ms_bal .ms_bv small{font-size:.32em;margin-left:.14em;color:rgba(255,255,255,.7);font-weight:400}

.ms_step{margin-top:76px;display:flex;align-items:baseline;gap:14px}
.ms_step .ms_sn{font-size:10.5px;letter-spacing:0.2em;color:var(--ms-cobalt);font-weight:700}
.ms_step .ms_st{font-size:14px;font-weight:700;letter-spacing:-0.01em}
.ms_step .ms_sh{font-size:11.5px;color:rgba(255,255,255,.4);margin-left:auto}

.ms_orgs{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ms_org{position:relative;text-align:left;background:transparent;color:#fff;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);padding:0 0 22px;font-family:inherit;
  transition:border-color .25s,background .25s,transform .25s}
.ms_org:hover{border-color:rgba(255,255,255,.42);transform:translateY(-3px)}
.ms_org.is_sel{border-color:var(--ms-cobalt);background:rgba(0,51,204,.10)}
.ms_org .ms_om{aspect-ratio:16/10}
.ms_org .ms_ok{margin:20px 22px 0;font-size:9.5px;letter-spacing:0.16em;color:rgba(255,255,255,.42)}
.ms_org.is_sel .ms_ok{color:var(--ms-cobalt)}
.ms_org .is_on{margin:10px 22px 0;font-size:16.5px;font-weight:700;letter-spacing:-0.015em;line-height:1.45}
.ms_org .ms_od{margin:10px 22px 0;font-size:12.5px;line-height:1.8;color:rgba(255,255,255,.55)}
.ms_org .ms_oa{margin:16px 22px 0;font-size:11px;letter-spacing:0.06em;color:rgba(255,255,255,.34)}
.ms_org .ms_oa b{color:rgba(255,255,255,.8);font-weight:400}
.ms_org .ms_olink{margin:14px 22px 0;font-size:11px;letter-spacing:0.06em;color:var(--ms-cobalt);font-weight:700}
.ms_org .ms_tick{position:absolute;z-index:3;right:16px;top:16px;width:22px;height:22px;border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:transparent}
.ms_org.is_sel .ms_tick{border-color:var(--ms-cobalt);background:var(--ms-cobalt);color:#fff}
.ms_org .ms_badge{position:absolute;z-index:3;left:0;top:0;background:rgba(255,255,255,.9);color:#111;
  font-size:9px;letter-spacing:0.12em;padding:5px 9px;font-weight:700}

.ms_amts{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.ms_amt{background:transparent;color:#fff;font-family:inherit;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);padding:16px 30px;font-size:15px;font-weight:700;
  letter-spacing:-0.01em;font-variant-numeric:tabular-nums;transition:border-color .2s,background .2s}
.ms_amt:hover{border-color:rgba(255,255,255,.5)}
.ms_amt.is_sel{border-color:var(--ms-cobalt);background:var(--ms-cobalt);color:#fff}
.ms_amt:disabled{opacity:.28;cursor:not-allowed}

.ms_sum{margin-top:44px;border-top:1px solid rgba(255,255,255,.16);padding-top:30px;
  display:grid;grid-template-columns:1fr auto;gap:0 40px;align-items:center}
.ms_sum_l .ms_sq{font-size:11px;letter-spacing:0.14em;color:rgba(255,255,255,.4)}
.ms_sum_l .ms_sv{margin-top:12px;font-size:clamp(17px,2.1vw,26px);font-weight:700;letter-spacing:-0.02em;line-height:1.5}
.ms_sum_l .ms_sv em{font-style:normal;color:var(--ms-cobalt)}
.ms_sum_l .ms_sv .ms_ph{color:rgba(255,255,255,.28)}
.btn_ms_don{background:var(--ms-cobalt);color:#fff;border:0;font-family:inherit;cursor:pointer;
  padding:22px 52px;font-size:14px;font-weight:700;letter-spacing:0.08em;transition:opacity .25s}
.btn_ms_don:disabled{background:rgba(255,255,255,.10);color:rgba(255,255,255,.35);cursor:not-allowed}
.ms_done{margin-top:20px;font-size:13px;color:var(--ms-cobalt);font-weight:700;letter-spacing:0.02em;display:none}
.ms_done.is_on{display:block}
.ms_mapnote{margin-top:44px;border:1px solid rgba(255,255,255,.14);padding:22px 26px;
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ms_mapnote .ms_mt{font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.62)}
.ms_mapnote .ms_mt b{color:#fff}
.ms_mapnote a{color:#fff;text-decoration:none;font-size:12px;letter-spacing:0.1em;
  border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:7px;white-space:nowrap}
.ms_mapnote a .ms_ar{color:var(--ms-cobalt);font-weight:700}

/* ---------- M08 END ---------- */
#msM08{background:var(--ms-dark);color:#fff;min-height:100svh;display:flex;align-items:center;
  padding:150px 0;position:relative;overflow:hidden}
.ms_end_bg{position:absolute;inset:0}
.ms_end_bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.74),rgba(0,0,0,.42) 42%,rgba(0,0,0,.88))}
.ms_end_in{position:relative;z-index:2;text-align:center;width:100%}
.ms_end_in h2{font-size:clamp(26px,4.6vw,72px);font-weight:700;letter-spacing:-0.035em;line-height:1.3}
.ms_end_in .ms_sm{margin-top:34px;font-size:clamp(14px,1.7vw,21px);line-height:1.95;color:rgba(255,255,255,.72)}
.ms_end_cta{margin-top:64px;display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:10px;font-size:13px;letter-spacing:0.1em}
.ms_end_cta .ms_ar{color:var(--ms-cobalt);font-weight:700}
.ms_end_note{margin-top:26px;font-size:11.5px;color:rgba(255,255,255,.4);letter-spacing:0.02em}


@media (max-width:1024px){
  .ms_in{padding:0 30px}.ms_idx{display:none}
  .ms_lead,.ms_claim,.ms_every,.ms_compare,.ms_sup,.ms_zw,.ms_don_h{grid-template-columns:1fr;gap:36px 0}
  .ms_bal{text-align:left}
  .ms_orgs{grid-template-columns:repeat(2,1fr)}
  .ms_sum{grid-template-columns:1fr;gap:26px 0}
  .btn_ms_don{width:100%}
  .ms_ladder{grid-template-columns:1fr;gap:24px 0}
  .ms_row{grid-template-columns:1fr;gap:10px 0}
  #msM01{height:320vh}
  .ms_plog_g{grid-template-columns:1fr;gap:0}
  .ms_plog_m{position:sticky;top:0;height:auto;padding:62px 0 14px;background:#07090c;z-index:6}
  .ms_mapbox{max-width:none;width:62%;margin:0 auto}
  .ms_mapbox svg{max-height:26vh}
  .ms_mapmode{position:static;text-align:center;margin-bottom:8px}
  .ms_plog_l{display:none}
  .ms_feed{padding:4vh 0 14vh}
  .ms_item{min-height:62vh;padding:20px 0}
  .ms_item:not(.is_on){opacity:.45}
  .ms_vol{height:400vh}
}
@media (max-width:620px){
    .ms_vol{height:360vh}
  .ms_cube svg{width:92vw}
  .ms_hud_n{font-size:clamp(30px,11vw,60px)}
  .ms_orgs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ms_rise{opacity:1;transform:none;transition:none}
  .ms_flash,.ms_final,.pin,.ms_bar span,.pctFill{transition:none}
}