/* 사파리 */
#app-safari { background: #f2f2f7; }
.sf-tabinfo { font-size: 13px; color: #8e8e93; padding-right: 8px; }
.sf-progress { height: 2px; flex: none; background: #007aff; width: 0; opacity: 0; transition: width .6s ease, opacity .3s; }
.sf-progress.go { width: 100%; opacity: 1; }
.sf-page { padding: 4px 18px 10px; }
.sf-page h3 { font-size: 21px; font-weight: 700; margin: 10px 0 12px; }
.sf-favs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; }
.sf-fav { appearance: none; border: 0; background: none; font: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.sf-fav span { width: 62px; height: 62px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.sf-fav small { font-size: 11.5px; color: #3c3c43; text-align: center; }
.sf-recent { appearance: none; border: 0; background: #fff; font: inherit; color: inherit; width: 100%; text-align: left; display: flex; flex-direction: column; padding: 10px 14px; border-bottom: .5px solid #e5e5ea; cursor: pointer; }
.sf-recent:first-child { border-radius: 12px 12px 0 0; } .sf-recent:last-child { border-radius: 0 0 12px 12px; border-bottom: 0; } .sf-recent:only-child { border-radius: 12px; }
.sf-recent b { font-size: 15px; font-weight: 500; } .sf-recent small { font-size: 12px; color: #8e8e93; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-none { font-size: 14px; color: #8e8e93; }
.sf-site { background: #fff; border-radius: 16px; margin: 14px 0; padding: 26px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.sf-site .sf-big { width: 72px; height: 72px; border-radius: 16px; display: grid; place-items: center; font-size: 32px; font-weight: 700; color: #fff; }
.sf-site b { font-size: 19px; } .sf-site code { font-size: 13px; color: #8e8e93; word-break: break-all; }
.sf-site p { font-size: 14px; line-height: 1.5; color: #3c3c43; margin: 4px 0; }
.sf-open { appearance: none; border: 0; border-radius: 12px; background: #007aff; color: #fff; font: inherit; font-size: 16px; font-weight: 600; padding: 12px 22px; cursor: pointer; margin-top: 6px; }
.sf-bar { flex: none; padding: 8px 14px 4px; background: rgba(249,249,249,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: .5px solid #d1d1d6; }
.sf-addr { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 6px 0 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.1); }
.sf-addr > svg { width: 16px; height: 16px; stroke: #8e8e93; fill: none; stroke-width: 2.2; stroke-linecap: round; flex: none; }
.sf-addr input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 16px; text-align: center; }
.sf-addr input:focus { text-align: left; }
.sf-reload { appearance: none; border: 0; background: none; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; flex: none; }
.sf-reload svg { width: 18px; height: 18px; stroke: #3c3c43; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-tools { flex: none; display: flex; justify-content: space-around; padding: 4px 6px 0; background: rgba(249,249,249,.94); color: #007aff; }
.sf-tools .icon-btn:disabled { color: #c7c7cc; }
.sf-tabs-count { font-size: 11px; font-weight: 700; border: 1.8px solid currentColor; border-radius: 5px; min-width: 22px; height: 22px; display: grid; place-items: center; }
.sf-overview { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; background: #e5e5ea; padding-top: calc(max(env(safe-area-inset-top), 6px) + 40px); }
#app-safari.tabs-open .sf-overview { display: flex; }
.sf-ov-grid { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 10px 16px; align-content: start; }
.sf-card { position: relative; appearance: none; border: 0; padding: 0; background: #fff; border-radius: 12px; overflow: hidden; height: 210px; display: flex; flex-direction: column; text-align: left; font: inherit; color: inherit; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.sf-card.cur { outline: 3px solid #007aff; }
.sf-card .sf-thumb { flex: 1; display: grid; place-items: center; font-size: 34px; font-weight: 700; color: #fff; }
.sf-card small { display: block; padding: 7px 10px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: .5px solid #e5e5ea; }
.sf-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; font-size: 15px; line-height: 1; }
.sf-ov-bar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 18px calc(max(env(safe-area-inset-bottom), 8px) + 8px); background: rgba(249,249,249,.94); }
.sf-ov-bar b { font-size: 15px; font-weight: 600; }

/* 즐겨찾기: 열리지 않는 사이트 */
.sf-fav.nope span { animation: sfNope .35s; }
@keyframes sfNope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* 가상 검색 화면 */
.sf-page.sx { padding: 0; background: #fff; }
.sx-home { padding: 40px 18px 18px; text-align: center; }
.sx-logo { font-size: 30px; font-weight: 900; color: #03c75a; letter-spacing: -1px; margin-bottom: 16px; }
.sx-box { display: flex; align-items: center; border: 2px solid #03c75a; border-radius: 12px; height: 48px; padding: 0 6px 0 14px; background: #fff; }
.sx-box input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 16.5px; }
.sx-box button { appearance: none; border: 0; background: none; color: #03c75a; padding: 6px; cursor: pointer; display: grid; }
.sx-box svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sx-recent { padding: 4px 18px 20px; }
.sx-rh { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; } .sx-rh b { font-size: 15px; } .sx-rh small { font-size: 12px; color: #999; }
.sx-ri { appearance: none; border: 0; background: none; width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 0; font: inherit; color: #222; text-align: left; cursor: pointer; border-bottom: .5px solid #eee; }
.sx-ri svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #aaa; stroke-width: 1.8; stroke-linecap: round; }
.sx-ri span { flex: 1; font-size: 15.5px; } .sx-ri small { font-size: 12px; color: #aaa; }
.sx-top { padding: 12px 14px 0; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; z-index: 1; }
.sx-tabs { display: flex; gap: 18px; padding: 12px 4px 10px; font-size: 14.5px; color: #666; overflow-x: auto; white-space: nowrap; }
.sx-tabs b { color: #03c75a; border-bottom: 2px solid #03c75a; padding-bottom: 8px; margin-bottom: -10px; }
.sx-res { background: #f3f4f6; padding: 8px 0; }
.sx-item { background: #fff; padding: 14px 18px; margin-bottom: 8px; }
.sx-item small { font-size: 12px; color: #03a94f; font-weight: 600; }
.sx-item b { display: block; font-size: 16.5px; color: #1a0dab; margin: 4px 0; line-height: 1.35; }
.sx-item p { margin: 0; font-size: 14px; color: #555; line-height: 1.5; }
.sx-rel { padding: 14px 18px 22px; } .sx-rel b { font-size: 15px; }
.sx-rel div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sx-rel button { appearance: none; border: 1px solid #e2e2e2; background: #fff; border-radius: 16px; padding: 7px 12px; font: inherit; font-size: 13.5px; color: #333; cursor: pointer; }
/* 가상 날씨 화면 */
.sf-page.wx { background: linear-gradient(#4a77b4, #8db3de 55%, #c7dbf0); color: #fff; padding: 0 14px 20px; }
.wx-now { text-align: center; padding: 26px 0 18px; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 4px rgba(0,0,0,.15); }
.wx-now small { font-size: 22px; } .wx-now b { font-size: 84px; font-weight: 200; line-height: 1; margin-left: 20px; } .wx-now span { font-size: 16px; }
.wx-card { background: rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
.wx-h { font-size: 12.5px; opacity: .8; margin-bottom: 8px; }
.wx-hours { display: flex; justify-content: space-between; text-align: center; } .wx-hours div { display: flex; flex-direction: column; gap: 6px; font-size: 14px; } .wx-hours i { font-style: normal; font-size: 20px; }
.wx-day { display: grid; grid-template-columns: 44px 30px 34px 1fr 34px; align-items: center; gap: 6px; padding: 6px 0; font-size: 15.5px; }
.wx-day i { font-style: normal; } .wx-day span:last-child { text-align: right; }
.wx-day em { height: 5px; border-radius: 3px; background: rgba(0,0,0,.15); position: relative; overflow: hidden; } .wx-day em s { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #9fd3f5, #f7d26b); }
.wx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .wx-grid .wx-card { margin: 0; } .wx-grid b { font-size: 24px; font-weight: 500; }
/* 최근 본 페이지 (저장된 기록) */
.bv { background: #fff; border-radius: 16px; margin: 14px 0; padding: 22px 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.bv > small { color: #8e8e93; } .bv-img { font-size: 64px; padding: 14px 0; background: #f6f3ee; border-radius: 14px; margin: 6px 0; }
.bv > b { font-size: 20px; letter-spacing: .5px; } .bv > span { color: #666; font-size: 14px; } .bv-price { font-size: 19px; font-weight: 700; margin: 4px 0 8px; }
.bv-row { display: flex; justify-content: space-between; padding: 9px 0; border-top: .5px solid #eee; font-size: 14.5px; } .bv-row span { color: #888; }
.bv-btn { margin-top: 8px; background: #111; color: #fff; border-radius: 10px; padding: 12px; font-weight: 600; } .bv p { font-size: 12px; color: #999; margin: 6px 0 0; }
.sx-box input { color: #111; } .sf-page.sx { color: #111; }