@charset "UTF-8";

  :root{
    --bg:#0b1020;
    --card:#111a33;
    --card2:#0f1730;
    --line:rgba(255,255,255,.10);
    --text:rgba(255,255,255,.92);
    --muted:rgba(255,255,255,.70);
    --muted2:rgba(255,255,255,.55);
    --danger:#ff5a6a;
    --ok:#2ee59d;
    --shadow: 0 18px 60px rgba(0,0,0,.45);
    --radius:18px;
    --radius2:14px;
  }
  * {box-sizing: border-box;}

  .area_calculator {background-color:#FDFAFF; padding:80px 0 80px;}
  .title_wrap {text-align:center;}
  .title_wrap h1 {margin-bottom:10px;}
  .title_wrap .sub {font-size:18px; color:#777;}
  
  .cont_wrap {max-width:1200px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:34px;}
  .cont_wrap .card {width:800px; background-color:#fff; border: 1px solid #D9D9D9; border-radius:20px;}
  .cont_wrap .card .btn_wrap {display:flex; gap:12px; margin-top:40px; margin-bottom:0;}
  .cont_wrap .card .btn_wrap .btn_general {background-color:#6B3BE9; color: #fff; padding:0 70px; height: 50px; line-height: 140%;}
  .cont_wrap .card .btn_wrap .btn_general:hover {background-color:#555;}
  .cont_wrap .card .btn_wrap .btn_ghost {border: 1px solid #CFD1D4; padding:0px 65px 0 55px; color: #333; height: 50px; line-height: 140%;}
  .cont_wrap .card .btn_wrap .btn_ghost:hover {background-color:#f3f3f3;}
  .cont_wrap .box_area {padding: 40px 120px;}
  .cont_wrap .field {display:flex; align-items:center; gap:60px;}
  .cont_wrap .field label {width:200px; font-size: 16px; font-weight: 500; color: #222;}
  .cont_wrap .field label .light {font-weight:300;}
  .cont_wrap .field_list {display: flex; gap: 20px; flex-direction: column;}
  .cont_wrap .card.result {border:1px solid #6B3BE9;}
  .result .main_box {display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid #eee; padding-bottom: 24px;}
  .result .main_box .title {font-size:18px; font-weight:600; color:#333; text-align:left;}
  .result .main_box .result {font-size:36px; font-weight:700; color:#6B3BE9; text-align:right;}
  .result .main_box .result::placeholder {font-size:36px; font-weight:500; color:#6B3BE9;}
  .result .main_box .number {font-size: 36px; font-weight: 700; color: #6B3BE9;}
  .result .main_box .unit {font-size: 24px; font-weight: 400; color: #6B3BE9; position:relative; top:-3px;}
  .result .detail_box .number {font-size: 15px; font-weight:500; color: #444;}
  .result .detail_box .unit {font-size: 15px; font-weight: 400; color: #444;}
  .result .detail_box {margin-top:30px;}
  .result .detail_box .tit {font-size:15px; font-weight:500; color:#444; margin-bottom:8px;}
  .result .detail_box .box {background-color:#F7F7F7; margin-top:15px; display:flex; flex-direction:row; justify-content:space-between; border-radius:15px; align-items:center; padding:20px;}
  .result .detail_box .box .title {font-size:14px; font-weight:400; color:#777;}
  .result .detail_box .box .result {font-size:20px; font-weight:500; color:#444; text-align:right;}
  
  .notice {text-align: center;}
  .notice .txt {font-size:14px; color:#999;}
  
  
  .error {color:#FF8A7B; font-size:14px; text-align:right; padding-top:6px;}
  input[type="text"].error {text-align:left;}


  .input_wrap {width:100%; position:relative; display:flex; align-items:center;}
  .input_wrap .input {width: 100%; padding-right: 45px; /* 단위 텍스트 공간 확보 */ box-sizing: border-box;}
  .input_wrap .unit {position: absolute; right: 12px; font-size: 15px; color: #777; pointer-events: none;}
  input[type="text"] {width: 100%; padding: 12px; font-size: 16px; border-radius: 8px; border: 1px solid #ccc; background-color: #FAFAFA; color: #333;}
  input[type="text"]::placeholder {color: #aaa;}
  input[type="text"]:focus {border-color: #6B3BE9; background-color:#fff; outline:none;}
  input.error {border: 1px solid #ff5a6a; background-color: #fff0f0;}


  .calculator .area_function .feature_grid {display:grid !important; grid-template-columns:repeat(2, 1fr) !important; gap:24px;}
  .calculator .area_function .feature_card.wide {grid-column: 1 / -1; flex-direction: row !important;}
  .calculator .area_function .title_wrap .title {align-items:center !important;}

  .ic_info {display:block; width:18px; height:20px;}
  .ic_com {background:url(../images/calculator/ic_com.svg) -200px -600px;}
  .ic_refresh {background:url(../images/calculator/ic_refresh.svg) 0 0 no-repeat; width:18px; height:20px; display:inline-block; position:relative; top:3px; margin-right:6px; }

  .tooltip {position:relative; top:0px; margin-left:4px;}
  .tooltip span.ic_info {cursor: pointer; display: inline-block; margin-left: 1px; letter-spacing: 0; vertical-align: middle;}
  .tooltip span.ic_info > span.tooltip_cont {z-index: 2; display: none; font-size: 13px; line-height: 1.6; white-space: normal;}
  .tooltip span.ic_info:hover > span {z-index: 100; display: block; position: absolute; top: -4px; left: 32px; background-color: #333; width: 285px; color: #ddd; word-break: normal; word-break: break-word; border-radius: 8px; padding: 12px; letter-spacing: -0.5px; font-weight: normal; text-indent: 0;}
  .tooltip span.ic_info:hover > span i {position: absolute; width: 0; height: 0; /*border-width: 10px 6px 10px 0;*/}
  .tooltip span.ic_info:hover > span i.tail_left {top: 8px; left: -8px; z-index: 2; border-right: 8px solid #333; border-top: 8px solid transparent; border-bottom: 8px solid transparent;}
  .tooltip span.ic_info:hover > span.right {display: block; position: absolute; top: 24px; left: -279px; background: #333; width: 285px; color: #ddd; border-radius: 8px; padding: 16px; font-weight: normal; text-indent: 0; text-align: left;}
  .tooltip span.ic_info:hover > span.right i {top: -8px; right: 12px; z-index: 2; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #333;}
  .tooltip span.ic_info:hover > span.top {top: -88px; left: 32px; min-height: 110px;}

  .footer {max-width:960px; margin: 14px auto 0; color: var(--muted2); font-size: 12px; padding: 0 4px; line-height: 1.55;}



    @media (max-width: 480px) {
    .cont_wrap .card {width: 100%;}
    .cont_wrap .box_area {padding: 40px 30px;}
    .cont_wrap .field {align-items:flex-start; flex-direction: column; gap: 10px;}
    .result .detail_box .box {border-radius:14px;}
    .btn_wrap .btn_ghost,
    .btn_wrap .btn_general {font-size:16px;}

    .notice .txt {font-size:12px;}
    .calculator .area_function .feature_grid {grid-template-columns:1fr !important; gap:32px;}
    .calculator .area_function .feature_card.wide {flex-direction: column !important;}

    }