/* 韓国くらし計算機 - 和風ベーシック */
:root{--ai:#1f4e79;--ai-d:#163a5c;--shu:#d9572b;--shu-l:#fdf0ea;--kin:#b8860b;--washi:#f7f4ee;--sumi:#333;--usuzumi:#6b6b6b;--sen:#ddd6c8;--white:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--washi);color:var(--sumi);font:15px/1.85 "Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic","YuGothic","Meiryo",sans-serif;letter-spacing:.02em}
a{color:var(--ai)}
a:hover{color:var(--shu)}
.topbar{background:var(--ai-d);color:#dfe8f2;font-size:12px}
.topbar .in-w{display:flex;justify-content:space-between;padding:4px 16px}
.in-w{max-width:1080px;margin:0 auto}
header.hd{background:var(--white);border-bottom:3px solid var(--ai)}
header.hd .in-w{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--sumi)}
.brand-mark{width:42px;height:42px;border-radius:50%;background:var(--shu);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px;box-shadow:inset 0 0 0 3px #fff,0 0 0 2px var(--shu)}
.brand-name{font-size:21px;font-weight:700;letter-spacing:.06em;line-height:1.2}
.brand-sub{display:block;font-size:11px;color:var(--usuzumi);font-weight:400;letter-spacing:0}
.rate-chip{font-size:12px;border:1px solid var(--sen);background:var(--washi);padding:4px 10px;border-radius:3px;color:var(--usuzumi)}
.rate-chip b{color:var(--shu)}
nav.gnav{background:var(--ai)}
nav.gnav ul{list-style:none;margin:0 auto;padding:0 8px;display:flex;overflow-x:auto;max-width:1080px}
nav.gnav a{display:block;color:#fff;text-decoration:none;padding:10px 16px;font-size:14px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.15)}
nav.gnav a:hover{background:var(--ai-d);color:#fff}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;padding:20px 16px 40px}
main{min-width:0}
.pankuzu{font-size:12px;color:var(--usuzumi);margin:0 0 10px}
.pankuzu a{color:var(--usuzumi)}
article.kiji{background:var(--white);border:1px solid var(--sen);padding:26px 28px}
h1{font-size:24px;line-height:1.5;margin:0 0 8px;color:var(--sumi);padding-bottom:10px;border-bottom:2px solid var(--sen)}
h1 small{display:block;font-size:13px;color:var(--shu);font-weight:700;margin-bottom:2px}
.date{font-size:12px;color:var(--usuzumi);margin:6px 0 16px}
.date span+span{margin-left:12px}
.lead{margin:0 0 18px}
.wakaru{border:2px solid var(--ai);border-radius:4px;padding:12px 16px 6px;margin:18px 0;background:#f5f9fd}
.wakaru p.t{margin:0 0 4px;font-weight:700;color:var(--ai)}
.wakaru ul{margin:0;padding-left:1.3em}
.mokuji{background:var(--washi);border:1px solid var(--sen);padding:12px 18px;margin:20px 0;font-size:14px}
.mokuji p{margin:0 0 4px;font-weight:700}
.mokuji ol{margin:0;padding-left:1.5em}
h2{font-size:19px;margin:38px 0 14px;padding:10px 14px;background:var(--ai);color:#fff;border-radius:3px;line-height:1.5}
h3{font-size:16px;margin:26px 0 10px;padding:2px 0 4px 12px;border-left:5px solid var(--shu);border-bottom:1px dotted var(--sen)}
.tool{border:3px double var(--ai);background:#fbfcfe;padding:18px 20px;margin:22px 0}
.tool-t{margin:0 0 12px;font-weight:700;color:var(--ai);font-size:16px}
.row{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dotted var(--sen)}
.row[hidden]{display:none}
.row>label,.row>.lb{font-weight:700;font-size:14px}
.in{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.in input,.in select{font:inherit;font-size:16px;padding:8px 10px;border:1px solid #bfb8a8;border-radius:3px;background:#fff;min-width:0;flex:1 1 160px}
.in .u{font-size:13px;color:var(--usuzumi)}
.in .hint{flex-basis:100%;font-size:12px;color:var(--ai)}
.radio{display:flex;gap:6px;flex-wrap:wrap}
.radio label{border:1px solid #bfb8a8;border-radius:3px;padding:6px 12px;cursor:pointer;background:#fff;font-size:14px}
.radio label:has(input:checked){background:var(--ai);color:#fff;border-color:var(--ai)}
.radio input{margin:0 4px 0 0}
.help{font-size:12px;color:var(--usuzumi);margin:4px 0 0;grid-column:2}
.btn{display:block;width:100%;max-width:320px;margin:16px auto 0;padding:12px;border:0;border-radius:30px;background:var(--shu);color:#fff;font:inherit;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 3px 0 #a8401d}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #a8401d}
.kekka{margin-top:20px;background:#fff;border:1px solid var(--sen)}
.kekka-h{background:var(--shu-l);color:var(--shu);font-weight:700;padding:8px 14px;border-bottom:1px solid #f3cdbd}
.kekka-b{padding:6px 14px 12px}
.kekka-tbl{width:100%;border-collapse:collapse}
.kekka-tbl th{text-align:left;font-weight:400;color:var(--usuzumi);padding:8px 0;width:45%;vertical-align:top;border:0}
.kekka-tbl td{text-align:right;padding:8px 0;font-variant-numeric:tabular-nums;border:0}
.kekka-tbl tr+tr{border-top:1px dotted var(--sen)}
.kekka-tbl tr.big td{font-size:21px;font-weight:700;color:var(--shu)}
.kekka-tbl small,.small{font-size:12px;color:var(--usuzumi)}
.yen{display:block;font-size:13px;color:var(--ai);font-weight:400}
.point{position:relative;border:1px solid #e9c46a;background:#fffbea;padding:14px 16px 10px 16px;margin:20px 0;border-radius:3px}
.point::before{content:"ポイント";position:absolute;top:-11px;left:12px;background:var(--kin);color:#fff;font-size:12px;font-weight:700;padding:1px 10px;border-radius:2px}
.chui{border:1px solid #e3a99a;background:#fff4f1;padding:14px 16px 10px;margin:20px 0;border-radius:3px;position:relative}
.chui::before{content:"注意";position:absolute;top:-11px;left:12px;background:var(--shu);color:#fff;font-size:12px;font-weight:700;padding:1px 10px;border-radius:2px}
.shiki{background:var(--washi);border-left:4px solid var(--ai);padding:10px 14px;font-weight:700}
.tbl-w{overflow-x:auto;margin:12px 0}
table.hyo{border-collapse:collapse;width:100%;font-size:14px;background:#fff}
table.hyo th,table.hyo td{border:1px solid var(--sen);padding:7px 10px}
table.hyo thead th{background:#eef3f8;color:var(--ai-d)}
table.hyo caption{text-align:left;font-weight:700;padding:4px 0}
.qa dl{margin:0}
.qa dt{font-weight:700;margin-top:16px;padding-left:2em;text-indent:-2em}
.qa dt::before{content:"Q.";color:var(--ai);font-weight:700;margin-right:.6em}
.qa dd{margin:6px 0 0;padding:0 0 12px 2em;text-indent:-2em;border-bottom:1px dotted var(--sen)}
.qa dd::before{content:"A.";color:var(--shu);font-weight:700;margin-right:.6em}
.sanko{font-size:13px}
.sanko li{margin:3px 0}
.kanren{margin-top:24px}
.kanren-t{font-weight:700;border-bottom:2px solid var(--ai);padding-bottom:4px;margin:0 0 10px}
.kanren ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.kanren a{display:block;background:#fff;border:1px solid var(--sen);padding:10px 12px;text-decoration:none;color:var(--sumi);font-size:14px;line-height:1.6}
.kanren a:hover{border-color:var(--shu)}
.kanren a b{display:block;color:var(--ai)}
aside.side>section{background:#fff;border:1px solid var(--sen);margin-bottom:18px}
aside.side h4{margin:0;background:var(--sumi);color:#fff;font-size:14px;padding:8px 12px;letter-spacing:.08em}
aside.side ol,aside.side ul{margin:0;padding:8px 12px 10px 2em;font-size:14px}
aside.side li{padding:5px 0;border-bottom:1px dotted var(--sen)}
aside.side li:last-child{border-bottom:0}
.side-rate{padding:10px 12px;font-size:14px}
.side-rate b{font-size:20px;color:var(--shu)}
.side-p{padding:10px 12px;font-size:13px;margin:0}
.home-hero{background:var(--white);border:1px solid var(--sen);padding:24px 26px;margin-bottom:20px;background-image:linear-gradient(90deg,rgba(31,78,121,.06) 1px,transparent 1px);background-size:24px 24px}
.home-hero h1{border:0;padding:0;font-size:24px}
.home-hero p{margin:8px 0 0}
.cat-h{font-size:17px;margin:26px 0 10px;padding-left:10px;border-left:6px solid var(--ai)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card{display:block;background:#fff;border:1px solid var(--sen);border-top:4px solid var(--ai);padding:14px 16px;text-decoration:none;color:var(--sumi)}
.card:hover{border-top-color:var(--shu)}
.card b{display:block;font-size:16px;color:var(--ai);margin-bottom:4px}
.card span{font-size:13px;color:var(--usuzumi);line-height:1.6;display:block}
.card .tag{display:inline-block;font-size:11px;background:var(--washi);border:1px solid var(--sen);padding:0 6px;margin-bottom:6px;color:var(--usuzumi)}
footer.ft{background:var(--sumi);color:#ccc;font-size:13px;padding:24px 0}
footer.ft .in-w{padding:0 16px}
footer.ft a{color:#fff}
footer.ft nav{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0}
.prose{background:#fff;border:1px solid var(--sen);padding:24px 28px}
@media (max-width:860px){.layout{grid-template-columns:1fr}aside.side{order:2}}
@media (max-width:560px){article.kiji,.prose{padding:18px 14px}.row{grid-template-columns:1fr}.help{grid-column:1}h1{font-size:20px}h2{font-size:17px}.brand-name{font-size:18px}}

.yoten{margin:4px 0 16px}
.yoten th{width:36%;background:#eef3f8;text-align:left;font-weight:700;color:var(--ai-d)}