/* 「누구나 쉽게」 (2026-09-25) - 쉬운 말 · 흐린 단추의 이유 · 지난 값 알림.
   다른 층을 덮지 않도록 이 판에서 새로 만든 이름(.langsel · .why-off · .reuse-note ·
   .pending-help)만 꾸민다. `mobile.css` 뒤에 읽힌다. */

/* 언어 - 약자 세 칸 대신 이름으로 고르는 칸 하나. 기본 모양은 2026-10-01 에 `style.css` 로
   옮겼다(랜딩 · 카드 · 리모컨 · 스토어도 같은 칸을 쓴다). 여기는 앱 머리의 폰 배치만 둔다. */
@media (max-width: 767px) {
  .topbar .langsel { order: 5; margin-left: auto; min-height: 44px; font-size: 14px; }
}

/* 흐린 단추 옆에 서는 「먼저 이것을 하세요」 한 줄 */
.why-off {
  margin: 8px 0 0; padding: 10px 12px; border-radius: 10px;
  /* 글씨는 본문색으로 둔다 - 주황 글씨는 베이지 바탕에서 대비가 약했다(독립 채점). 색은 왼쪽 띠가 맡는다 */
  background: var(--color-orange-100, #fbf2dc); color: var(--text);
  border-left: 4px solid var(--color-orange-500, #ffa726);
  font-size: 14px; line-height: 22px; font-weight: 600;
}
.why-off[hidden] { display: none; }
.asset-row-options .why-off { margin: 0 0 6px; white-space: normal; text-align: left; }

/* 만들기 창 - 지난 상품 값을 불러왔다는 띠. 흐린 글자가 아니라 눈에 띄는 띠와 보통 단추.
   `style.css` 의 `.create-dialog #panel-create > .card`(창 안 카드를 투명하게)보다 세야 해서 id 를 둘 건다. */
#panel-create #reuse-banner.reuse-note {
  border: 1px solid var(--color-orange-500, #ffa726);
  background: var(--color-orange-100, #fbf2dc);
  border-radius: 12px; padding: 14px 16px;
}
#reuse-banner.reuse-note h2 { font-size: 16px; line-height: 24px; margin: 0 0 6px; color: var(--text); }
#reuse-banner.reuse-note .hint { color: var(--text); font-size: 14px; line-height: 22px; margin: 0 0 4px; }
/* 비우기는 되돌릴 수 없어서 주 단추처럼 꽉 채우지 않는다 - 보이되 실수로 누르기 쉬운 크기는 아니게 */
#reuse-banner .reuse-clear {
  margin-top: 8px; min-height: 44px; padding: 0 16px; width: auto;
  border: 1px solid var(--color-orange-500, #ffa726); border-radius: 10px;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 22px; font-weight: 600;
}

/* 등록 대기 카드 - 서버 주소 안내는 접힌 칸 안에 */
.pending-help { margin-top: 8px; }
.pending-help > summary { cursor: pointer; font-size: 14px; line-height: 22px; color: var(--primary); font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 6px; list-style: none; }
.pending-help > summary::-webkit-details-marker { display: none; }
.pending-help > summary::before { content: '▸'; }
.pending-help[open] > summary::before { content: '▾'; }
.pending-help .hint { margin: 4px 0 0; word-break: break-all; }