@charset "utf-8";

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	background:#e5e5e5;
	font-family:"¸¼Àº °íµñ", sans-serif;
	color:#444;
}

.wrapper{
	display:flex;
	gap:30px;
	padding:20px;
	align-items:flex-start;
}

/* ===================== */
/* ÀÔ·Â ¿µ¿ª */
/* ===================== */

.input-panel{
	width:350px;
	background:#fff;
	padding:20px;
	border-radius:10px;
	box-shadow:0 0 15px rgba(0,0,0,0.15);
	position:sticky;
	top:20px;
}

.input-panel h2{
	margin-bottom:20px;
	color:#26caca;
}

.form-group{
	margin-bottom:15px;
}

.form-group label{
	display:block;
	margin-bottom:5px;
	font-weight:bold;
}

.form-group input,
.form-group textarea{
	width:100%;
	padding:10px;
	border:1px solid #ccc;
	border-radius:5px;
}

.form-group textarea{
	height:100px;
	resize:vertical;
}

.input-panel button{
	width:100%;
	padding:12px;
	margin-top:10px;
	border:none;
	cursor:pointer;
	font-size:15px;
	border-radius:5px;
	color:#fff;
}

.input-panel button:first-of-type{
	background:#26caca;
}

.input-panel button:last-of-type{
	background:#555;
}

/* ===================== */
/* À̷¼­ */
/* ===================== */

.resume{

    width:210mm;

    height:297mm;

    overflow:hidden;

    background:#fff;

    position:relative;

    padding:20mm;

    border:15px solid #555;
}

/* ³»ºÎ Á¡¼± */

.resume::before{

	content:"";

	position:absolute;

	top:15px;
	left:15px;
	right:15px;
	bottom:15px;

	border:2px dotted #d8d8d8;

	pointer-events:none;
}

/* Á¢Èù ¸ð¼­¸® */

.corner{

	position:absolute;

	right:0;
	top:0;

	width:150px;
	height:150px;

	background:#fff;

	clip-path:polygon(
	100% 0,
	100% 100%,
	0 0
	);

	border-left:2px solid #aaa;
	border-bottom:2px solid #aaa;
}

/* ===================== */
/* Á¦¸ñ */
/* ===================== */

header{
	margin-bottom:40px;
}

header h1{

    text-align:center;

    font-size:36px;

    color:#2ecfd0;

    margin-bottom:20px;
}

/* ===================== */
/* ÇÁ·ÎÇÊ */
/* ===================== */

.profile{

	display:flex;

	padding-bottom:25px;

	border-bottom:1px solid #ddd;

	margin-bottom:25px;
}

.photo-box{

	width:140px;
	height:180px;

	border:1px solid #ddd;

	background:#f5f5f5;

	overflow:hidden;
}

.photo-box img{

	width:100%;
	height:100%;

	object-fit:cover;
}

.profile-info{

	flex:1;

	padding-left:25px;
}

.profile-info h2{

	font-size:32px;

	margin-bottom:8px;

	color:#222;
}

.profile-info p{

	font-size:20px;

	margin-bottom:15px;

	color:#555;
}

.profile-info table{

	width:100%;

	border-collapse:collapse;
}

.profile-info th{

	width:100px;

	text-align:left;

	padding:5px;

	font-size:14px;

	color:#333;
}

.profile-info td{

	padding:5px;

	font-size:14px;
}

/* ===================== */
/* ³»¿ë */
/* ===================== */

.content{

	display:grid;

	grid-template-columns:60% 40%;

	gap:25px;
}

.block{

	margin-bottom:30px;
}

.block h3{

	color:#2ecfd0;

	font-size:24px;

	margin-bottom:12px;

	padding-bottom:8px;

	border-bottom:1px dashed #cfcfcf;
}

.block div{

    white-space:pre-line;

    line-height:1.5;

    font-size:13px;
}

/* ===================== */
/* ¿ìÃø ¿µ¿ª */
/* ===================== */

.right-column{

	border-left:1px solid #ddd;

	padding-left:25px;
}

/* ===================== */
/* ½ºÅ³ */
/* ===================== */

#r_skill{

	display:flex;

	flex-wrap:wrap;

	gap:15px;
}

.skill-circle{

	width:90px;
	height:90px;

	border:2px solid #2ecfd0;

	border-radius:50%;

	display:flex;

	align-items:center;

	justify-content:center;

	text-align:center;

	font-size:14px;

	font-weight:bold;
}

/* ===================== */
/* Ãâ·Â */
/* ===================== */

@media print{

    body{
        background:#fff;
    }

    .input-panel{
        display:none;
    }

    .wrapper{
        display:block;
        padding:0;
        margin:0;
    }

    .resume{

        width:210mm;
        height:297mm;

        margin:0;

        padding:15mm;

        border:10px solid #555;

        box-shadow:none;

        overflow:hidden;
    }

    @page{
        size:A4 portrait;
        margin:0;
    }
}