/* 스위스 카드 사용 가이드 — 날씨 페이지와 같은 흰 바탕·파란 선택·얇은 구분선. 전부 #cd-app 아래 */
#cd-app { --b: #2563eb; --b-soft: #eff4ff; --ink: #1f2328; --ink2: #6b7280; --line: #e5e7eb;
  --ok: #15803d; --ok-bg: #ecfdf3; --cond: #b45309; --cond-bg: #fff7e6; --no: #b91c1c; --no-bg: #fef2f2; --chk: #4b5563; --chk-bg: #f3f4f6;
  max-width: 680px; margin: 0 auto; padding: 20px 16px 48px; background: #fff; color: var(--ink);
  font-family: "Noto Sans KR", system-ui, sans-serif; line-height: 1.55; word-break: keep-all; }
#cd-app * { box-sizing: border-box; }
#cd-app button { font: inherit; cursor: pointer; }
#cd-app .cd-h1 { margin: 4px 0 4px; font-size: 1.45rem; font-weight: 800; }
#cd-app .cd-lead { margin: 0 0 8px; font-size: .9rem; color: var(--ink2); }
#cd-app .cd-sec { padding-top: 22px; }
#cd-app .cd-h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1.1rem; font-weight: 800; }
#cd-app .cd-h2 > span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--b); color: #fff; font-size: .8rem; }
#cd-app .cd-h2 em { font-style: normal; color: var(--b); }
#cd-app .cd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#cd-app .cd-chips.sub { margin-top: 8px; padding: 8px; border-radius: 12px; background: var(--b-soft); }
#cd-app .cd-chip { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .9rem; }
#cd-app .cd-chip.on { background: var(--b); border-color: var(--b); color: #fff; font-weight: 700; }
#cd-app .cd-chips.sub .cd-chip { padding: 6px 12px; font-size: .84rem; }
#cd-app .cd-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#cd-app .cd-facts > div { padding: 10px 0; }
#cd-app .cd-facts > div + div { padding-left: 12px; border-left: 1px solid var(--line); }
#cd-app dt { font-size: .78rem; color: var(--ink2); }
#cd-app dd { margin: 2px 0 0; font-size: .95rem; font-weight: 700; }
#cd-app .st { display: inline-block; flex: none; padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
#cd-app .st.ok { color: var(--ok); background: var(--ok-bg); }
#cd-app .st.cond { color: var(--cond); background: var(--cond-bg); }
#cd-app .st.no { color: var(--no); background: var(--no-bg); }
#cd-app .st.chk { color: var(--chk); background: var(--chk-bg); }
#cd-app .cd-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
#cd-app .cd-uses details { border-bottom: 1px solid var(--line); }
#cd-app .cd-uses details:first-child { border-top: 1px solid var(--line); }
#cd-app .cd-uses summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; }
#cd-app .cd-uses summary::-webkit-details-marker { display: none; }
#cd-app .cd-uses summary .nm { flex: 1; font-weight: 700; }
#cd-app .cd-uses summary .nm small { display: block; font-weight: 400; font-size: .8rem; color: var(--ink2); }
#cd-app .cd-uses summary::after { content: "›"; color: var(--ink2); transition: transform .15s; }
#cd-app .cd-uses details[open] summary::after { transform: rotate(90deg); }
#cd-app .cd-uses ul { margin: 0 0 12px; padding-left: 18px; font-size: .88rem; color: var(--ink); }
#cd-app .cd-uses li + li { margin-top: 3px; }
#cd-app .cd-tabs { display: flex; border-bottom: 1px solid var(--line); }
#cd-app .cd-tab { flex: 1; padding: 10px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink2); font-size: .98rem; }
#cd-app .cd-tab.on { color: var(--b); border-bottom-color: var(--b); font-weight: 700; }
#cd-app .cd-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
#cd-app .cd-verdict > div { padding: 10px 12px; border-radius: 12px; background: var(--b-soft); }
#cd-app .cd-verdict p { margin: 0; font-size: .78rem; color: var(--ink2); }
#cd-app .cd-verdict strong { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: .92rem; }
#cd-app .cd-table-wrap { overflow-x: auto; }
#cd-app .cd-table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: .86rem; }
#cd-app .cd-table th, #cd-app .cd-table td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
#cd-app .cd-table thead th { font-size: .76rem; color: var(--ink2); font-weight: 600; }
#cd-app .cd-table tbody th { white-space: nowrap; font-weight: 700; }
#cd-app .cd-break { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border-left: 3px solid var(--b); font-size: .92rem; font-weight: 700; }
#cd-app .cd-break small { display: block; margin-top: 2px; font-weight: 400; font-size: .78rem; color: var(--ink2); }
#cd-app .cd-warn { margin: 0; }
#cd-app .cd-warn > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
#cd-app .cd-warn > div:first-child { border-top: 1px solid var(--line); }
#cd-app .cd-warn dt { font-size: .8rem; font-weight: 700; color: var(--b); }
#cd-app .cd-warn dd { font-size: .92rem; font-weight: 500; }
#cd-app .cd-foot { margin-top: 24px; }
#cd-app .cd-small { margin: 8px 0 0; font-size: .78rem; color: var(--ink2); }
#cd-app .cd-src { margin: 4px 0 0; padding-left: 18px; font-size: .75rem; color: var(--ink2); }
#cd-app .cd-src a { color: inherit; word-break: break-all; }
@media (max-width: 480px) {
  #cd-app .cd-facts { grid-template-columns: 1fr; }
  #cd-app .cd-facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
/* 꾸밈 (10-19, 콘텐츠 담당 '레이아웃이 너무 단순') — 섹션을 흰 카드로 */
#cd-app { background: #f5f7fb; }
#cd-app .cd-sec { margin-top: 14px; padding: 18px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
#cd-app .cd-facts { border: 0; border-radius: 12px; background: var(--b-soft); }
#cd-app .cd-facts > div { padding: 10px 12px; }
#cd-app .cd-facts > div + div { border-left-color: #dbe5fb; }
#cd-app .cd-uses summary .nm { font-size: .98rem; }
#cd-app .cd-warn > div { padding: 10px 12px 10px 14px; margin-top: 8px; border: 0; border-radius: 10px; background: #fff7ed; border-left: 3px solid #f59e0b; }
#cd-app .cd-warn > div:first-child { border-top: 0; margin-top: 0; }
#cd-app .cd-warn dt { color: #b45309; }
#cd-app .cd-foot { margin-top: 18px; padding: 0 4px; }
#cd-app .cd-foot summary { cursor: pointer; }
@media (max-width: 480px) {
  #cd-app .cd-facts > div + div { border-top-color: #dbe5fb; }
}
/* 아이콘 — 여행코스와 같은 Material Symbols Rounded (packages/shared/lib/icons.ts 세트) */
#cd-app {
  --i-card: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%20-960%20960%20960%27%3E%3Cpath%20d%3D%27M140-160q-24%200-42-18t-18-42v-520q0-24%2018-42t42-18h680q24%200%2042%2018t18%2042v520q0%2024-18%2042t-42%2018H140Zm0-342h680v-129H140v129Z%27%2F%3E%3C%2Fsvg%3E");
  --i-storefront: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%20-960%20960%20960%27%3E%3Cpath%20d%3D%27M201-120q-33%200-56.5-23.5T121-200v-318q-23-21-35.5-54t-.5-72l42-136q8-26%2028.5-43t47.5-17h556q27%200%2047%2016.5t29%2043.5l42%20136q12%2039-.5%2071T841-518v318q0%2033-23.5%2056.5T761-120H201Zm368-440q27%200%2041-18.5t11-41.5l-22-140h-78v148q0%2021%2014%2036.5t34%2015.5Zm-180%200q23%200%2037.5-15.5T441-612v-148h-78l-22%20140q-4%2024%2010.5%2042t37.5%2018Zm-178%200q18%200%2031.5-13t16.5-33l22-154h-78l-40%20134q-6%2020%206.5%2043t41.5%2023Zm540%200q29%200%2042-23t6-43l-42-134h-76l22%20154q3%2020%2016.5%2033t31.5%2013Z%27%2F%3E%3C%2Fsvg%3E");
  --i-compare-arrows: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%20-960%20960%20960%27%3E%3Cpath%20d%3D%27M367-320H120q-17%200-28.5-11.5T80-360q0-17%2011.5-28.5T120-400h247l-75-75q-11-11-11-27.5t11-28.5q12-12%2028.5-12t28.5%2012l143%20143q6%206%208.5%2013t2.5%2015q0%208-2.5%2015t-8.5%2013L348-188q-12%2012-28%2011.5T292-189q-11-12-11.5-28t11.5-28l75-75Zm226-240%2075%2075q11%2011%2011%2027.5T668-429q-12%2012-28.5%2012T611-429L468-572q-6-6-8.5-13t-2.5-15q0-8%202.5-15t8.5-13l144-144q12-12%2028-11.5t28%2012.5q11%2012%2011.5%2028T668-715l-75%2075h247q17%200%2028.5%2011.5T880-600q0%2017-11.5%2028.5T840-560H593Z%27%2F%3E%3C%2Fsvg%3E");
  --i-warning: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%20-960%20960%20960%27%3E%3Cpath%20d%3D%27M92-120q-9%200-15.65-4.13Q69.7-128.25%2066-135q-4.17-6.6-4.58-14.3Q61-157%2066-165l388-670q5-8%2011.5-11.5T480-850q8%200%2014.5%203.5T506-835l388%20670q5%208%204.58%2015.7-.41%207.7-4.58%2014.3-3.7%206.75-10.35%2010.87Q877-120%20868-120H92Zm392.18-117q12.82%200%2021.32-8.68%208.5-8.67%208.5-21.5%200-12.82-8.68-21.32-8.67-8.5-21.5-8.5-12.82%200-21.32%208.68-8.5%208.67-8.5%2021.5%200%2012.82%208.68%2021.32%208.67%208.5%2021.5%208.5Zm0-111q12.82%200%2021.32-8.63%208.5-8.62%208.5-21.37v-164q0-12.75-8.68-21.38-8.67-8.62-21.5-8.62-12.82%200-21.32%208.62-8.5%208.63-8.5%2021.38v164q0%2012.75%208.68%2021.37%208.67%208.63%2021.5%208.63Z%27%2F%3E%3C%2Fsvg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%20-960%20960%20960%27%3E%3Cpath%20d%3D%27M483.18-280q12.82%200%2021.32-8.63%208.5-8.62%208.5-21.37v-180q0-12.75-8.68-21.38-8.67-8.62-21.5-8.62-12.82%200-21.32%208.62-8.5%208.63-8.5%2021.38v180q0%2012.75%208.68%2021.37%208.67%208.63%2021.5%208.63Zm-3.2-314q14.02%200%2023.52-9.2T513-626q0-14.45-9.48-24.22-9.48-9.78-23.5-9.78t-23.52%209.78Q447-640.45%20447-626q0%2013.6%209.48%2022.8%209.48%209.2%2023.5%209.2Zm.29%20514q-82.74%200-155.5-31.5Q252-143%20197.5-197.5t-86-127.34Q80-397.68%2080-480.5t31.5-155.66Q143-709%20197.5-763t127.34-85.5Q397.68-880%20480.5-880t155.66%2031.5Q709-817%20763-763t85.5%20127Q880-563%20880-480.27q0%2082.74-31.5%20155.5Q817-252%20763-197.68q-54%2054.31-127%2086Q563-80%20480.27-80Z%27%2F%3E%3C%2Fsvg%3E");
}
#cd-app .cd-h2 > span { width: 30px; height: 30px; border-radius: 9px; font-size: 0; }
#cd-app .cd-h2 > span::before { content: ""; width: 18px; height: 18px; background: #fff; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
#cd-app #cd-h-card > span { --ic: var(--i-card); }
#cd-app #cd-h-use > span { --ic: var(--i-storefront); }
#cd-app #cd-h-cmp > span { --ic: var(--i-compare-arrows); }
#cd-app #cd-h-warn > span { --ic: var(--i-warning); background: #f59e0b; }
#cd-app .cd-warn dt { display: flex; align-items: center; gap: 5px; }
#cd-app .cd-warn dt::before { content: ""; flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--i-info) center/contain no-repeat; mask: var(--i-info) center/contain no-repeat; }
#cd-app {
  --i-shopping: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%20-960%20960%20960%27%3E%3Cpath%20d%3D%27M220-80q-24%200-42-18t-18-42v-520q0-24%2018-42t42-18h110v-10q0-63%2043.5-106.5T480-880q63%200%20106.5%2043.5T630-730v10h110q24%200%2042%2018t18%2042v520q0%2024-18%2042t-42%2018H220Zm170-640h180v-10q0-38-26-64t-64-26q-38%200-64%2026t-26%2064v10Zm210%20180q13%200%2021.5-8.5T630-570v-90h-60v90q0%2013%208.5%2021.5T600-540Zm-240%200q13%200%2021.5-8.5T390-570v-90h-60v90q0%2013%208.5%2021.5T360-540Z%27%2F%3E%3C%2Fsvg%3E");
  --i-bus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%20-960%20960%20960%27%3E%3Cpath%20d%3D%27M302-202v39q0%2017.92-12.56%2030.46T258.94-120q-17.94%200-30.44-12.54T216-163v-68q-29-16-42.5-46T160-341v-397q0-73.66%2076.5-107.83T481-880q166%200%20242.5%2034T800-738v397q0%2034-13.5%2064T744-231v68q0%2017.92-12.56%2030.46T700.94-120q-17.94%200-30.44-12.54T658-163v-39H302Zm-82-329h520v-173H220v173Zm106.06%20219Q349-312%20365-328.06q16-16.06%2016-39T364.94-406q-16.06-16-39-16T287-405.94q-16%2016.06-16%2039T287.06-328q16.06%2016%2039%2016Zm308%200Q657-312%20673-328.06q16-16.06%2016-39T672.94-406q-16.06-16-39-16T595-405.94q-16%2016.06-16%2039T595.06-328q16.06%2016%2039%2016Z%27%2F%3E%3C%2Fsvg%3E");
  --i-train: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%20-960%20960%20960%27%3E%3Cpath%20d%3D%27M160-340v-380q0-41%2019-71.5t58.5-50q39.5-19.5%20100-29T480-880q86%200%20146.5%209t99%2028.5Q764-823%20782-793t18%2073v380q0%2059-40.5%2099.5T660-200l26%2026q15%2015%207%2034.5T663-120q-6%200-11.5-2t-10.5-7l-71-71H390l-71%2071q-5%205-10.5%207t-11.5%202q-21%200-29.5-19.5T274-174l26-26q-59%200-99.5-40.5T160-340Zm60-205h234v-155H220v155Zm294%200h226v-155H514v155ZM335-315q23%200%2039-16t16-39q0-23-16-39t-39-16q-23%200-39%2016t-16%2039q0%2023%2016%2039t39%2016Zm290%200q23%200%2039-16t16-39q0-23-16-39t-39-16q-23%200-39%2016t-16%2039q0%2023%2016%2039t39%2016Z%27%2F%3E%3C%2Fsvg%3E");
  --i-car: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%20-960%20960%20960%27%3E%3Cpath%20d%3D%27M200-204v44q0%2016.67-11.74%2028.33Q176.53-120%20159.76-120q-16.76%200-28.26-11.67Q120-143.33%20120-160v-304q0-4.67.5-9.33.5-4.67%202.5-9.67l78-236q6-19%2021.75-30T258-760h444q19.5%200%2035.25%2011T759-719l78%20236q2%205%202.5%209.67.5%204.66.5%209.33v304q0%2016.67-11.74%2028.33Q816.53-120%20799.76-120%20783-120%20771-131.96T759-161v-43H200Zm3-330h554l-55-166H258l-55%20166Zm82.76%20220q23.24%200%2038.74-15.75Q340-345.5%20340-368q0-23.33-15.75-39.67Q308.5-424%20286-424q-23.33%200-39.67%2016.26Q230-391.47%20230-368.24q0%2023.24%2016.26%2038.74%2016.27%2015.5%2039.5%2015.5ZM675-314q23.33%200%2039.67-15.75Q731-345.5%20731-368q0-23.33-16.26-39.67Q698.47-424%20675.24-424q-23.24%200-38.74%2016.26-15.5%2016.27-15.5%2039.5%200%2023.24%2015.75%2038.74Q652.5-314%20675-314Z%27%2F%3E%3C%2Fsvg%3E");
  --i-money: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%20-960%20960%20960%27%3E%3Cpath%20d%3D%27M100-160q-24.75%200-42.37-17.63Q40-195.25%2040-220v-430q0-12.75%208.68-21.38%208.67-8.62%2021.5-8.62%2012.82%200%2021.32%208.62%208.5%208.63%208.5%2021.38v430h670q12.75%200%2021.38%208.68%208.62%208.67%208.62%2021.5%200%2012.82-8.62%2021.32-8.63%208.5-21.38%208.5H100Zm120-120q-24.75%200-42.37-17.63Q160-315.25%20160-340v-400q0-24.75%2017.63-42.38Q195.25-800%20220-800h640q24.75%200%2042.38%2017.62Q920-764.75%20920-740v400q0%2024.75-17.62%2042.37Q884.75-280%20860-280H220Zm100-60q0-42-29-71t-71-29v100h100Zm440%200h100v-100q-42%200-71%2029t-29%2071Zm-220-80q50%200%2085-35t35-85q0-50-35-85t-85-35q-50%200-85%2035t-35%2085q0%2050%2035%2085t85%2035ZM220-640q42%200%2071-29t29-71H220v100Zm640%200v-100H760q0%2042%2029%2071t71%2029Z%27%2F%3E%3C%2Fsvg%3E");
}
#cd-app .cd-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--b-soft); color: var(--b); }
#cd-app .cd-ic::before { content: ""; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
#cd-app .ic-shop { --ic: var(--i-shopping); }
#cd-app .ic-airport { --ic: var(--i-bus); }
#cd-app .ic-transit { --ic: var(--i-train); }
#cd-app .ic-taxi { --ic: var(--i-car); }
#cd-app .ic-atm { --ic: var(--i-money); }
#cd-app [hidden] { display: none !important; }
/* 머리말 (10-27, 담당자 '너무 쨍해' — 연한 회색 카드 + 작은 '정보' + 오른쪽 아래 그림) */
#cd-app .cd-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: 0 0 14px; padding: 22px 16px 16px 20px; border-radius: 20px; background: #EAF0FD; }
#cd-app .cd-hd-tx { min-width: 0; padding-bottom: 6px; }
#cd-app .cd-hd-lb { margin: 0 0 8px; font-size: .8rem; font-weight: 600; color: #8b8f96; }
#cd-app .cd-h1 { display: block; margin: 0; padding: 0; background: none; color: #191f28; font-size: 1.45rem; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; }
#cd-app .cd-lead { margin: 8px 0 0; padding: 0; background: none; font-size: .86rem; color: #8b8f96; }
#cd-app .cd-art { flex: none; width: 108px; height: auto; }
@media (min-width: 900px) {
  #cd-app .cd-hd { margin-bottom: 28px; padding: 40px 40px 28px 44px; border-radius: 24px; }
  #cd-app .cd-h1 { font-size: 2rem; }
  #cd-app .cd-lead { font-size: .95rem; }
  #cd-app .cd-art { width: 168px; }
}