html {
    scroll-behavior: smooth; /* 부드럽게 스크롤 */
}
body {
    margin: 0px;
    background-color:black;
}
* {
    margin: 1px;
}

/* 모바일 수평 스크롤 금지 */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
            
/* ---------- 링크 클릭시 목표물 깜박임 ------------------ */

.biz:target,
.news:target,
.outstand:target {
    animation: blink 0.8s ease 4 normal;
}

@keyframes blink {
    40% { background-color: dimgray; }
    60% { background-color: hotpink; }
}

/* ---- 목표물 바로가기 윗부분 보이게 ---- */

#news_kh, #biztop, #booktop, #en-back, #bizad, #about, #contact, #error, #global, #manna, #weather, #greet, #fee, #comment, #study, #weather1 {
    scroll-margin-top: 120px;
}

/* 공통 헤더 */
.head {
    grid-area: header;
    background:
        radial-gradient(
            circle,
            rgba(63,100,145,0.77) 61%,
            rgba(180,104,139,0.52) 87%,
            rgba(2,0,36,1) 105%
        );
    background-repeat: no-repeat;
    background-size: cover;
}

/* ----------------- 전체 홈화면 Layout ------------------------ */

.container {
    display: grid;
    grid-template-columns: 22% 1fr 16%;

    /* 기존: 170px 1688px 555px 1100px */
    grid-template-rows: 200px auto auto auto;

    grid-gap: 1px;
    min-height: 100%;
    height: auto;

    grid-template-areas:
        "header header header"
        "left-side center right-side"
        "sponsor sponsor sponsor"
        "footer footer footer";

    align-items: start;
}
@media only screen and (max-width: 767px) {
    .container {
        display: grid;
        grid-template-columns: 100%;

        /* 각 영역 내용에 따라 자동으로 늘어남 */
        grid-template-rows: 200px auto auto auto auto auto;

        grid-gap: 1px;
        min-height: 100%;
        height: auto;

        grid-template-areas:
            "header"
            "left-side"
            "center"
            "right-side"
            "sponsor"
            "footer";

        align-items: start;
    }
}

input, textarea {
    background-color:steelblue;
    color:white;
}
select {
    background-color:steelblue;
    color:white;
}
::placeholder {
  color: white;
}

/* ----------------- 테네시 한인 네트워크 타이틀 -------------------- */

.city-title {
        position:relative;
        top:80px;
        left:30px;
        margin: 0px 0;
        display:flex;
        align-items:center;
}

.menu-toggle-btn{
        margin-left:5px;
        padding:2px 5px;
        font-size:15px;
        cursor:pointer;
        border-radius:6px;
        border:1px solid #888;
        background:#333;
        color:#fff;
        position: fixed;
        top: 46px;
        z-index:9999999999999999;
    }
    
    .menu-toggle-btn:hover{
        background:#555;
    }

.city-title a {
    display: flex;
    align-items: center;     /* 세로 중앙 정렬 */
    text-decoration: none;
}

.city-logo {
    width: 60px;             /* 로고 크기 */
    height: auto;
    margin-right: 12px;
}

.city-text {
    display: flex;
    flex-direction: column;  /* 텍스트 2줄 */
    line-height: 1.2;
    background-color: rgba(83, 91, 173, 0.6);
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-block;
    font-size: 1.4rem;
    font-weight: bold;
    color: white;
}

/* 기본: 데스크탑에서는 보이게 */
.desktop-only {
    display: block;
    position: absolute;
    top: 130px;
    left: 400px;
    color: white;
    font-size: 23px;
    background-color: rgba(34, 79, 110, 0.5); /* 50% 투명 */
    padding:2px;
    border-radius: 5px;
}
.desktop-only .one_line {
    position:absolute;
    top:10px;
    left:540px;
}

/* 모바일 (767px 이하)에서는 숨김 */
@media screen and (max-width: 767px) {
    .desktop-only {
        display: none;
    }
}
 
/* -------------------------- 좌측 ------------------------------ */

.left-side {
    grid-area: left-side;
    background-color: dimgray;
}
.left-side h3 {
    background-image: linear-gradient(to right, gray , black, gray);
    color: white;
}
.ad-1, .poem, .new-biz, .ad-5, .gita, .right-bottom {
    border: 4px solid black;
}
.gita {
    background-color:dimgray;
}
.ad-1 {
    height: 170px;
    margin:5px;
}
.left-bottom {
    background-color:dimgray;
    height: 152px;
}
.left-side ul, .right-side ul {
    padding-left: 5px;
    list-style-type: none;
}
.left-side li {
    font-size: 1.1rem;
}
.poem {
    height: 486px;
    background-color:dimgray;
}
.dicasi {
    font-size:0.8rem;
    padding:4px;
    background-color:lightgray;
}
            
/* -------------------------- 우측 --------------------------------- */

.right-side {
    grid-area: right-side;
    background-color: #D9E4EB;
}
.right-side h3 {
    text-align:center;
    background-image: linear-gradient(to right, gray , black, gray);
    color:white;
}
.right-side h3 .myButton {
    float:right;
}
.new-biz {
    height: 162px;
}
.ad-5 {
    background-color: #D9E4EB;
    height: 770px;
}
.right-bottom {
    height: 296px;
}
            
/* ------------------------스폰서 ------------------------------- */

.sponsor {
    grid-area: sponsor;
    background-image: linear-gradient(to right, gray , black, gray);
}

.sponsor {
    display: grid;
    grid-template-columns: 25% 25% 25%;
    grid-template-rows: 170px 170px 170px;
    grid-gap: 5px;
    grid-template-areas:
        "1-1 1-2 1-3"
        "2-1 2-2 2-3"
        "3-1 3-2 3-3";
                }

@media only screen and (max-width: 767px){
    .sponsor {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 170px 170px 170px 170px 170px 170px 170px 170px 170px;
        grid-gap: 10px;
        grid-template-areas:
            "1-1"
            "1-2"
            "1-3"
            "2-1"
            "2-2"
            "2-3"
            "3-1"
            "3-2"
            "3-3";
    } 
}

/* ----------------------------- 맨 하단 ----------------------------- */

.footer {
    grid-area: footer;
    border-top: 1px solid black;
    color: white;
    background-image: linear-gradient(to right, gray , black, gray);
    padding: 5px;
}

.fleft{
    grid-area: fleft;
}
.fleft h3 {
    text-align: left;
    padding-left: 120px;
}
.fleft ul li {
     list-style: none;
     text-align: left;
     padding-left: 100px;
}
.fcenter {
    grid-area: fcenter;
}
.fright {
    grid-area: fright;
}
.fright ul li {
    text-align: left;
    list-style: none;
    padding-left: 100px;
}

.footer-all {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 400px;
    grid-gap: 3px;
    grid-template-areas:
        "fleft fcenter fright";
    text-align: center;
    padding-top: 25px;
}
.footer-all a {
    text-decoration: none;
    color: white;
}
    
@media only screen and (max-width: 767px){
        .footer-all {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 370px 360px 400px;
            grid-gap: 3px;
            grid-template-areas:
                "fcenter"
                "fleft"
                "fright";
        }
    .fright ul li {
        padding-left: 1px;
        }
    .fright h3 {
        text-align: left;
        padding-left: 40px;
    }
    .fleft ul li {
        padding-left: 1px;
        }
    .fleft h3 {
        text-align: left;
        padding-left: 40px;
    }
}

/* ------------------------- 중간 프레임 ------------------------------ */

.center {
    padding: 1px;
    background-color: black;
}
.center section {
    text-align: center;
}

/* ---------------------- 중간 파일 css ------------------------------ */

.front .news {
    z-index: 10000;
} /* ---- 본문 a tag 살리기 위해 ---- */

.front .news h3 {
    background-image: linear-gradient(to right, dimgray , white, dimgray);
    text-align: center;
    border: black solid 1px;
    border-radius:2px;
}
.front .news h3 a {
    color: white;
}
.front .news a {
    text-decoration: none;
    z-index: 9999;
}
.front .news ul {
    padding-left: 3px;
    list-style: none;
    height: auto;
    overflow: visible;
}

.front .news::after {
    content: "";
    display: block;
    clear: both;
}
.front .news li{
    padding-left: 5px;
}
.biz li a {
    list-style: none;
    font-weight: bold;
}
.biz li {
    margin-bottom: 1px;
    padding-top: 4px;
    padding-bottom: 7px;
}
.biz a {
    text-decoration: none;
}
.1-a {
    grid-area: 1-a;
}
.1-b {
    grid-area: 1-b;
}
.ad1 {
    grid-area: ad1;
}
.2-a {
    grid-area: 2-a;
}
.2-b {
    grid-area: 2-b;
}

.front {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    /* 기존: 561px 235px 561px */
    grid-template-rows: auto auto auto;

    grid-gap: 3px;
    grid-template-areas:
        "1-a 1-b"
        "ad1 ad1"
        "2-a 2-b";

    align-items: stretch;
    height: auto;
}
.news {
    background-color: #D9E4D3;
    /* 내용이 많아지면 자동으로 높이 증가 */
    height: auto;
    min-height: 0;
    overflow: visible;
    box-sizing: border-box;
}
.map {
    width: 27px;
    position: relative;
    top:4px;
}

.front .news .biz .outstand {
    background-color: darkgoldenrod;
    color: white;
    font-weight: bold;
}

.outstand {
    border: 1px solid yellow;
}

.front .news .biz .outstand .k-biz-title {
    color:black;
    background-color:white;
}

.manna {
    border: black solid 3px;
}
            
@media only screen and (max-width: 767px) {
    .front {
        display: grid;
        grid-template-columns: 100%;

        /* 기존의 650px 등의 고정 높이 제거 */
        grid-template-rows: auto auto auto auto auto;

        grid-gap: 3px;
        grid-template-areas:
            "1-a"
            "1-b"
            "ad1"
            "2-a"
            "2-b";

        height: auto;
        align-items: stretch;
    }

    .front .news {
        height: auto;
        min-height: 0;
        overflow: visible;
        z-index: 1000;
    }

    .ad1 {
        min-height: 235px;
        height: auto;
    }

    .adsense01 {
        width: 100%;
    }

    .topnav,
    .dropdown,
    .dropdown-content {
        z-index: 13000;
    }
}
            
.front .news li {
    font-weight:bold;
    background-color:black;
    color: lightgray;
}

.front .news li a {
    color:white;
}

.news .ad {
    background-image: linear-gradient(to right, gray , black, gray);
}

    /* ---- 달팽이 흔적 지난 이야기 ----- */

    .front .news li a:hover {
        background-color:dimgray;
        font-weight:bold;
    }

    /* -------- 구업소록 K-Biz Gold ---------------- */
    
    .k-biz-title {
        background-color:yellow;
        border:2px black solid;
        padding:3px;
    }

    .k-biz-text {
        font-weight:normal;
        font-style:italic;
        padding-left:25px;
        padding-right:25px
    }
    
    /* --------- 구업소록 맨 상단 ------------------- */
            
    .k-city {
        border-radius:7px;
        font-size:1.1rem;
        width:112px;
        height:28px;
        font-weight:bold;
        border:3px solid black;
    }
    .no-ko {
        background-color:black;
        padding:1px;
        border:3px solid red;
        border-radius:5px;
        padding-left:3px;
        padding-right:3px;
        color:black;
    }
    .biz-flag {
        width:38px;
    }
           
    /* -------------- 맨 위로 보내기 --------- */
            
    #myBtn {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 199999;
      font-size: 18px;
      border: none;
      outline: none;
      background-color: red;
      color: white;
      cursor: pointer;
      padding: 15px;
      border-radius: 4px;
    }
    
    #myBtn:hover {
      background-color: #555;
    }
    /* ------ 예쁜 버튼 -------------- */
            
    .myButton {
    	box-shadow: 0px 0px 0px 2px #9fb4f2;
    	background-color:black;
    	border-radius:4px;
    	border:1px solid #4e6096;
    	display:inline-block;
    	cursor:pointer;
    	color:white;
    	font-family:Arial;
    	font-size:0.9rem;
    	padding:1px 3px;
    	text-decoration:none;
    	text-shadow:0px 1px 0px #283966;
    }
    .myButton:hover {
    	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
    	background-color:#476e9e;
    }
    .front .news .biz .myButton:hover {
        color:white;
        background-color:black;
    }
    
    .myButton:active {
    	position:relative;
    	top:1px;
    }
    
/* ------- 아래 전체는 상단 메뉴 CSS -------------------- */


/* --------------------------- 상단 메뉴 --------------------------- */

.topnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8.5%;
    background-color: black;
    z-index: 13000000000000000;
}

/* --------------------------- 링크 --------------------------- */

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
    background: #222;
    color: #fff;
}

/* 활성 */

.topnav .active {
    font-weight: bold;
    padding: 5px;
    padding-bottom: 14px;
    background-color: dimgray;
    border-radius: 6px;
    font-size: 21px;
    color: #00BFFF;
    border: 2px solid lightgray;
}

/* --------------------------- 드롭다운 --------------------------- */

.dropdown {
    float: left;
    position: relative;
    z-index: 9999999999999999999999;
}

.dropdown .dropbtn {
    font-size: 17px;
    border: 2px solid lightgray;
    border-radius: 4px;
    font-weight: bold;
    color: white;
    padding: 14px 7px;
    background-color: black;
    cursor: pointer;
}

.dropdown:hover {
    z-index: 99999999999999999999999999;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 500px;   /* 360 → 500 정도로 증가 */
    background-color: dimgray;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 999999999999999999999999999999999;
    font-weight: bold;
    border: 1px solid #888;
}

.dropdown-content a {
    display: block;
    color: white;
    font-size: 14px;      /* 기존 17px 정도 → 14px */
    padding: 6px 10px;
    white-space: nowrap;  /* 한 줄로 표시 */
}

.dropdown-content a:hover {
    background-color: #555;
    color: yellow;
}

.dropdown:hover .dropdown-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6px;      /* 20px → 6px */
}

/* --------------------------- 반응형 (767px 이하) ------------------------  */

@media screen and (max-width: 767px) {

    .topnav {
        height: auto;
        min-height: 55px;
        overflow: visible;
    }

    .topnav a:not(:first-child),
    .dropdown .dropbtn {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
        font-size: 20px;
    }

    .topnav.responsive {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: black;
        z-index: 999999999;
    }

    .topnav.responsive a.icon {
        position: absolute;
        top: 5px;
        right: 5px;
    }

    .topnav.responsive > a {
        float: none;
        display: block;
        text-align: left;
    }

    .topnav.responsive .dropdown {
        float: none;
        display: block;
        width: 100%;
        position: relative;
        box-sizing: border-box;
        border: 0;
    }

    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        background-color: black;
        color: white;
        border: 1px solid #555;
        border-radius: 0;
        padding: 10px 8px;
        font-size: 15px;
    }

    /* 기본적으로 모바일 드롭다운은 숨김 */
    .topnav.responsive .dropdown-content {
        display: none;
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        background-color: dimgray;
        box-shadow: none;
        border: 0;
        z-index: auto;

        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 0;
        row-gap: 0;
    }

    /*
      모바일에서 버튼을 누른 드롭다운에
      open 클래스를 붙였을 때만 표시
    */
    .topnav.responsive .dropdown.open .dropdown-content {
        display: grid;
    }

    .topnav.responsive .dropdown-content a {
        float: none;
        display: block;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 7px 4px;
        color: white;
        font-size: 13px;
        line-height: 1.3;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-bottom: 1px solid #666;
    }

    /* 모바일에서는 hover만으로 열리지 않게 함 */
    .topnav.responsive .dropdown:hover .dropdown-content {
        display: none;
    }

    .topnav.responsive .dropdown.open:hover .dropdown-content {
        display: grid;
    }
}