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; }
}

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

.container {
    display: grid;
    grid-template-columns: 22% 1fr 16%;
    grid-template-rows: 170px 1688px 550px 640px;
    grid-gap: 1px;
    height: 100%;
    grid-template-areas:
        "header header header"
        "left-side center right-side"
        "sponsor sponsor sponsor"
        "footer footer footer";
}
@media only screen and (max-width: 767px){
    .container {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 175px 1700px 3530px 1660px 1627px 1580px;
        grid-gap: 1px;
        height: 100%;
        grid-template-areas:
            "header"
            "left-side"
            "center"
            "right-side"
            "sponsor"
            "footer";
    } 
}
input, textarea {
    background-color:steelblue;
    color:white;
}
select {
    background-color:steelblue;
    color:white;
}
::placeholder {
  color: white;
}
/* Google CSE 검색창 스타일 */
input.gsc-input {
    background-color: steelblue !important; /* 입력창 배경 */
}
.google_search {
     width:320px;
}

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

.city-title {
        position: absolute;
        top:110px;
        left:30px;
        margin: 0px 0;
}

.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;
}

.city-text {
    background-color: rgba(0, 0, 0, 0.3);
    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: 100px;
    left: 470px;
    color: white;
    font-size: 25px;
}

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

/* 공통 헤더 */
.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;
}

.head h1 {
    text-align: center;
}

/* 지역별 배경 이미지 */
.head-nash   { background-image: url('https://www.tnkn.fun/images/nash-img.jpg'); }
.head-clarks { background-image: url('https://www.tnkn.fun/images/clarks-img.jpg'); }
.head-mem    { background-image: url('https://www.tnkn.fun/images/mem-img.jpg'); }
.head-knox   { background-image: url('https://www.tnkn.fun/images/knox-img.jpg'); }
.head-chat   { background-image: url('https://www.tnkn.fun/images/chat-img.jpg'); }
.head-atl    { background-image: url('https://www.tnkn.fun/images/atl-img.jpg'); }
.head-us     { background-image: url('https://www.tnkn.fun/images/us-img.jpg'); }
        
/* -------------------------- 좌측 ------------------------------ */

.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 330px;
            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;
}
.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: 1fr 1fr;
    grid-template-rows: 561px 235px 561px;
    grid-gap: 3px;
    grid-template-areas:
        "1-a 1-b"
        "ad1 ad1"
        "2-a 2-b";
}
.news {
    background-color: #D9E4D3;
}
.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%;
        grid-template-rows: 650px 650px 435px 650px 650px;
        grid-gap: 3px;
        grid-template-areas:
            "1-a"
            "1-b"
            "ad1"
            "2-a"
            "2-b";
    }
    .adsense01 {
        width: 100%;
    }
    .front .news {
    z-index: 1000;
    } /* ---- 본문 a tag 살리기 위해 ---- */
    
    .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 Plus ---------------- */
    
    .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:100px;
        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:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
    	background-color:#7892c2;
    	border-radius:4px;
    	border:1px solid #4e6096;
    	display:inline-block;
    	cursor:pointer;
    	color:#ffffff;
    	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 -------------------- */

/* --------------------------- 메뉴바 기본 스타일 --------------------------- */

.kbiz-menu1, .kbiz-menu2 {
    display: inline-block;
}

/* --------------------------- 상단 메뉴 기본 스타일 ------------------------ */

.topnav {
    position: fixed;
    top: 0;            /* 화면 상단 */
    left: 0;
    width: 100%;       /* 가로 꽉 차게 */
    height:7%;
    background-color: black;
    z-index: 130000; /* 상단 메뉴가 다른 요소에 가려지지 않게 */
}

/* --------------------------- 상단 메뉴 링크 --------------------------- */

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

/* 활성 메뉴 스타일 */

.topnav .active {
    font-weight: bold;
    padding: 10px;
    background-color: black;
    border-radius: 6px;
    font-size: 27px;
    color: lightblue;
    border: 2px solid lightgray;
}

/* 햄버거 메뉴 아이콘 */

.topnav .icon {
    display: none;
    background-color: black;
    font-size: 1.3rem;
}

/* --------------------------- 드롭다운 메뉴 --------------------------- */

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 17px;
    border: 2px solid lightgray; /* 드롭다운 버튼 테두리 */
    border-radius: 4px;
    font-weight: bold;
    color: white;
    padding: 14px 7px;
    background-color: inherit;
    font-family: inherit;
    outline: none;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: peachpuff;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 130000; /* 상단 메뉴 가려지지 않게 */
    font-weight: bold;
}

.dropdown-content a {
    display: block;
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    text-align: left;
}

/* 호버 효과 */

.topnav a:hover,
.dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
}

.dropdown-content a:hover {
    background-color: lightsalmon;
    color: black;
}

/* 드롭다운 메뉴 보이기 */

.dropdown:hover .dropdown-content {
    display: block;
}

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

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

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

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

    /* ⭐ 핵심: relative → fixed 유지 */
    .topnav.responsive {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999999;
    }

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

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

    .topnav.responsive .dropdown {
        float: none;
        width: 100%;
        border: 2px solid yellow;
    }

    /* ⭐ 드롭다운이 절대 안 가려지게 */
    .topnav.responsive .dropdown-content {
        position: relative;
        width: 100%;
        background-color: dimgray;
        z-index: 1000000;
    }

    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
        background-color: black;
        color: white;
        border: none;
    }
}