/* 모바일 연하장 — 보자기 디자인 시스템(common/bojagi-design-system.css)과 사이트 공통 안내 부품(common/bojagi-review-page.css) 위에 배치만 얹는다.
   만들기는 연하장 상품 상세와 같은 구도(12열에서 미리보기 1~6칸 · 결정 패널 8~12칸 = 정본 ARCH.DECISION 청사진),
   안내·확인·종이 연하장은 이벤트 화면과 같은 부품을 쓴다. 색·글자·간격은 var(--bj-*) 로만 쓰고, 토큰 밖 px 는 옆에 근거를 단다. */
#mobileNewyear {
  text-align: left;
  /* 고른 칸 바탕 — 사이트가 쓰는 값 그대로(common/companion-catalog.css .companionQtyMenu__option.is-selected). 디자인 시스템 토큰에는 없다. */
  --ny-picked-surface: #f0f3f3;
}
#mobileNewyear [hidden] { display: none !important; }
#mobileNewyear img { display: block; max-width: 100%; }
/* font 단축 속성으로 물려받으면 부품 단추의 글자 크기를 덮는다 — 글꼴 이름만 물려받는다. */
#mobileNewyear button { font-family: inherit; color: inherit; cursor: pointer; }
#mobileNewyear :focus-visible { outline: 2px solid var(--bj-charcoal); outline-offset: 2px; } /* COMP.ACTION 2px 초점 링 */
#mobileNewyear [tabindex="-1"]:focus { outline: none; }
/* 사이트 공통 CSS 의 div { margin: 0 auto } 가 격자·flex 칸을 내용 폭으로 줄여 가운데로 몬다(실측). 화면 안 div 는 좌우 바깥 여백을 두지 않는다. */
#mobileNewyear div { margin-left: 0; margin-right: 0; }
#mobileNewyear .standalone-receiver { margin-left: auto; margin-right: auto; }
/* 사이트 공통 CSS 가 span 에 작은 글자를 걸어 둔 곳이 있어, 덧붙임 글은 부모 크기를 따르게 못박는다. */
#mobileNewyear .ny-tabs button span, #mobileNewyear .ny-optional, #mobileNewyear .ny-count, #mobileNewyear #greetingCount, #mobileNewyear #selectedDesignName { font-size: inherit; }

/* 사이트 머리줄 — 다른 연하장 화면과 같이 따라 내려오지 않게 둔다 */
body.newyear-page { margin: 0; min-width: 0; }
body.newyear-page #menu_r1, body.newyear-page #menu_r2 { position: relative; top: 0; }
body.newyear-page .fixed_header_content_box { position: relative; top: 0; }

/* 메뉴 아래 작은 제목 — 이벤트·편의상품 화면과 같은 자리·크기(event_renew.css .newyear-event-subtitle) */
#mobileNewyear .ny-subheader { margin-top: var(--bj-space-3); display: flex; flex-wrap: wrap; gap: 0 var(--bj-space-2); align-items: baseline; justify-content: space-between; }
#mobileNewyear .ny-subheader__meta { margin: 0; color: var(--bj-muted); font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); }
#mobileNewyear .ny-subtitle { margin: 0; color: var(--bj-ink); font-size: var(--bj-type-subsection); font-weight: var(--bj-type-subsection-weight); line-height: var(--bj-type-subsection-line); }
#mobileNewyear .ny-gap { margin-top: var(--bj-space-2); }
#mobileNewyear .ny-actions-start { justify-content: flex-start; }

/* 글자 링크 — 보조 행동(정본 COPY.TASK: quiet outline 또는 text action) */
#mobileNewyear .ny-text-action { display: inline-flex; min-height: 44px; padding: 0; align-items: center; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--bj-ink); font-size: var(--bj-type-control); font-weight: 600; line-height: var(--bj-type-control-line); text-decoration: none; } /* DNA.ROLE.DECISION 컨트롤 44px */
#mobileNewyear .ny-links { display: flex; flex-wrap: wrap; gap: 0 var(--bj-space-3); align-items: center; }

/* 만들기 — 상품 상세와 같은 12열 구도 ------------------------------------------- */
/* 입력이 길어도 결과가 보이게 미리보기가 따라온다(상품 상세의 대표 이미지와 같은 역할) */

/* 미리보기 — 상품 무대(--bj-product-stage · 모서리 --bj-control-radius) 위에 받는 분이 보는 카드 */
#mobileNewyear .app-card { overflow: hidden; border: 1px solid var(--bj-line); background: var(--bj-clean); color: var(--bj-ink); text-align: center; overflow-wrap: anywhere; }
#mobileNewyear .app-card > img { width: 100%; height: auto; background: var(--bj-template-media-surface); }
#mobileNewyear .app-card__copy { padding: var(--bj-space-3) var(--bj-space-2); }
#mobileNewyear .app-card__copy strong { display: block; font-size: var(--bj-type-subsection); font-weight: var(--bj-type-subsection-weight); line-height: var(--bj-type-subsection-line); }
#mobileNewyear .app-card__copy p { margin: var(--bj-space-2) 0 0; font-size: var(--bj-type-body); line-height: var(--bj-type-body-line); }

/* 이용후기·이벤트 도입 형식: 소개 → 행동 → 사진. 회색 면과 사진 정렬은 히어로 안에만 적용한다. */
#mobileNewyear .ny-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--review-grid-gap); row-gap: var(--bj-space-3); align-items: stretch; margin-top: calc(var(--bj-space-2) * 2); padding: var(--review-section-compact) 0; background: var(--bj-soft-surface); box-shadow: 0 0 0 100vmax var(--bj-soft-surface); clip-path: inset(0 -100vmax); }
#mobileNewyear .ny-hero__copy { grid-column: 1 / span 5; min-width: 0; }
#mobileNewyear .ny-hero__showcase { grid-column: 6 / span 7; min-width: 0; position: relative; align-self: stretch; }
#mobileNewyear .ny-hero__copy .bj-review-body { margin-top: var(--bj-space-2); }
#mobileNewyear .ny-hero__actions { margin-top: var(--bj-space-3); }
#mobileNewyear .ny-hero__facts { margin: var(--bj-space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--bj-space-1) var(--bj-space-2); list-style: none; }
#mobileNewyear .ny-hero__facts li { padding: 4px 10px; border: 1px solid var(--bj-line-strong); border-radius: 999px; color: var(--bj-ink); font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); } /* 기존 알약 배지 규격 유지 */
/* PC 사진은 제목부터 행동 하단까지. 원본 휴대폰 중심(46.96%)을 표시창 중앙으로 옮긴다. */
#mobileNewyear .ny-hero__photo { position: absolute; inset: 0; width: 100%; overflow: hidden; background: var(--bj-product-stage); }
#mobileNewyear .ny-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1) translateY(3.04%); transform-origin: 50% 50%; }

/* 디자인 고르기 — 상품 목록과 같은 칸(catalogShell__grid · companionCatalogCard) 위에 고르기만 얹는다 */
#mobileNewyear .ny-designs__head { display: flex; flex-wrap: wrap; gap: var(--bj-space-1) var(--bj-space-3); align-items: baseline; justify-content: space-between; }
#mobileNewyear .ny-tabs { border-bottom: 0; }
#mobileNewyear .ny-tabs > button { gap: calc(var(--bj-space-1) / 2); }
/* 관리자에게만 열린 상태 표시 — DNA.COLOR.ATTENTION(봐 달라는 상태) */
#mobileNewyear .ny-staff-note { margin: var(--bj-space-2) 0 0; padding: var(--bj-space-1) var(--bj-space-2); color: var(--bj-attention); font-size: var(--bj-type-body); font-weight: 600; line-height: var(--bj-type-body-line); }
/* 적다가 멈춘 인사말 — 이어서 적으면 모달이 그 내용으로 열린다(ARCH.TASK 이어하기) */
#mobileNewyear .ny-draft-note { margin: var(--bj-space-2) 0 0; padding: var(--bj-space-2); display: flex; flex-wrap: wrap; gap: var(--bj-space-1) var(--bj-space-2); align-items: center; justify-content: space-between; }
#mobileNewyear .ny-draft-note p { margin: 0; }
#mobileNewyear .ny-draft-note__actions { display: flex; flex-wrap: wrap; gap: var(--bj-space-2); align-items: center; }
/* 디자인 칸 격자 — 한 줄에 5개(칸 184px). 열 간격은 정본 20px. */
#mobileNewyear .ny-thumbs { margin: var(--bj-space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; row-gap: var(--bj-space-3); border: 0; }
#mobileNewyear .ny-change { margin-left: var(--bj-space-1); color: var(--bj-muted); font-weight: var(--bj-type-control-weight); }
/* 디자인 칸 = 폰 화면 그대로. 운영 화면이 쓰던 전용 미리보기(/ncard/skin/<년>/preview/, 1080x1920 = 0.562)를
   칸에 꽉 채운다 — 모바일청첩장 목록(640x1138)과 같은 비율이라 자르지 않는다. */
#mobileNewyear .ny-thumb { padding: 0; display: block; border: 0; background: transparent; text-align: left; cursor: pointer; }
#mobileNewyear .ny-thumb__stage { position: relative; display: block; width: 100%; aspect-ratio: 1080 / 1920; overflow: hidden; border-radius: var(--bj-control-radius); transition: transform .2s ease; }
#mobileNewyear .ny-thumb__image { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease; }
#mobileNewyear .ny-thumb:hover .ny-thumb__stage { transform: translateY(-2px); }
#mobileNewyear .ny-thumb:hover .ny-thumb__image { transform: scale(1.02); }
#mobileNewyear .ny-thumb:focus-visible { outline: 2px solid var(--bj-nav-active); outline-offset: 3px; }
/* 오픈 전 — 누를 수 없는 자리 표시 */
#mobileNewyear .ny-thumb--ready { cursor: default; }
/* 준비중 그림이 흰 바탕이라 칸 경계가 안 보인다 — 겹침 테두리를 써서 칸 크기가 안 밀리게 한다 */
#mobileNewyear .ny-thumb--ready .ny-thumb__stage::after { border-width: 1px; border-color: var(--bj-line); }
#mobileNewyear .ny-thumb--ready:hover .ny-thumb__stage { transform: none; }
#mobileNewyear .ny-thumb--ready:hover .ny-thumb__image { transform: none; }
/* 오픈 전 머리말 — 정본 .bj-page-kicker 그대로 쓰고 아래 제목과의 사이만 띄운다 */
#mobileNewyear .ny-prep-kicker { margin-bottom: var(--bj-space-1); }
#mobileNewyear .ny-thumb--pick { position: relative; }
#mobileNewyear .ny-thumb--pick input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#mobileNewyear .ny-thumb__check { position: absolute; z-index: 2; top: 8px; right: 8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bj-nav-active); color: var(--bj-clean); font-size: var(--bj-type-caption); font-weight: 700; opacity: 0; }
/* 고른 테두리는 outline 이 아니라 겹침 요소로 그린다 — outline 을 안쪽(offset 음수)으로 주면
   마우스 올릴 때 커지는 그림(transform)이 그 위를 덮어 테두리가 사라진다(실측). 사이트도 같은 이유로
   .mc-skin-thumb::after 를 쓴다. */
#mobileNewyear .ny-thumb__stage::after { position: absolute; z-index: 1; inset: 0; border: 0 solid var(--bj-nav-active); border-radius: inherit; content: ""; pointer-events: none; }
#mobileNewyear .ny-thumb--pick:has(input:checked) .ny-thumb__stage::after { border-width: 2px; }
#mobileNewyear .ny-thumb--pick:has(input:checked) .ny-thumb__check { opacity: 1; }
/* 초점 테두리는 칸 바깥에 — 그림에 덮이지 않는다 */
#mobileNewyear .ny-thumb--pick:has(input:focus-visible) { outline: 2px solid var(--bj-nav-active); outline-offset: 3px; }
#mobileNewyear .ny-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 결정 패널 — 상품 상세의 오른쪽 칸과 같은 위계(상품명 → 메타 → 줄마다 값 → 행동) */
#mobileNewyear .ny-draft { margin-top: var(--bj-space-3); padding: var(--bj-space-1) var(--bj-space-2); display: flex; flex-wrap: wrap; gap: 0 var(--bj-space-2); align-items: center; justify-content: space-between; } /* 정보 면 — 외곽선 없음 */
#mobileNewyear .ny-draft p { margin: 0; color: var(--bj-ink); font-size: var(--bj-type-body); }
#mobileNewyear .ny-specs { margin: var(--bj-space-3) 0 0; padding: var(--bj-space-2) 0; border-top: 1px solid var(--bj-line); border-bottom: 1px solid var(--bj-line); }
#mobileNewyear .ny-field { margin-top: var(--bj-space-3); }
#mobileNewyear .ny-field > label { display: flex; gap: var(--bj-space-1); align-items: baseline; justify-content: space-between; margin-bottom: var(--bj-space-1); color: var(--bj-ink); font-size: var(--bj-type-control); font-weight: 600; line-height: var(--bj-type-control-line); }
#mobileNewyear .ny-count, #mobileNewyear .ny-optional { color: var(--bj-muted); font-weight: var(--bj-type-body-weight); }
/* 입력칸 테두리 — GRAMMAR.BOUNDARY 조작 컨트롤 3:1(--bj-line-strong). 정본 .bj-form-control 은 --bj-line 이라 이 화면에서 올린다(bojagi-ds §4-2) */
#mobileNewyear .bj-form-control input, #mobileNewyear .bj-form-control textarea { width: 100%; padding: 10px var(--bj-space-2); border-color: var(--bj-line-strong); } /* 정본 시편 spec-form */
#mobileNewyear #greetingCount { margin-left: calc(var(--bj-space-1) / 2); color: var(--bj-muted); font-weight: var(--bj-type-body-weight); } /* 펼침 줄이 flex 라 띄어쓰기가 사라진다 */
/* 인사말 고르기 — 줄마다 단추를 두지 않는다. 하나 고르고 아래 단추 하나로 넣는다(COMP.MODAL actions). */
#mobileNewyear .ny-greeting-list { margin: var(--bj-space-2) 0 0; padding: 0; list-style: none; }
#mobileNewyear .ny-greeting-list li { border-top: 1px solid var(--bj-line); }
#mobileNewyear .ny-greeting-list li:first-child { border-top: 0; }
#mobileNewyear .ny-greeting { width: 100%; padding: var(--bj-space-2); display: block; border: 0; background: transparent; text-align: left; cursor: pointer; }
#mobileNewyear .ny-greeting strong { display: flex; gap: calc(var(--bj-space-1) / 2); align-items: center; color: var(--bj-muted); font-size: var(--bj-type-control); font-weight: var(--bj-type-control-weight); }
#mobileNewyear .ny-greeting__check { opacity: 0; font-weight: 700; }
#mobileNewyear .ny-greeting__text { display: block; margin: var(--bj-space-1) 0 0; color: var(--bj-ink); font-size: var(--bj-type-body); line-height: var(--bj-type-body-line); overflow-wrap: anywhere; }
/* 고른 표시는 디자인 칸과 같은 방식(companion-catalog.css .companionQtyMenu__option.is-selected) */
#mobileNewyear .ny-greeting:hover { background: var(--ny-picked-surface); }
#mobileNewyear .ny-greeting:focus-visible { outline: 2px solid var(--bj-nav-active); outline-offset: -2px; }
/* 지금 칸에 들어가 있는 인사말 표시 — 고르는 상태가 아니라 「지금 이것」 */
#mobileNewyear .ny-greeting.is-current strong { color: var(--bj-nav-active); font-weight: 600; }
#mobileNewyear .ny-greeting.is-current .ny-greeting__check { opacity: 1; }
#mobileNewyear .ny-modal__foot { flex: 0 0 auto; padding: var(--bj-space-2) var(--bj-space-3); border-top: 1px solid var(--bj-line); background: var(--bj-clean); }
#mobileNewyear .ny-wide { width: 100%; min-width: 0; }
/* 공통 행동 단추의 › 표시는 다른 화면으로 가는 단추에만 — 이 자리에서 끝나는 저장·복사·보내기에는 떼어 낸다 */

/* 저장 뒤 패널 */

/* 이렇게 보내요 · 종이 연하장 — 이벤트 화면의 공통 단계·행동 부품 그대로 */
#mobileNewyear .ny-steps { padding-left: 0; list-style: none; }
#mobileNewyear .ny-steps .bj-review-body { margin-top: var(--bj-space-2); }
#mobileNewyear .ny-paper .catalogShell__grid { margin-top: var(--review-section-compact); }
#mobileNewyear .companionCatalogCard__name { color: var(--bj-ink); font-size: var(--bj-catalog-title-size); font-weight: var(--bj-catalog-title-weight); line-height: var(--bj-catalog-title-line); } /* --bj-text 미정의(bojagi-ds §4-1)라 ink */
#mobileNewyear .ny-card-note { margin: 2px 0 0; color: var(--bj-catalog-supporting-color); font-size: var(--bj-catalog-supporting-size); line-height: var(--bj-catalog-supporting-line); }

/* 보내기 모달 — COMP.MODAL(title · content · close · actions) · 폰은 bottom sheet */
#mobileNewyear .ny-modal { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: var(--bj-page-gutter); }
#mobileNewyear .ny-modal__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(24, 24, 23, .45); cursor: pointer; }
#mobileNewyear .ny-modal__panel { position: relative; width: min(880px, 100%); max-height: calc(100vh - var(--bj-space-4)); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--bj-clean); box-shadow: 0 24px 64px rgba(24, 24, 23, .18); } /* DNA.SHAPE.MODAL 최대 18px · 그림자는 floating 계층 */
#mobileNewyear .ny-modal__head { display: flex; min-height: 64px; padding: 0 var(--bj-space-2) 0 var(--bj-space-3); align-items: center; gap: var(--bj-space-2); border-bottom: 1px solid var(--bj-line); }
#mobileNewyear .ny-modal__title { flex: 1 1 auto; }
#mobileNewyear .ny-modal__back { min-height: 44px; padding: 0 var(--bj-space-1) 0 0; border: 0; background: transparent; color: var(--bj-muted); font-size: var(--bj-type-control); }
#mobileNewyear .ny-modal__title { margin: 0; color: var(--bj-ink); font-size: var(--bj-type-subsection); font-weight: var(--bj-type-subsection-weight); line-height: var(--bj-type-subsection-line); }
#mobileNewyear .ny-modal__close { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--bj-muted); font-size: 18px; }
#mobileNewyear .ny-modal__body { padding: var(--bj-space-3); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bj-line-strong) transparent; }
/* 웹킷은 scrollbar-color 를 안 보므로 따로 — 막대는 안쪽 여백으로 가늘게 만든다 */
#mobileNewyear .ny-modal__body::-webkit-scrollbar { width: 10px; }
#mobileNewyear .ny-modal__body::-webkit-scrollbar-track { background: transparent; }
#mobileNewyear .ny-modal__body::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--bj-control-radius); background: var(--bj-line-strong); background-clip: content-box; }
#mobileNewyear .ny-modal__body::-webkit-scrollbar-thumb:hover { background: var(--bj-muted); background-clip: content-box; }
/* 적기 — 넓은 화면에서는 미리보기 5칸 + 적는 칸 7칸 */
/* PC = 왼쪽 미리보기(따라옴) + 오른쪽 적기 · 그 아래 저장 (PATTERN.EDITORIAL_HERO 5+7열) */
/* 히어로와 같은 12열 축 — 5fr/7fr 로 나누면 20px 간격이 칸 안에 섞여 12열에서 4px 어긋난다(실측 332/464 vs 328/468). */
#mobileNewyear .ny-make { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: var(--bj-space-3); align-items: start; }
#mobileNewyear .ny-make__preview { grid-column: 1 / span 5; grid-row: 1 / span 2; min-width: 0; }
#mobileNewyear .ny-make__form { grid-column: 6 / span 7; grid-row: 1; min-width: 0; }
#mobileNewyear .ny-make__action { grid-column: 6 / span 7; grid-row: 2; min-width: 0; }
#mobileNewyear .ny-make__label { margin: 0 0 var(--bj-space-1); color: var(--bj-muted); font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); }
#mobileNewyear .ny-make__preview { position: sticky; top: 0; }
#mobileNewyear .ny-make__form .ny-specs { margin-top: 0; }
#mobileNewyear .ny-make__action { margin-top: var(--bj-space-3); display: grid; gap: var(--bj-space-1); }
#mobileNewyear .ny-send__subtitle { margin: 0 0 var(--bj-space-2); color: var(--bj-ink); font-size: var(--bj-type-control); font-weight: 600; line-height: var(--bj-type-control-line); }
#mobileNewyear .ny-send__named-box { margin-top: var(--bj-space-3); }
#mobileNewyear .ny-designs__picked { margin: var(--bj-space-1) 0 0; color: var(--bj-muted); font-size: var(--bj-type-caption); }
#mobileNewyear .ny-designs__picked strong { color: var(--bj-ink); }
#mobileNewyear .ny-designs__next { flex-direction: column; gap: var(--bj-space-1); }

#mobileNewyear .ny-send__notice { margin: 0; color: var(--bj-attention); font-size: var(--bj-type-body); font-weight: 600; line-height: var(--bj-type-body-line); } /* DNA.COLOR.ATTENTION */
#mobileNewyear .ny-send__row { margin-top: var(--bj-space-3); }
#mobileNewyear .ny-send__ways { margin-top: var(--bj-space-1); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bj-space-1); }
#mobileNewyear .ny-send__ways > :first-child { grid-column: 1 / -1; }
#mobileNewyear .ny-send__ways .bj-review-action { width: 100%; min-width: 0; padding: 0 var(--bj-space-1); }
#mobileNewyear .ny-send__ways .bj-review-action::after { content: none; }
#mobileNewyear .ny-send__ways--compact { margin-top: var(--bj-space-1); display: flex; flex-wrap: wrap; gap: var(--bj-space-1) var(--bj-space-2); align-items: center; }
#mobileNewyear .ny-send__ways--compact .bj-review-action { width: auto; min-width: 0; height: 44px; padding: 0 var(--bj-space-2); font-size: var(--bj-type-control); } /* 되풀이되는 카드 행동은 600까지 — DNA.TYPE.ACTION */
#mobileNewyear .ny-send__count { color: var(--bj-muted); font-size: inherit; font-weight: var(--bj-type-control-weight); }
#mobileNewyear .ny-send__lead { margin-top: var(--bj-space-1); }
/* 링크 칸 머리줄 — 이름표 왼쪽 · 미리 보기 오른쪽. 맨 아래 두면 눈에 안 들어온다. */
#mobileNewyear .ny-send__url-head { display: flex; flex-wrap: wrap; gap: 0 var(--bj-space-2); align-items: baseline; justify-content: space-between; }
#mobileNewyear .ny-send__url-head label { flex: 1 1 auto; }
/* 이름 더 넣기 — 접기 꼭지를 단추로 보이게(공용 .bj-review-action 과 같은 테두리·높이) */
#mobileNewyear .ny-send__more { margin-top: var(--bj-space-3); padding-top: var(--bj-space-3); border-top: 1px solid var(--bj-line); }
#mobileNewyear .ny-send__more > summary { width: 100%; min-height: var(--review-action-height, 48px); padding: 0 20px; display: flex; gap: var(--bj-space-1); align-items: center; justify-content: center; border: 1px solid var(--bj-charcoal); border-radius: var(--bj-control-radius); background: var(--bj-clean); color: var(--bj-ink); font-size: var(--bj-type-action); font-weight: var(--bj-type-action-weight); line-height: var(--bj-type-action-line); list-style: none; cursor: pointer; }
#mobileNewyear .ny-send__more > summary::-webkit-details-marker { display: none; }
#mobileNewyear .ny-send__more > summary:hover { border-color: var(--bj-muted); background: var(--bj-product-stage); }
#mobileNewyear .ny-send__more > summary:focus-visible { outline: 2px solid var(--bj-charcoal); outline-offset: 3px; }
/* ＋ 가 열면 － 로 — 글자가 아니라 선 두 개라 글꼴을 안 탄다 */
#mobileNewyear .ny-send__more-sign { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
#mobileNewyear .ny-send__more-sign::before, #mobileNewyear .ny-send__more-sign::after { position: absolute; top: 50%; left: 0; width: 12px; height: 1px; background: currentColor; content: ""; }
#mobileNewyear .ny-send__more-sign::after { transform: rotate(90deg); }
#mobileNewyear .ny-send__more[open] > summary .ny-send__more-sign::after { transform: rotate(0deg); }
#mobileNewyear .ny-send__make { margin-top: var(--bj-space-2); }
#mobileNewyear .ny-send__make .bj-review-action { width: 100%; min-width: 0; }
#mobileNewyear .ny-modal .bj-review-action:not(a)::after { content: none; }
/* 한 분 = 한 줄. 이름 왼쪽 · 보낼 길 오른쪽 — 줄마다 두 단이면 7명에 775px 이라 화면을 두 번 넘겨야 했다(실측). */
#mobileNewyear .ny-send__named-head { display: flex; flex-wrap: wrap; gap: var(--bj-space-1) var(--bj-space-2); align-items: baseline; justify-content: space-between; }
#mobileNewyear .ny-send__named { margin: var(--bj-space-2) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--bj-line); }
#mobileNewyear .ny-send__named li { padding: calc(var(--bj-space-1) / 2) 0; display: flex; gap: var(--bj-space-1); align-items: center; border-bottom: 1px solid var(--bj-line); }
/* 이름이 곧 「보기」 링크 — 줄 높이를 다 쓰게 해 탭 영역 44px 를 채운다 */
#mobileNewyear .ny-send__who { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; overflow: hidden; color: var(--bj-ink); font-size: var(--bj-type-body); font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
#mobileNewyear .ny-send__who:hover, #mobileNewyear .ny-send__who:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
#mobileNewyear .ny-send__who { padding: 0; border: 0; background: transparent; text-align: left; }
/* 모달 안 미리보기 — 새 창으로 나가면 폰에서 돌아오기가 번거롭다 */
#mobileNewyear .ny-preview { margin-top: var(--bj-space-2); }
#mobileNewyear .ny-preview .app-card { max-width: 360px; margin-inline: auto; }
#mobileNewyear .ny-preview__note { margin-top: var(--bj-space-2); }
#mobileNewyear .ny-send__done { flex: 0 0 auto; width: 20px; height: 20px; margin: 0 calc(var(--bj-space-1) / 2) 0 0; accent-color: var(--bj-nav-active); cursor: pointer; }
#mobileNewyear .ny-send__named li.is-sent .ny-send__who { color: var(--bj-muted); text-decoration: line-through; }
#mobileNewyear .ny-send__named li.is-sent .ny-send__ways { opacity: .55; }
#mobileNewyear .ny-send__named .ny-send__ways { flex: 0 0 auto; margin-top: 0; }
#mobileNewyear .ny-modal .ny-links { margin-top: var(--bj-space-3); }

/* 알림 — floating 계층 */
#mobileNewyear .ny-toast { position: fixed; z-index: 400; left: 50%; bottom: var(--bj-space-3); max-width: calc(100% - var(--bj-page-gutter-mobile) * 2); padding: var(--bj-space-1) var(--bj-space-2); border-radius: var(--bj-control-radius); background: var(--bj-charcoal); color: var(--bj-clean); font-size: var(--bj-type-control); line-height: var(--bj-type-control-line); opacity: 0; pointer-events: none; transform: translate(-50%, var(--bj-space-1)); transition: opacity 160ms, transform 160ms; } /* DNA.ROLE.DISCOVERY 상태 전환 160ms */
#mobileNewyear .ny-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
#mobileNewyear button:disabled { cursor: wait; opacity: .6; }

/* 받는 사람이 여는 화면(view.php) — 12열에서 가운데 6칸 */
.newyear-receiver { margin: 0; background: var(--bj-paper); }
.newyear-receiver #mobileNewyear { min-height: 100vh; }
.newyear-receiver .standalone-receiver { width: min(var(--bj-content-max), calc(100% - var(--bj-page-gutter) * 2)); padding-block: var(--bj-space-3) var(--bj-space-4); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.newyear-receiver .standalone-receiver > * { grid-column: 4 / span 6; min-width: 0; }
.newyear-receiver .app-card { border-radius: var(--bj-control-radius); }
.newyear-receiver .receiver-next { margin-top: var(--bj-space-3); text-align: center; }
.newyear-receiver .receiver-next p { margin: 0 0 var(--bj-space-2); color: var(--bj-muted); font-size: var(--bj-type-body); }
.newyear-receiver .bj-primary-action { width: 100%; }
.newyear-receiver .receiver-next__other { margin-top: var(--bj-space-2); }
.newyear-receiver footer { margin-top: var(--bj-space-3); color: var(--bj-muted); font-size: var(--bj-type-caption); text-align: center; letter-spacing: .08em; }

@media (prefers-reduced-motion: reduce) {
  #mobileNewyear .ny-toast { transition: none; }
}

/* 폰 — 축소가 아니라 한 줄로 재배치(DNA.LAYOUT.BREAKPOINT 767px): 미리보기 → 디자인 칸 → 패널 */
@media (max-width: 1024px) and (min-width: 768px) {
  #mobileNewyear .ny-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  body.newyear-page #menu_r2 { display: none; }
  #mobileNewyear .ny-hero { grid-template-columns: minmax(0, 1fr); row-gap: var(--bj-space-3); margin-top: var(--bj-space-3); padding: var(--bj-space-3) 0; }
  #mobileNewyear .ny-hero__photo { position: relative; inset: auto; aspect-ratio: 2 / 1; }
  #mobileNewyear .ny-hero__copy .bj-review-body br { display: none; }
  #mobileNewyear .ny-hero__copy, #mobileNewyear .ny-hero__showcase { grid-column: 1 / -1; }
  #mobileNewyear .ny-hero__actions .bj-review-action { width: 100%; }
  #mobileNewyear .ny-modal { padding: 0; place-items: end stretch; }
  #mobileNewyear .ny-modal__panel { width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; }
  #mobileNewyear .ny-modal__body { padding: var(--bj-space-2) var(--bj-page-gutter-mobile) var(--bj-space-2); }
  #mobileNewyear .ny-modal__foot { padding: var(--bj-space-2) var(--bj-page-gutter-mobile) calc(var(--bj-space-2) + env(safe-area-inset-bottom)); }
  #mobileNewyear .ny-send__ways { grid-template-columns: minmax(0, 1fr); }
  /* 폰 = 적기가 먼저다. 미리보기를 위에 두면 한 화면을 넘겨야 타이핑이 시작된다(실측 694px). 보고 나서 저장하는 차례. */
  #mobileNewyear .ny-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: var(--bj-space-2); }
  #mobileNewyear .ny-make { grid-template-columns: minmax(0, 1fr); }
  #mobileNewyear .ny-make__preview, #mobileNewyear .ny-make__form, #mobileNewyear .ny-make__action { grid-column: 1 / -1; }
  #mobileNewyear .ny-make__preview { position: static; grid-column: 1; grid-row: auto; order: 2; }
  #mobileNewyear .ny-make__form { grid-column: 1; grid-row: auto; order: 1; }
  #mobileNewyear .ny-make__action { grid-column: 1; grid-row: auto; order: 3; margin-top: 0; }
  #mobileNewyear .ny-make__preview .app-card { max-width: 60%; margin-inline: auto; }
  #mobileNewyear .ny-designs__head, #mobileNewyear .ny-subheader { align-items: flex-start; flex-direction: column; }
  .newyear-receiver #mobileNewyear .standalone-receiver { width: calc(100% - var(--bj-page-gutter-mobile) * 2); grid-template-columns: minmax(0, 1fr); }
  .newyear-receiver .standalone-receiver > * { grid-column: 1 / -1; }
}