/*
 * =============================================================================
 * Project  : MyLink-Kit (A so3i_plays project)
 * Author   : so3i
 * Homepage : https://so3i.github.io
 * License  : MIT
 * Version  : 1.0.0 (2025.09)
 * =============================================================================
 * 저를 존중한다면 이 저작자 표시 주석 부분을 지우지 말아주세요.
 * 이 프로젝트는 비개발자를 위하여 만들어졌습니다.
 * If you respect my work, please do not delete this author attribution comment.
 * This project was created for non-developers.
 * 
 * =============================================================================
 * 수정 방법 / How to Customize
 * =============================================================================
 * 페이지를 커스텀하기 좋게 필요한 부분마다 주석 처리를 해놨습니다.
 * CSS 문법을 잘 모르신다면 주석으로 지정한 위치만 수정하세요.
 * This page has comments at various points to facilitate customization.
 * If you are unfamiliar with CSS syntax, 
 * please only modify the locations specified in comments.
 * =============================================================================
*/


* {
    margin : 0;
    padding : 0;
}

img {
    border : 0;
}

a {
    text-decoration : none;
    color : inherit;
}

button, input, textarea {
    font-family : inherit;
    font-size : inherit;
    outline : none;
    border : none;
    background : none;
}

body, html {
    height: 100dvh;
    width: 100vw; 
}
body { 
    font-family: var(--main-font);
    font-optical-sizing: auto;
}

/*
https://fonts.google.com/
*/

h1, h2, h3, h4, h5 {
    margin : 0;
    padding : 0;
    line-height: 1.5;
}

ul, li {
    list-style:none;
}

.wrapper {
    display:flex;
    justify-content: center;
    align-items: center;
    min-height:100vh;
    box-sizing: border-box;
    background: linear-gradient(45deg, #DBE1EE, #FFF8FA);
    /*
        background: linear-gradient(45deg, #DBE1EE, #FFF8FA);

        이것은 배경색을 지정한 부분입니다. 
        현재 대각선 방향으로 두가지 색을 그라데이션으로 포현하게끔 세팅되어있습니다.
        그냥 색상만 변경하고자 하시면 #DBE1EE, #FFF8FA를 각각 선호하는 색상 코드로 입력하세요.
        그라데이션 없이 단색으로 지정하려면 background: #FFFFFF; 이렇게 바로 색상코드만 입력하시면 됩니다.

        background: linear-gradient(45deg, #DBE1EE, #FFF8FA);

        This section defines the background color. 
        It's currently set to display a diagonal gradient between two colors. 
        If you just want to change the colors, replace #DBE1EE and #FFF8FA with your preferred color codes. 
        If you want a solid color instead of a gradient, simply enter the color code like this: background: #FFFFFF;
    */
}

.content {
    width:90vw;
    max-width:400px;
    text-align:center;
    border-radius: 50% 50% 2em 2em / 28% 28% 2em 2em;
    /*
     * border-radius: 50% 50% 2em 2em / 28% 28% 2em 2em;
        페이지 내에 보이는 모서리가 둥근 하얀 컨텐츠박스를 표현한 부분입니다. 
        %값을 조정해서 모양을 변경할 수 있지만 방법을 모르신다면 귀찮은 작업이 될 수 있습니다. 
        그냥 모서리를 고르게 둥근 정도로 하고 싶다면 2em을, 모서를 뾰족하게 하고 싶다면 0으로 써넣으세요. 

        This section defines the rounded corners of the white content box visible on the page. 
        You can adjust the % values to change the shape, but it might be tedious if you're not familiar with the method. 
        If you simply want evenly rounded corners, use 2em, or if you want sharp corners, use 0.
    
        ex ) border-radius : 0;
        ex ) border-radius : 2em;
    */
    background: rgba(255, 255, 255, 0.8);
    /*
        배경색에 살짝 투명도를 주기 위해 rgba를 사용했지만 사용법은 같습니다. 
        원하는 색상으로 변하면 컨텐츠 박스의 배경색이 변경됩니다. 
        현재는 하얀색(#FFFFFF)로 지정되어있습니다. 
        네번재에 있는 0.8은 투명도를 의미합니다.
    
        RGBA is used to add slight transparency to the background color, but the usage is the same. 
        Changing to your desired color will change the background color of the content box. 
        It's currently set to white (#FFFFFF). The 0.8 in the fourth position represents the opacity.
    */
    padding: clamp(40px, 3vw, 50px) clamp(30px, 2vw, 30px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .content { 
        max-width: none;
    }
}

.infoArea {
}

.thumbBox {
    margin: 0 auto max(5px, 1vh);
}

.thumbBox img {
    width : 25vw;
    max-width : 150px;
    border-radius : 50%;
    object-fit: cover;
    margin : 0 auto;
    display:block;
    border:5px #8C7EAF solid;
    /*
     *  border:5px #8C7EAF solid;
        이것은 썸네일의 테두리 색상을 지정합니다. 
        5px 은 선의 굵기, #8C7EAF 는 색상코드를 의미합니다. 
        원하는대로 테두리의 굵기를 조정하시거나 원하는 색상으로 변경하세요.
    
        This specifies the border color of the thumbnail. 
        5px indicates the thickness of the line, and #8C7EAF means the color code. 
        You can adjust the border thickness or change to your desired color as you wish.
    */
}

.userName {
    font-size: clamp(18px, 4vw, 24px);
    font-family: var(--point-font);
    font-weight : 500;
    color : #333;
    /*  
     * color : #333;
     username의 글씨 색상을 지정합니다. 색상코드 #333333 과 동일합니다.
    specifies the text color of the username. It's equivalent to the color code #333333.
    */
    line-height:1;
}

.pageSubtitle {
    font-size: clamp(12px, 2vw, 16px);
    font-weight : 200;
    color : #8C7EAF;
    /*
        pageSubtitle의 글씨 색상을 지정합니다.
    
        This specifies the text color for pageSubtitle.
    */
}

.sloganText {
    font-size: clamp(14px, 2.5vw, 16px);
    margin:clamp(8px, 2vh, 16px) clamp(14px, 3vh, 21px) ;
    padding: clamp(10px, 2vw, 30px) 0;
    font-weight : 00;
    color : #555;
    /*
        sloganText의 글씨 색상을 지정합니다.
        This specifies the text color for sloganText.
    */
    border-top: 1px #cecece solid;
    /*
        sloganText 영역 위에 직선 하나를 표시하는 부분입니다.
        만약 선을 없애고 싶다면 해당 줄을 지우고, 굵기와 색상을 변경하고 싶다면 px과 색상코드를 활용해 하실 수 있습니다.
    
        This displays a straight line above the sloganText area. 
        If you want to remove the line, delete this line of code. 
        If you want to change the thickness and color, you can do so by using px and color codes.
    */
}

/* linkArea = 타일형 (한 줄에 두 개씩) Tile style (two items per line) */

.linkArea ul {
    border-radius: 2em;
    border:1px #cecece solid;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    overflow:hidden;
}

.linkArea ul li {
    border-bottom:1px #cecece solid;
    border-right : 1px #cecece solid;
    padding: 1em 1em;
}
.linkArea ul li:nth-child(2n) {
    border-right: 0;
}
.linkArea ul li:nth-last-child(-n+2) {
    border-bottom: 0;
}
.linkArea ul li a {
    display:block;
}

@keyframes bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-10px); } 
  50%  { transform: translateY(0); }     
  70%  { transform: translateY(-5px); }  
  100% { transform: translateY(0); }    
}

.linkArea ul li a i {
    display: block;
    transition: transform 0.2s ease;
    margin:auto;
    color:#333;
    /*
        링크의 글씨 색상을 설정합니다.
        
        This sets the text color of the links.
    */
}
.linkArea ul li a:hover,
.linkArea ul li a:active {
    color: #8C7EAF;
    /*
     *  링크에 반응했을 때 (컴퓨터 : 마우스 오버, 모바일 : 누르고 있는 상태) 글씨에 포인트 색상을 적용하는 부분입니다.
     * This applies the point color to the text when interacting with links (computer: mouse over, mobile: press and hold).
    */
}
.linkArea ul li a:hover i,
.linkArea ul li a:active i {
    animation: bounce 0.5s ease;
    /*
     * 링크에 반응했을 때 (컴퓨터 : 마우스 오버, 모바일 : 누르고 있는 상태) 아이콘에 애니메이션을 주는 부분입니다. 아이콘에 애니메이션을 없애고 싶다면 지우세요.
     * This adds animation to icons when interacting with links (computer: mouse over, mobile: press and hold). If you want to remove the animation from icons, delete this section.
    */
    color: #8C7EAF;
    /*
     *  링크에 반응했을 때 (컴퓨터 : 마우스 오버, 모바일 : 누르고 있는 상태) 아이콘에 포인트 색상을 적용하는 부분입니다. 
     * This applies the point color to the icons when interacting with links (computer: mouse over, mobile: press and hold).
    */
}

/* linkArea_normalList = 기본형 (한 줄에 하나씩) Basic style (one item per line) */ 

.linkArea_normalList ul {
    border-radius: 2em;
    border:1px #cecece solid;
}

.linkArea_normalList ul li {
    border-bottom:1px #cecece solid;
    padding: 0.5em 1em;
}
.linkArea_normalList ul li:last-child {
    border-bottom:0;
}
.linkArea_normalList ul li a {
    display:block;
}

.linkArea_normalList ul li a i {
    display: inline-block;
    transition: transform 0.2s ease;
    margin-right: 10px;
    color:#333;
    /*
        링크의 글씨 색상을 설정합니다.
        
        This sets the text color of the links.
    */
}
.linkArea_normalList ul li a:hover,
.linkArea_normalList ul li a:active {
    color: #8C7EAF;
    /*
     *  링크에 반응했을 때 (컴퓨터 : 마우스 오버, 모바일 : 누르고 있는 상태) 글씨에 포인트 색상을 적용하는 부분입니다.
     * This applies the point color to the text when interacting with links (computer: mouse over, mobile: press and hold).
    */
}
.linkArea_normalList ul li a:hover i,
.linkArea_normalList ul li a:active i {
    animation: bounce 0.5s ease;
    /*
     * 링크에 반응했을 때 (컴퓨터 : 마우스 오버, 모바일 : 누르고 있는 상태) 아이콘에 애니메이션을 주는 부분입니다. 아이콘에 애니메이션을 없애고 싶다면 지우세요.
     * This adds animation to icons when interacting with links (computer: mouse over, mobile: press and hold). If you want to remove the animation from icons, delete this section.
    */
    color: #8C7EAF;
    /*
     *  링크에 반응했을 때 (컴퓨터 : 마우스 오버, 모바일 : 누르고 있는 상태) 아이콘에 포인트 색상을 적용하는 부분입니다. 
     * This applies the point color to the icons when interacting with links (computer: mouse over, mobile: press and hold).
    */
}