@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

/* ─── 계산기 페이지 전용: 워드프레스 헤더/푸터/어드민바 숨김 ──────────────── */
.page-id-drip-calc header,
.page-id-drip-calc footer,
.page-id-drip-calc #wpadminbar,
.page-id-drip-calc .site-header,
.page-id-drip-calc .site-footer,
.page-id-drip-calc nav,
.page-id-drip-calc .nav-bar,
.page-id-drip-calc .main-navigation,
.page-id-drip-calc #masthead,
.page-id-drip-calc #colophon,
.page-id-drip-calc .wp-block-template-part {
  display: none !important;
}
.smi-calc-page-wrap header,
.smi-calc-page-wrap footer,
.smi-calc-page-wrap nav,
.smi-calc-page-wrap .site-header,
.smi-calc-page-wrap .site-footer,
.smi-calc-page-wrap #masthead,
.smi-calc-page-wrap #colophon {
  display: none !important;
}
/* 계산기 페이지 body 패딩 제거 */
body.smi-app-page {
  padding-top: 0 !important;
  margin-top: 0 !important;
  background: #f4f6f4 !important;
}
body.smi-app-page #wpadminbar { display: none !important; }
body.smi-app-page header,
body.smi-app-page .site-header,
body.smi-app-page #masthead,
body.smi-app-page nav.main-navigation,
body.smi-app-page footer,
body.smi-app-page .site-footer,
body.smi-app-page #colophon {
  display: none !important;
}
body.smi-app-page .entry-header,
body.smi-app-page .page-header {
  display: none !important;
}
/* 페이지 콘텐츠 영역 패딩 최소화 */
body.smi-app-page .entry-content,
body.smi-app-page .site-content,
body.smi-app-page #primary,
body.smi-app-page #content,
body.smi-app-page main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
body.smi-app-page .container,
body.smi-app-page .site-inner,
body.smi-app-page .content-area {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}


/* ─── 기본 리셋 ─────────────────────────────────────────────────────────────── */
#smi-drip-wrap *{box-sizing:border-box;margin:0;padding:0}
#smi-drip-wrap{
  font-family:'Noto Sans KR',sans-serif;
  background:#f4f6f4;
  padding:0;
  max-width:100%;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
.smi-inner-pad {
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
}

/* ─── 앱 타이틀바 ──────────────────────────────────────────────────────────── */
.smi-app-titlebar {
  background: #2d6a4f;
  color: #fff;
  padding: 16px 20px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.smi-app-titlebar .smi-app-icon {
  font-size: 22px;
  line-height: 1;
}
.smi-app-titlebar .smi-app-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.smi-app-titlebar .smi-app-subtitle {
  font-size: 12px;
  opacity: 0.75;
  font-weight: 400;
  margin-top: 2px;
}

/* ─── 탭 ────────────────────────────────────────────────────────────────────── */
.smi-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  background:#1b4d38;
  padding:8px 12px;
  margin-bottom:0;
}
.smi-tab{
  flex:1;
  padding:14px 10px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  border:none;
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.65);
  border-radius:10px;
  transition:all .2s;
  font-family:'Noto Sans KR',sans-serif;
  line-height:1.4;
  text-align:center;
}
.smi-tab:first-child{margin-right:6px}
.smi-tab.active{
  background:#fff;
  color:#1b4d38;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.smi-tab small{
  display:block;
  font-size:11px;
  font-weight:400;
  margin-top:2px;
  opacity:0.8;
}
.smi-panel{display:none}
.smi-panel.active{display:block}

/* ─── 메인 레이아웃 (모바일 1열, 데스크탑 2열) ─────────────────────────────── */
.smi-main-layout{
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media(min-width:760px){
  .smi-main-layout{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:16px;
    align-items:start;
  }
}

/* ─── 카드 ──────────────────────────────────────────────────────────────────── */
.smi-card{
  background:#fff;
  border-radius:14px;
  padding:20px;
  margin-bottom:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.07);
}
.smi-card:last-child{margin-bottom:0}
.smi-card h3{
  font-size:16px;
  font-weight:700;
  color:#1a3c2b;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:2px solid #e8f0e9;
}

/* ─── 환율 바 ───────────────────────────────────────────────────────────────── */
.smi-fx-bar{
  background:linear-gradient(135deg,#e8f5e9,#f0faf0);
  border:1.5px solid #a5d6a7;
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.smi-fx-bar label{font-size:14px;font-weight:700;color:#2d6a4f}
.smi-fx-bar span{font-size:13px;color:#555}
.smi-fx-input{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.smi-fx-input input{
  width:110px;
  padding:9px 12px;
  border:2px solid #a5d6a7;
  border-radius:9px;
  font-size:15px;
  font-weight:700;
  text-align:right;
  outline:none;
  font-family:'Noto Sans KR',sans-serif;
}
.smi-fx-input input:focus{border-color:#2d6a4f}
.smi-fx-input span{font-size:14px;font-weight:600;color:#2d6a4f}

/* ─── 그리드 ────────────────────────────────────────────────────────────────── */
.smi-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.smi-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:480px){
  .smi-grid2{grid-template-columns:1fr}
  .smi-grid3{grid-template-columns:1fr 1fr}
}

/* ─── 입력 필드 ─────────────────────────────────────────────────────────────── */
.smi-field{display:flex;flex-direction:column;gap:8px}
.smi-field label{
  font-size:15px;
  font-weight:700;
  color:#333;
  letter-spacing:-0.01em;
}
.smi-input-wrap{position:relative;display:flex;align-items:center}
.smi-input-wrap input,
.smi-input-wrap select{
  width:100%;
  padding:14px 44px 14px 16px;
  border:2px solid #e0e0e0;
  border-radius:12px;
  font-size:16px;
  font-weight:600;
  outline:none;
  transition:border .2s;
  background:#fff;
  color:#222;
  font-family:'Noto Sans KR',sans-serif;
  -webkit-appearance:none;
  min-height:52px;
}
.smi-input-wrap input:focus,
.smi-input-wrap select:focus{border-color:#2d6a4f;background:#fafff8}
.smi-input-wrap .smi-pfx{
  position:absolute;
  left:14px;
  font-size:14px;
  font-weight:700;
  color:#555;
  pointer-events:none;
  z-index:1;
}
.smi-input-wrap .smi-sfx{
  position:absolute;
  right:12px;
  font-size:13px;
  font-weight:600;
  color:#888;
  pointer-events:none;
}
.smi-input-wrap input.has-pfx{padding-left:28px}
.smi-hint{font-size:13px;color:#999;margin-top:2px;line-height:1.4}
.smi-krw-hint{font-size:13px;color:#2d6a4f;font-weight:700;margin-top:2px}

/* ─── 통화 토글 스위치 ─────────────────────────────────────────────────────── */
.smi-cur-toggle{
  display:flex;
  align-items:center;
  gap:10px;
}
.smi-cur-toggle-label{
  font-size:14px;
  font-weight:700;
  color:#555;
}
/* 토글 스위치 */
.smi-cur-switch{
  position:relative;
  width:54px;
  height:28px;
  flex-shrink:0;
}
.smi-cur-switch input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
.smi-cur-slider{
  position:absolute;
  inset:0;
  background:#ccc;
  border-radius:28px;
  cursor:pointer;
  transition:background .2s;
}
.smi-cur-slider:before{
  content:'';
  position:absolute;
  width:22px;
  height:22px;
  left:3px;
  top:3px;
  background:#fff;
  border-radius:50%;
  transition:transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.smi-cur-switch input:checked + .smi-cur-slider{
  background:#2d6a4f;
}
.smi-cur-switch input:checked + .smi-cur-slider:before{
  transform:translateX(26px);
}
.smi-cur-display{
  font-size:15px;
  font-weight:800;
  color:#2d6a4f;
  min-width:36px;
}

/* ─── 티커 검색 ─────────────────────────────────────────────────────────────── */
.smi-ticker-box{
  background:#f0faf0;
  border:1.5px solid #a5d6a7;
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
}
.smi-ticker-box label{
  font-size:14px;
  font-weight:700;
  color:#2d6a4f;
  display:block;
  margin-bottom:10px;
}
/* 세로 배치: 입력창 전체 너비, 조회 버튼 아래 전체 너비 */
.smi-ticker-row{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.smi-ticker-row input{
  width:100%;
  padding:14px 16px;
  border:2px solid #a5d6a7;
  border-radius:12px;
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
  outline:none;
  font-family:'Noto Sans KR',sans-serif;
  min-height:52px;
}
.smi-ticker-row input:focus{border-color:#2d6a4f}
.smi-ticker-btn{
  width:100%;
  padding:14px;
  background:#2d6a4f;
  color:#fff;
  border:none;
  border-radius:12px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s;
  font-family:'Noto Sans KR',sans-serif;
  min-height:52px;
}
.smi-ticker-btn:hover{background:#1b4d38}
.smi-ticker-btn:active{transform:scale(.97)}
.smi-ticker-info{margin-top:10px;font-size:13px;color:#2d6a4f;font-weight:600;min-height:18px;line-height:1.5}
.smi-ticker-err{color:#c0392b;font-size:13px;margin-top:6px}

/* ─── 계산 버튼 ─────────────────────────────────────────────────────────────── */
.smi-calc-btn{
  width:100%;
  padding:16px;
  background:#2d6a4f;
  color:#fff;
  border:none;
  border-radius:12px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  margin-top:10px;
  transition:background .2s,transform .1s;
  font-family:'Noto Sans KR',sans-serif;
  letter-spacing:-0.02em;
}
.smi-calc-btn:hover{background:#1b4d38}
.smi-calc-btn:active{transform:scale(.98)}

/* ─── 세금 안내 ─────────────────────────────────────────────────────────────── */
.smi-tax-note{
  font-size:12px;
  color:#666;
  background:#f0faf0;
  border-radius:9px;
  padding:10px 14px;
  margin-top:10px;
  line-height:1.7;
  border-left:3px solid #2d6a4f;
}

/* ─── 결과 카드 ─────────────────────────────────────────────────────────────── */
.smi-results-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:16px;
}
.smi-res-card{
  border-radius:12px;
  padding:16px;
  border:1.5px solid #e8e8e8;
  background:#fafafa;
}
.smi-res-card.highlight{
  background:#2d6a4f;
  border-color:#2d6a4f;
}
.smi-res-card .smi-res-label{
  font-size:11px;
  font-weight:700;
  color:#999;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.smi-res-card.highlight .smi-res-label{color:#a5d6a7}
.smi-res-card .smi-res-krw{
  font-size:22px;
  font-weight:800;
  color:#1a3c2b;
  line-height:1.2;
  letter-spacing:-0.02em;
}
.smi-res-card.highlight .smi-res-krw{color:#fff}
.smi-res-card .smi-res-usd{font-size:13px;color:#aaa;margin-top:4px}
.smi-res-card.highlight .smi-res-usd{color:rgba(255,255,255,.65)}

/* ─── 비교 섹션 ─────────────────────────────────────────────────────────────── */
.smi-compare{
  padding:16px;
  background:#f8f8f8;
  border-radius:12px;
  border:1.5px solid #eee;
  margin-bottom:16px;
}
.smi-compare-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid #eee;
}
.smi-compare-row:last-child{border-bottom:none;padding-top:12px}
.smi-compare-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px;flex-shrink:0}
.smi-compare-label{font-size:14px;color:#555;display:flex;align-items:center}
.smi-compare-val{text-align:right}
.smi-compare-val .v1{font-size:15px;font-weight:700;color:#222}
.smi-compare-val .v2{font-size:12px;color:#aaa;margin-top:2px}
.smi-advantage{color:#2d6a4f;font-weight:800}

/* ─── 차트 ──────────────────────────────────────────────────────────────────── */
.smi-chart-wrap{position:relative;height:240px;margin-bottom:8px}
.smi-chart-toggle{
  display:flex;
  gap:0;
  border:2px solid #ddd;
  border-radius:9px;
  overflow:hidden;
  width:fit-content;
  margin-bottom:14px;
}
.smi-chart-toggle button{
  padding:8px 18px;
  font-size:13px;
  font-weight:700;
  border:none;
  cursor:pointer;
  background:#fff;
  color:#555;
  transition:all .15s;
  font-family:'Noto Sans KR',sans-serif;
}
.smi-chart-toggle button.active{background:#2d6a4f;color:#fff}

/* ─── 테이블 ────────────────────────────────────────────────────────────────── */
.smi-table-wrap{overflow-x:auto;border-radius:10px;border:1.5px solid #e8e8e8}
.smi-table{width:100%;border-collapse:collapse;font-size:13px}
.smi-table th{
  background:#f0faf0;
  padding:11px 12px;
  text-align:right;
  font-weight:700;
  color:#2d6a4f;
  white-space:nowrap;
}
.smi-table th:first-child{text-align:left}
.smi-table td{
  padding:10px 12px;
  text-align:right;
  border-top:1px solid #f0f0f0;
  color:#333;
  font-size:13px;
}
.smi-table td:first-child{text-align:left;font-weight:700}
.smi-table tr:nth-child(even) td{background:#fafafa}
.smi-table .krw-col{color:#2d6a4f;font-weight:700}
.smi-toggle-table{
  background:none;
  border:2px solid #ddd;
  border-radius:9px;
  padding:8px 16px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  color:#555;
  margin-bottom:12px;
  transition:all .2s;
  font-family:'Noto Sans KR',sans-serif;
}
.smi-toggle-table:hover{border-color:#2d6a4f;color:#2d6a4f}

/* ─── 포트폴리오 종목 카드 ──────────────────────────────────────────────────── */
.smi-port-stocks{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.smi-port-stock{
  background:#f7f5f0;
  border:2px solid #e0e0e0;
  border-radius:12px;
  padding:16px;
  position:relative;
}
.smi-port-stock.loaded{border-color:#a5d6a7;background:#f0faf0}
.smi-port-del{
  position:absolute;
  top:12px;
  right:12px;
  background:#fee;
  border:1.5px solid #fcc;
  border-radius:8px;
  padding:5px 12px;
  font-size:12px;
  color:#c0392b;
  cursor:pointer;
  font-weight:700;
  font-family:'Noto Sans KR',sans-serif;
}
.smi-port-del:hover{background:#fcc}
.smi-add-stock{
  width:100%;
  padding:14px;
  background:#fff;
  border:2.5px dashed #a5d6a7;
  border-radius:12px;
  color:#2d6a4f;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
  font-family:'Noto Sans KR',sans-serif;
}
.smi-add-stock:hover{background:#f0faf0}
.smi-port-limit{font-size:12px;color:#aaa;text-align:center;margin-top:8px}

/* ─── 배당 달력 ─────────────────────────────────────────────────────────────── */
.smi-calendar{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}
@media(max-width:480px){.smi-calendar{grid-template-columns:repeat(3,1fr)}}
.smi-cal-month{
  border-radius:10px;
  padding:10px 6px;
  text-align:center;
  border:1.5px solid #e0e0e0;
  background:#fff;
}
.smi-cal-month.has-div{background:#e8f5e9;border-color:#a5d6a7}
.smi-cal-month .cal-m{font-size:12px;font-weight:700;color:#555;margin-bottom:4px}
.smi-cal-month.has-div .cal-m{color:#2d6a4f}
.smi-cal-month .cal-amt{font-size:11px;color:#2d6a4f;font-weight:700}
.smi-cal-month .cal-tickers{font-size:10px;color:#888;margin-top:2px}

/* ─── STEP 카드 ─────────────────────────────────────────────────────────────── */
.smi-step-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.smi-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e8f0e9;
}
.smi-step-num {
  width: 28px;
  height: 28px;
  background: #2d6a4f;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.smi-step-title {
  font-size: 16px;
  font-weight: 800;
  color: #1a3c2b;
}
.smi-step-desc {
  font-size: 12px;
  color: #888;
  margin-left: auto;
}
.smi-step-badge {
  font-size: 11px;
  background: #e8f5e9;
  color: #2d6a4f;
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 700;
  margin-left: auto;
}
.smi-optional-label {
  font-size: 12px;
  color: #aaa;
  font-weight: 400;
}
.smi-ticker-guide {
  font-size: 13px;
  color: #555;
  background: #f0faf0;
  border-left: 3px solid #2d6a4f;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 12px;
  line-height: 1.6;
}
.smi-fx-note {
  font-size: 12px;
  color: #888;
  margin-top: 8px;
}
/* 환율 바 재정의 */
.smi-step-card .smi-fx-bar {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.smi-step-card .smi-fx-input {
  margin-left: 0;
  width: 100%;
}
.smi-step-card .smi-fx-input input {
  flex: 1;
  width: 100%;
}

/* ─── 면책 고지 ─────────────────────────────────────────────────────────────── */
.smi-disclaimer{
  font-size:12px;
  color:#bbb;
  text-align:center;
  margin-top:20px;
  line-height:1.8;
  padding:12px;
}

/* ─── 로딩 스피너 ───────────────────────────────────────────────────────────── */
.smi-loading{
  display:inline-block;
  width:14px;
  height:14px;
  border:2px solid #a5d6a7;
  border-top-color:#2d6a4f;
  border-radius:50%;
  animation:smi-spin .7s linear infinite;
  vertical-align:middle;
  margin-left:6px;
}
@keyframes smi-spin{to{transform:rotate(360deg)}}

/* ─── 모바일 전용 조정 ──────────────────────────────────────────────────────── */
@media(max-width:600px){
  #smi-drip-wrap{padding:12px}
  .smi-card{padding:16px;border-radius:12px}
  .smi-card h3{font-size:15px;margin-bottom:14px}
  .smi-tab{padding:12px 8px;font-size:13px}
  .smi-res-card .smi-res-krw{font-size:19px}
  .smi-calc-btn{font-size:16px;padding:16px}
  .smi-field label{font-size:15px}
  .smi-input-wrap input,
  .smi-input-wrap select{font-size:16px;padding:14px 44px 14px 16px;min-height:52px}
  .smi-ticker-row input{font-size:16px;min-height:52px}
  .smi-ticker-btn{font-size:15px;min-height:52px}
  .smi-fx-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .smi-fx-input{margin-left:0;width:100%}
  .smi-fx-input input{width:100%;font-size:16px}
}


.smi-sub-note{margin-bottom:16px}
.smi-res-inline{
  font-size:16px !important;
  line-height:1.4 !important;
  word-break:keep-all;
}