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

/* ============================================
   Reset & Base Styles
   ============================================ */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,main,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    border:0;
    outline:0;
    background:transparent;
    font-weight:normal;
    font-style:normal;
}

html{scroll-behavior:smooth;}

body{
    background-color:#ffffff;
    color:#000000;
    line-height:1.6;
    font-family:"Noto Sans KR", sans-serif;
}

ul li{list-style-type:none;}

em{font-style:normal;color:#999999;}

code{font-family:"Noto Sans KR", sans-serif;}

::selection{background-color:#333333;color:#ffffff;}
::-moz-selection{background-color:#333333;color:#ffffff;}

/* ============================================
   Layout
   ============================================ */
#whole-wrap{
    margin:30px 5%;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
}

/* ============================================
   Header
   ============================================ */
header .inner{padding:30px;}

header h1{
    font-family:"Noto Sans KR", sans-serif;
    font-weight:800;
    font-size:36px;
    color:#000000;
    margin-bottom:8px;
    letter-spacing:-0.5px;
}

header p{
    font-size:13px;
    letter-spacing:0.5px;
    color:#666666;
    font-weight:400;
}

/* ============================================
   Top Button
   ============================================ */
.aside{
    position:fixed;
    right:5%;
    bottom:30px;
    z-index:100;
}

.aside a{
    display:inline-block;
    width:45px;
    height:45px;
    font-family:"Noto Sans KR", sans-serif;
    font-size:12px;
    line-height:45px;
    transition:all 0.3s ease;
    text-align:center;
    text-decoration:none;
    color:#ffffff;
    border-radius:50%;
    background-color:#000000;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.aside a:hover{
    color:#ffffff;
    background-color:#000000;
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

/* ============================================
   Main Content
   ============================================ */
main{
    font-family:"Noto Sans KR", sans-serif;
    font-size:15px;
    font-weight:400;
    color:#000000;
}

main h1{
    font-family:"Noto Sans KR", sans-serif;
    font-size:24px;
    font-weight:700;
    color:#000000;
    margin-bottom:8px;
    letter-spacing:-0.3px;
}

main h1::after{
    display:block;
    width:40px;
    height:4px;
    margin:12px 0 30px 0;
    content:'';
    background-color:#000000;
    border-radius:2px;
}

main section{
    padding:60px 0;
    border-bottom:1px solid #cccccc;
}

main section:last-child{border-bottom:none;}

main .content{padding:0 20px;}

main .content h2{
    margin:35px 0 12px 0;
    font-size:20px;
    font-weight:600;
    color:#000000;
    line-height:1.4;
}

main .content h2:first-child{margin-top:0;}

main .content p{
    line-height:1.8;
    color:#333333;
    margin-bottom:12px;
}

main .content p b{
    font-size:1.05em;
    font-weight:600;
    color:#000000;
}

main .content li{
    line-height:1.8;
    margin-bottom:8px;
    color:#333333;
}

main .content li strong{
    font-size:16px;
    font-weight:600;
    color:#000000;
    display:inline-block;
    margin-bottom:4px;
}

main .content li a{
    color:#000000;
    transition:color 0.2s ease;
}

main .content li a:hover{color:#333333;}

main .content li b{
    display:inline-block;
    width:120px;
    font-size:14px;
    font-weight:500;
    color:#333333;
}

main .content b a{font-size:13px;}

main .content b a:hover{text-decoration:underline;}

main .content blockquote{
    margin:25px 0;
    padding:20px 25px;
    background-color:#f5f5f5;
    border-left:4px solid #000000;
    border-radius:4px;
}

main .content blockquote p{
    margin-bottom:12px;
    color:#333333;
    font-size:15px;
    line-height:1.7;
}

main .content blockquote p:last-child{margin-bottom:0;}

main .content ul ul{
    margin-top:8px;
    margin-bottom:12px;
    padding-left:20px;
}

main .content ul ul li{
    margin-bottom:6px;
    font-size:14px;
    color:#666666;
    position:relative;
}

main .content ul ul li::before{
    content:'•';
    color:#999999;
    margin-right:8px;
    font-weight:bold;
}

/* ============================================
   Work Experience Section
   ============================================ */
#workexperience .experience-summary{
    margin:0 20px 40px 20px;
    padding-bottom:30px;
    border-bottom:2px solid #000000;
}

#workexperience .experience-summary p{
    font-size:15px;
    line-height:1.8;
    color:#333333;
    text-align:justify;
}

#workexperience .content > h2{
    margin-top:40px;
    padding-top:30px;
    border-top:1px solid #cccccc;
}

#workexperience .content > h2:first-of-type{
    margin-top:0;
    padding-top:0;
    border-top:none;
}

#workexperience .content > p{
    margin-bottom:20px;
    color:#999999;
    font-size:14px;
}

#workexperience .content > p em{color:#999999;}

#workexperience .content ul ul{
    margin-left:20px;
    margin-top:6px;
}

#workexperience .content li em{
    color:#999999;
    font-size:13px;
}

#workexperience .content .work-category{
    margin-top:20px;
    margin-bottom:15px;
}

#workexperience .content .work-category:first-child{margin-top:0;}

#workexperience .content .work-category > strong{
    font-size:18px;
    font-weight:700;
    color:#000000;
    display:block;
    margin-bottom:10px;
    letter-spacing:-0.2px;
    text-transform:uppercase;
}

#workexperience .content .work-category > ul{margin-top:10px;}

/* ============================================
   Skills Section
   ============================================ */
#skills .content ul > li{
    margin-bottom:20px;
    padding:0;
}

#skills .content ul > li:last-child{margin-bottom:0;}

#skills .content ul > li > strong{
    font-size:17px;
    font-weight:600;
    color:#000000;
    margin-bottom:6px;
    display:block;
}

#skills .content ul > li > ul{
    margin-top:6px;
    margin-bottom:0;
    padding-left:0;
}

#skills .content ul > li > ul > li{
    margin-bottom:4px;
    font-size:14px;
    color:#666666;
    line-height:1.6;
    padding-left:0;
}

#skills .content ul > li > ul > li::before{display:none;}

/* ============================================
   Activities & Awards Section
   ============================================ */
#activities .content ul li{
    margin-bottom:12px;
    padding-left:8px;
    position:relative;
}

#activities .content ul li::before{
    content:'🏆';
    margin-right:8px;
}

/* ============================================
   Education Section
   ============================================ */
#education .content h2{
    font-size:18px;
    font-weight:600;
    color:#000000;
    margin-top:25px;
    margin-bottom:8px;
}

#education .content h2:first-child{margin-top:0;}

#education .content p{
    margin-bottom:20px;
    color:#333333;
}

/* ============================================
   Contact Section
   ============================================ */
#contact .content ul li{
    margin-bottom:15px;
    display:flex;
    align-items:center;
    gap:12px;
}

#contact .content ul li b{
    width:auto;
    font-size:18px;
    margin-right:0;
}

#contact .content ul li a{
    font-size:15px;
    color:#000000;
}

/* ============================================
   Footer
   ============================================ */
footer{
    padding:40px 0;
    margin-top:60px;
    border-top:1px solid #cccccc;
    background-color:#ffffff;
}

footer p{
    font-size:12px;
    color:#666666;
    margin-bottom:8px;
}

footer address{
    font-size:12px;
    font-style:normal;
    color:#666666;
}

footer address a{
    color:#000000;
    transition:color 0.2s ease;
}

footer address a:hover{color:#333333;}

/* ============================================
   Buttons
   ============================================ */
.btn{
    display:inline-block;
    margin:0 4px 4px 0;
    padding:4px 8px;
    font-size:10px;
    line-height:1.4;
    font-weight:500;
    color:#ffffff !important;
    border-radius:4px;
    transition:all 0.2s ease;
    vertical-align:middle;
}

.btn.web{background:#333333;}
.btn.mobile{background:#666666;}
.btn.accesibility{background:#999999;}
.btn.html5{background:#000000;}
.btn.css3{background:#333333;}
.btn.respon{background:#666666;}
.btn.script{background:#000000;}

.btn:hover{
    opacity:0.8;
    transform:translateY(-1px);
}

/* ============================================
   Table
   ============================================ */
table{width:100%;}

table th,table td{
    padding:7px 15px;
    text-align:left;
    vertical-align:middle;
    border:1px solid #cccccc;
}

table th{
    text-align:center;
    background:#f5f5f5;
    color:#000000;
}

table td{color:#333333;}

table td a{color:#000000!important;}

table td a:hover{color:#666666!important;}

table td:nth-child(2),table td:nth-child(3),table td:nth-child(5){text-align:center;}

/* ============================================
   Links
   ============================================ */
a{
    text-decoration:none;
    transition:color 0.3s ease;
}

a:link,a:visited{color:#000000;}

a:hover,a:focus,a:active{
    color:#333333;
    text-decoration:underline;
}

/* ============================================
   Responsive Design
   ============================================ */
@media screen and (max-width:1024px){
    #whole-wrap{margin:20px 3%;}
    main section{padding:40px 0;}
}

@media screen and (max-width:840px){
    #whole-wrap{margin:15px 2%;}
    header h1{font-size:28px;}
    main h1{font-size:22px;}
    main .content h2{font-size:18px;}
    main .content{padding:0 10px;}
    .aside{right:3%;bottom:20px;}
    .aside a{width:40px;height:40px;line-height:40px;font-size:11px;}
}

@media screen and (max-width:640px){
    header h1{font-size:24px;}
    header p{font-size:12px;}
    main h1{font-size:20px;}
    main h1::after{width:30px;height:3px;}
    main section{padding:35px 0;}
    main .content h2{font-size:16px;margin:25px 0 10px 0;}
    main .content li{font-size:14px;}
    main .content blockquote{padding:15px 18px;}
    main .content blockquote p{font-size:14px;}
    footer{padding:30px 0;margin-top:40px;}
}

@media screen and (max-width:480px){
    header h1{font-size:22px;}
    main .content{padding:0 5px;}
    main .content li b{width:100px;font-size:13px;}
    .aside{right:2%;bottom:15px;}
    .aside a{width:35px;height:35px;line-height:35px;font-size:10px;}
}