/* 파일 상품 페이지 (annual-leave-excel 등) — build.py build_shop_* */
.shop { max-width: 820px; }
.shop-kicker { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ui-primary); letter-spacing: -.01em; }
.shop h1 { font-size: 32px; }
.shop-buy {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 18px;
  margin: 22px 0 8px; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: 16px;
  background: var(--ui-surface); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px var(--glow-1);
}
.shop-price b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.shop-price span { font-size: 13px; color: var(--ui-sub); }
.shop-go {
  justify-self: end; min-width: 220px; padding: 14px 22px; border: 0; border-radius: 12px;
  background: var(--ui-primary); color: var(--ui-on-primary); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.shop-go:hover:not(:disabled) { background: var(--ui-primary-hover); }
.shop-go:active:not(:disabled) { transform: translateY(1px); }
.shop-go:disabled { opacity: .55; cursor: default; }
.shop-go.owned { background: #188038; }
.shop-msg, .shop-fine { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--ui-sub); }
.shop-msg { color: var(--ui-text); font-weight: 600; }
.shop-msg.bad { color: var(--ui-danger); }
.shop-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; }
.shop-points li { margin: 0; padding-left: 14px; border-left: 3px solid var(--ui-primary); font-size: 14px; line-height: 1.6; color: var(--ui-sub); }
.shop-points b { display: block; color: var(--ui-text); font-size: 15px; }
.shop-shots figure { margin: 0 0 22px; }
.shop-shots img { display: block; width: 100%; height: auto; border: 1px solid var(--ui-border); border-radius: 10px; background: #fff; }
.shop-shots figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ui-sub); }
.shop details { padding: 12px 0; border-bottom: 1px solid var(--ui-border); }
.shop summary { font-weight: 700; cursor: pointer; }
.shop details p { margin: 8px 0 0; color: var(--ui-sub); }
.shop-legal { margin-top: 30px; font-size: 12.5px; color: var(--ui-muted); }
@media (max-width: 640px) {
  .shop h1 { font-size: 26px; }
  .shop-buy { grid-template-columns: 1fr; }
  .shop-go { justify-self: stretch; min-width: 0; }
  .shop-points { grid-template-columns: 1fr; }
}
.shop-how ol { margin: 0; padding: 0; list-style: none; }
.shop-how li { margin: 0 0 34px; }
.shop-how h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 18px; }
.shop-how h3 span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ui-primary); color: var(--ui-on-primary); font-size: 14px; font-weight: 800; }
.shop-how p { margin: 0 0 12px; color: var(--ui-sub); font-size: 14.5px; line-height: 1.65; }
.shop-how-lead { margin-top: -4px; }
.shop-how img { display: block; width: 100%; height: auto; border: 1px solid var(--ui-border); border-radius: 10px; background: #fff; }

/* 바로엑셀 (excel.html·<slug>-excel.html) — build.py build_excel_hub·build_free_excel */
.xl-hub { max-width: 1120px; margin: 0 auto; padding: 8px 28px 40px; }
.xl-hero { max-width: 720px; margin: 0 auto; padding: 28px 0 26px; text-align: center; }
.xl-hero h1 { margin: 0 0 14px; font-size: 40px; line-height: 1.2; letter-spacing: -.035em; }
.xl-hero h1 em { font-style: normal; color: var(--ui-primary); }
.xl-hero p { margin: 0; color: var(--ui-sub); font-size: 16px; line-height: 1.65; }
.xl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px 24px; margin: 30px 0 10px; }
.xl-card { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; outline: 0; }
.xl-th { position: relative; display: block; aspect-ratio: 16 / 10; margin-bottom: 10px; overflow: hidden;
  border: 1px solid var(--ui-border); border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 28px rgba(0,0,0,.07); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.xl-th img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.xl-card:hover .xl-th, .xl-card:focus-visible .xl-th { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 18px 40px rgba(0,0,0,.13); }
.xl-card:focus-visible .xl-th { box-shadow: 0 0 0 3px var(--ui-primary), 0 18px 40px rgba(0,0,0,.13); }
.xl-badge { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px;
  background: #188038; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.xl-badge.paid { background: var(--ui-text); color: var(--ui-bg); }
.xl-name { padding: 0 2px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.xl-desc { padding: 0 2px; font-size: 14px; line-height: 1.55; color: var(--ui-sub); }
.xl-ai { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin: 6px 0 0; padding: 18px 22px;
  border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px var(--glow-1); transition: border-color .15s var(--ease); }
.xl-ai:hover { border-color: var(--ui-primary); }
.xl-ai-k { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ui-primary); color: var(--ui-on-primary); font-weight: 800; font-size: 15px; }
.xl-ai-t b { display: block; font-size: 16px; letter-spacing: -.02em; }
.xl-ai-t small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ui-sub); line-height: 1.5; }
.xl-ai-go { font-weight: 800; color: var(--ui-primary); white-space: nowrap; }
.xl-faq { max-width: 760px; margin: 40px auto 0; }
.xl-faq details { padding: 12px 0; border-bottom: 1px solid var(--ui-border); }
.xl-faq summary { font-weight: 700; cursor: pointer; }
.xl-faq details p { margin: 8px 0 0; color: var(--ui-sub); }
.shop .xl-dl { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; text-align: center; }
.shop .xl-dl small { font-weight: 600; opacity: .8; font-size: 13px; }
.xl-demo { margin: 22px 0 6px; }
.xl-demo img { display: block; width: 100%; height: auto; border: 1px solid var(--ui-border); border-radius: 12px; background: #fff; }
.xl-demo figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ui-sub); }
.xl-notes-h { margin: 6px 0 8px; font-size: 16px; }
.xl-notes { margin: 0; padding-left: 18px; color: var(--ui-sub); font-size: 14.5px; line-height: 1.7; }
.shop .xl-ai { margin: 34px 0 0; }
.shop .xl-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 18px; margin-top: 14px; }
.shop .xl-name { font-size: 15px; }
.shop .xl-desc { font-size: 13px; }
@media (max-width: 640px) {
  .xl-hub { padding: 4px 16px 32px; }
  .xl-hero h1 { font-size: 30px; }
  .xl-grid { grid-template-columns: 1fr; }
  .xl-ai { grid-template-columns: auto 1fr; }
  .xl-ai-go { grid-column: 1 / -1; justify-self: end; }
}
.shop a.xl-dl, .shop a.xl-dl:visited { color: var(--ui-on-primary); }
.xl-card { min-width: 0; }
.xl-th img { max-width: 100%; }
.xl-notes li { margin: 0 0 6px; }

/* 엑셀 상세페이지 (build.py xl_doc) — 양식 상세와 같은 틀: 위 도구막대 · 가운데 실제 시트 · 아래 작성 안내(.guide)
   시트는 assets/xlweb.js 가 그린다. 시트 탭은 엑셀처럼 표 아래 */
.tb-ico.xl { border-color: #9fcfb4; }
.tb-ico.xl::before { left: 5px; right: 5px; top: 7px; height: 20px; background:
  linear-gradient(90deg, transparent 0 32%, #107c41 32% 38%, transparent 38%) ,
  repeating-linear-gradient(#107c41 0 1.5px, transparent 1.5px 5px); opacity: .75; }
.xl-main { width: min(1280px, calc(100% - 32px)); margin: 18px auto 34px; }
.xl-main .shop-msg { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface)); color: var(--ui-text); font-size: 14px; text-align: center; }
.xl-main .shop-msg.bad { background: color-mix(in srgb, var(--ui-danger) 12%, var(--ui-surface)); }
.xw { position: relative; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--ui-border), 0 18px 50px rgba(0,0,0,.22); }
.xw-grid { max-height: calc(100vh - 190px); min-height: 320px; overflow: auto; background: #fff; overscroll-behavior: auto; }
.xw-grid:focus { outline: 0; }
.xw-gw { position: relative; }
.xw-gw.xw-more-r::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; pointer-events: none; background: linear-gradient(to left, rgba(15, 23, 42, .16), rgba(15, 23, 42, 0)); }
.xw-more { position: absolute; right: 14px; bottom: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 4px; padding: 7px 13px 7px 14px; border: 1px solid #0b5e31; border-radius: 999px; background: linear-gradient(#18924f, #0f7a3f); color: #fff; font: 600 12.5px/1 system-ui, sans-serif; letter-spacing: -.01em; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 12px rgba(16, 124, 65, .35), 0 1px 2px rgba(0,0,0,.2); cursor: pointer; }
.xw-more:hover { background: linear-gradient(#1aa059, #108444); }
.xw-more[hidden] { display: none; }
.xw-grid table { border-collapse: collapse; table-layout: fixed; width: max-content; color: #1f2937; font-size: 12.5px; font-family: "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; }
.xw-grid td { padding: 0 6px; border: 1px solid #e2e4e8; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-variant-numeric: tabular-nums; }
/* 고정 열(sticky): border-collapse 에선 칸 테두리를 표가 원래 자리에 그려서, 밀면 첫 열 왼쪽 테두리 폭(1~2px)만큼 뒤 칸이 비쳤다
   → 고정 칸은 왼쪽 테두리를 없애(표 바깥 끝이라 선이 없어도 됨) 칸 배경이 끝까지 덮게 */
.xw-grid td.xw-pin { border-left-width: 0; }
.xw-grid td.in { cursor: text; box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .25); }
.xw-grid td.in:hover { box-shadow: inset 0 0 0 2px #d97706; }
.xw-grid tr.xw-gap td { height: 18px; color: #9ca3af; text-align: center; font-size: 11px; background: #f9fafb; }
.xw-edit { width: 100%; height: 100%; min-height: 22px; padding: 0 4px; border: 2px solid #107c41; border-radius: 0; outline: 0; background: #fff; color: #111; font: inherit; }
@keyframes xw-flash { from { background-color: #fde68a; } }
.xw-grid td.xw-flash { animation: xw-flash 1.2s ease-out; }
/* 아래 시트 탭 (엑셀과 같은 자리·모양) */
.xw-bar { display: flex; align-items: stretch; gap: 8px; min-height: 38px; padding: 0 8px; border-top: 1px solid #d6d9de; background: #f3f4f6; color: #374151; }
.xw-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
.xw-tabs button { margin-top: -1px; padding: 0 16px; border: 0; border-top: 2px solid transparent; background: none; color: #4b5563; font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.xw-tabs button:hover { background: #e9ebee; color: #111827; }
.xw-tabs button[aria-selected="true"] { border-top-color: #107c41; background: #fff; color: #107c41; font-weight: 700; box-shadow: 1px 0 0 #d6d9de, -1px 0 0 #d6d9de; }
.xw-month { align-self: center; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #111827; font: inherit; font-size: 13px; }
.xw-st { align-self: center; margin-left: auto; padding-right: 4px; color: #6b7280; font-size: 12.5px; white-space: nowrap; }
.xl-gif { overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--ui-border), 0 18px 50px rgba(0,0,0,.22); }
.xl-gif img { display: block; width: 100%; height: auto; }
.xl-cap { margin: 10px 0 0; color: var(--ui-muted); font-size: 12.5px; text-align: center; }
/* 아래 안내: 양식 상세 .guide 를 그대로 쓰고 엑셀 화면 카드만 */
.guide.xl-guide { width: min(1080px, calc(100% - 32px)); max-width: none; }
.xl-guide .g-preview img { aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; background: #fff; }
.xl-guide .g-steps b, .xl-guide .g-tips b { display: block; color: var(--ui-text); }
.toolbar a.tb-btn { text-decoration: none; }
.xl-guide .cards.xl-cards { margin-top: 12px; }
.tb-btn.shop-go.owned { background: #188038; border-color: #188038; }
.tb-btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 640px) { .xw-grid { max-height: calc(100vh - 170px); } .xw-grid table { font-size: 12px; } .xw-tabs button { padding: 0 12px; } }
.xl-guide .g-preview { width: 260px; }
/* 표 밖 빈 곳도 엑셀처럼 격자 (표 칸은 흰 바탕이라 가려진다) */
.xw-grid { background-color: #fff; background-image: linear-gradient(to right, #e2e4e8 1px, transparent 1px), linear-gradient(to bottom, #e2e4e8 1px, transparent 1px); background-size: 72px 21px; background-attachment: local; }

/* 인쇄: 시트만 (탭·'열 더' 버튼·그늘 없이), A4 한 장 서식은 폭에 맞춰 — 잠긴 AI 엑셀은 made.css 처럼 안내만 */
@media print {
  .xl-main { width: auto; margin: 0; }
  .xw { overflow: visible; border-radius: 0; box-shadow: none; }
  .xw-bar, .xw-more { display: none !important; }
  .xw-gw.xw-more-r::after { display: none; }
  .xw-grid { max-height: none; min-height: 0; overflow: visible; background-image: none; }   /* 빈 칸 격자 무늬는 화면에서만 */
  .xw-grid table { zoom: 1 !important; }
  .xw-fit .xw-grid table { zoom: .9 !important; }
  .xw-grid td.in { box-shadow: none; }
  .xw, .xw * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.mk-locked .xl-main { display: none !important; }
}

/* 요약 탭 알림 말풍선 (xlweb.js tabTip) — 탭 위에 꼬리 달린 초록 말풍선 */
.xw-tip { position: absolute; z-index: 6; max-width: calc(100% - 16px); padding: 8px 13px; border: 1px solid #0b5e31; border-radius: 10px; background: linear-gradient(#18924f, #0f7a3f); color: #fff; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: left; box-shadow: 0 8px 20px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .18); cursor: pointer; animation: xw-tip-in .35s ease-out .6s both; }
.xw-tip::after { content: ""; position: absolute; left: 16px; bottom: -7px; width: 12px; height: 12px; border-right: 1px solid #0b5e31; border-bottom: 1px solid #0b5e31; background: #0f7a3f; transform: rotate(45deg); }
.xw-tipping .xw-more { bottom: 66px; }
.xw-tip:hover { background: linear-gradient(#1aa059, #108444); }
@keyframes xw-tip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media print { .xw-tip { display: none !important; } }
/* 칸을 고치는 동안(휴대폰 키보드가 올라와 화면이 줄 때) 아래 고정 받기 막대가 입력칸을 가리지 않게 */
body:has(.xw-edit) .mk-lockbar { display: none; }